<?php
/**
 * Select component view.
 *
 * @package Awesomemotive\Rewardswp\Views\Admin\Components
 * @since 1.0.0
 */

namespace Awesomemotive\Rewardswp\Views\Admin\Components;

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

use Awesomemotive\Rewardswp\Abstracts\AbstractView;
use Awesomemotive\Rewardswp\Interfaces\ViewInterface;
use Awesomemotive\Rewardswp\Services\OptionsService;
use function Awesomemotive\Rewardswp\Helpers\tag_attr;

class SelectComponentView extends AbstractView implements ViewInterface {
	/**
	 * Render the template.
	 *
	 * @since 1.0.0
	 *
	 * @param array $args
	 *
	 * @return void
	 */
	public function render( array $args = [] ): void {
		$args = wp_parse_args(
			$args,
			[
				'section'        => '',
				'name'           => '',
				'label'          => '',
				'options'        => [],
				'selected'       => '',
				'disabled'       => false,
				'locked'         => false,
				'locked_message' => '',
				'x-on:change'    => '',
				'x-on:click'     => '',
				'x-model'        => '',
			]
		);

		// Build the ID attribute - only when section and name are provided
		$id              = '';
		$use_form_fields = ! empty( $args['section'] ) && ! empty( $args['name'] );

		if ( $use_form_fields ) {
			$id  = OptionsService::OPTION_NAME;
			$id .= '[' . $args['section'] . ']';
			$id .= '[' . $args['name'] . ']';
		}

		?>

		<div
			class="mt-2 xs:mt-0 grid grid-cols-1 sm:max-w-xs <?php echo ( ( $args['disabled'] || $args['locked'] ) && ! empty( $args['x-on:click'] ) ) ? 'cursor-pointer' : ''; ?>"
			<?php
			// When disabled, put click handler on wrapper since select will have pointer-events-none
			if ( ( $args['disabled'] || $args['locked'] ) && ! empty( $args['x-on:click'] ) ) {
				tag_attr( 'x-on:click', $args['x-on:click'] );
			}
			?>
		>
			<select
				<?php tag_attr( 'x-model', $args['x-model'] ); ?>
				<?php tag_attr( 'x-on:change', $args['x-on:change'] ); ?>
				<?php
				// Only add click handler to select if NOT disabled
				if ( ! ( $args['disabled'] || $args['locked'] ) && ! empty( $args['x-on:click'] ) ) {
					tag_attr( 'x-on:click', $args['x-on:click'] );
				}
				?>
				<?php if ( $use_form_fields ) : ?>
					id="<?php echo esc_attr( $id ); ?>"
					name="<?php echo esc_attr( $id ); ?>"
				<?php endif; ?>
				class="col-start-1 row-start-1 w-full appearance-none rounded-md py-2 pr-8 pl-3 text-base outline-1 -outline-offset-1 outline-gray-300 focus:outline-2 focus:-outline-offset-2 sm:text-sm/6 <?php echo ( $args['disabled'] || $args['locked'] ) ? 'bg-gray-50 text-gray-500 pointer-events-none opacity-60' : 'bg-white text-gray-900 focus:outline-blue-600'; ?>"
				<?php
				disabled( $args['disabled'] || $args['locked'] );
				?>
			>
				<?php foreach ( $args['options'] as $value => $label ) : ?>
					<option
						value="<?php echo esc_attr( $value ); ?>"
						<?php selected( $args['selected'], $value ); ?>
					>
						<?php echo esc_html( $label ); ?>
					</option>
				<?php endforeach; ?>
			</select>
			<svg
				class="pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-gray-500 sm:size-4"
				viewBox="0 0 16 16"
				fill="currentColor"
				aria-hidden="true"
				data-slot="icon"
			>
				<path
					fill-rule="evenodd"
					d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z"
					clip-rule="evenodd"
				/>
			</svg>
		</div>

		<?php if ( $args['locked'] && $args['locked_message'] ) : ?>
			<p class="mt-1 mb-0 text-sm text-gray-500">
				<?php echo esc_html( $args['locked_message'] ); ?>
			</p>
		<?php endif; ?>

		<?php
	}
}
