<?php
/**
 * Base reward view for reward types.
 *
 * @package Awesomemotive\Rewardswp\Views\Panel\RewardTypes
 * @since 1.0.0
 */

namespace Awesomemotive\Rewardswp\Views\Panel\RewardTypes;

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

use Awesomemotive\Rewardswp\Abstracts\AbstractView;
use Awesomemotive\Rewardswp\Helpers\IconHelper;
use Awesomemotive\Rewardswp\Interfaces\ViewInterface;
use function Awesomemotive\Rewardswp\Helpers\kses;


/**
 * Base Reward View.
 *
 * @since 1.0.0
 */
class BaseRewardView extends AbstractView implements ViewInterface {
	/**
	 * Icon helper instance.
	 *
	 * @since 1.0.0
	 * @var IconHelper
	 */
	private IconHelper $icon_helper;

	/**
	 * Constructor.
	 *
	 * @since 1.0.0
	 *
	 * @param IconHelper $icon_helper
	 */
	public function __construct( IconHelper $icon_helper ) {
		$this->icon_helper = $icon_helper;
	}

	/**
	 * Render the template.
	 *
	 * @since 1.0.0
	 *
	 * @see IconHelper For the icon names.
	 *
	 * @param array $args {
	 *     @type string $icon_name       The icon that represents the reward. Default 'gift'.
	 *     @type string $reward_title    Reward title. Default true.
	 *     @type string $reward_subtitle A subtitle showed beneath the reward title. Default true.
	 *     @type string $reward_content  The reward content. It can contain HTML. Default true.
	 * }
	 *
	 * @return void
	 */
	public function render( array $args = [] ): void {
		$args = wp_parse_args(
			$args,
			[
				'icon_name'       => 'gift',
				'reward_title'    => '',
				'reward_subtitle' => '',
				'reward_content'  => '',
				'expanded'        => false,
			]
		);
		?>

		<div
			class="overflow-hidden transition-all duration-300 bg-white border border-gray-200 rounded-lg hover:shadow-card"
			x-bind:class="{ 'shadow-card': expanded }"
			x-data="{ expanded: <?php echo absint( $args['expanded'] ); ?> }"
		>
			<div
				class="p-4 cursor-pointer"
				x-on:click="expanded = ! expanded"
			>
				<div class="flex items-center">
					<div class="mr-4 text-gray-600">
						<?php $this->icon_helper->render_icon( $args['icon_name'] ); ?>
					</div>
					<div>
						<h3 class="text-lg font-semibold"><?php echo esc_html( $args['reward_title'] ); ?></h3>
						<p class="text-sm text-gray-600"><?php echo esc_html( $args['reward_subtitle'] ); ?></p>
					</div>
					<div class="ml-auto">
						<svg class="w-6 h-6 text-gray-400 transition-transform duration-300 transform"
							x-bind:class="{ 'rotate-180': expanded }"
							fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
						</svg>
					</div>
				</div>
			</div>
			<div
				class="overflow-hidden"
				x-cloak
				x-show="expanded"
				x-collapse
			>
				<div class="px-4 pb-4">
					<?php echo wp_kses( $args['reward_content'], kses() ); ?>
				</div>
			</div>

		</div>

		<?php
	}
}
