<?php
/**
 * Rewards widget launcher content view.
 *
 * @package Awesomemotive\Rewardswp\Views\Admin\Parts
 * @since 1.0.0
 */

namespace Awesomemotive\Rewardswp\Views\Admin\Parts;

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

use Awesomemotive\Rewardswp\Abstracts\AbstractView;
use Awesomemotive\Rewardswp\Interfaces\ViewInterface;
use Awesomemotive\Rewardswp\Settings\Options\RewardsWidget\LauncherDisplayOption;
use Awesomemotive\Rewardswp\Settings\Options\RewardsWidget\LauncherPositionOption;
use function Awesomemotive\Rewardswp\Helpers\build_input_name;
use function Awesomemotive\Rewardswp\Helpers\get_option_object;
use function Awesomemotive\Rewardswp\Helpers\get_option_value;
use function Awesomemotive\Rewardswp\Helpers\get_view_component;
use function Awesomemotive\Rewardswp\Helpers\kses;

class RewardsWidgetLauncherContentView extends AbstractView implements ViewInterface {
	/**
	 * Render the template.
	 *
	 * @since 1.0.0
	 *
	 * @param array $args
	 *
	 * @return void
	 */
	public function render( array $args = [] ): void {

		$display_option = get_option_object( LauncherDisplayOption::class );

		?>

		<div class="divide-y divide-gray-200">

			<div class="py-5">
				<div class="gap-8 md:flex md:items-center">
					<div class="md:w-1/3 flex-none">
						<label for="launcher_text" class="text-sm font-semibold"><?php esc_html_e( 'Display', 'rewardswp' ); ?></label>
					</div>
					<div class="md:w-2/3">
						<div class="space-y-3">

							<?php

							/* phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Contents are escaped by the function */
							echo get_view_component(
								'radio',
								[
									'name'        => build_input_name( $display_option->get_group(), $display_option->get_name() ),
									'x-model'     => 'launcher.display',
									'options'     => $display_option->get_options(),
									'x-on:change' => '$dispatch("setting-updated", { key: "launcher_display", value: $event.target.value })',
								]
							);

							?>

						</div>
					</div>
				</div>
			</div>

			<div class="py-5">
				<div class="gap-8 md:flex md:items-center">
					<div class="md:w-1/3 flex-none">
						<label for="launcher_text" class="text-sm font-semibold"><?php esc_html_e( 'Text', 'rewardswp' ); ?></label>
					</div>
					<div class="md:w-2/3">
						<div
							class="sm:max-w-xs mt-2 xs:mt-0 flex items-center rounded-md px-3 outline-1 -outline-offset-1 outline-gray-300 focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-blue-600 transition-colors"
							x-bind:class="launcher.display === 'icon_only' ? 'bg-gray-100 cursor-not-allowed' : 'bg-white'"
						>
							<input
								x-model="launcher.buttonText"
								x-on:input.debounce.200ms="$dispatch('setting-updated', { key: 'launcher_text', value: $event.target.value })"
								x-bind:disabled="launcher.display === 'icon_only'"
								type="text"
								id="launcher_text"
								name="rewardswp_settings[rewards_widget][launcher_text]"
								class="block min-w-0 grow py-2 pr-3 text-base text-gray-900 placeholder:text-gray-400 focus:outline-none sm:text-sm/6 disabled:text-gray-400 disabled:cursor-not-allowed bg-transparent"
							>
						</div>
					</div>
				</div>
			</div>

			<div class="py-5">
				<div class="gap-8 md:flex md:items-center">
					<div class="md:w-1/3 flex-none">
						<label for="rewardswp_settings[rewards_widget][launcher_position]" class="text-sm font-semibold"><?php esc_html_e( 'Position', 'rewardswp' ); ?></label>
					</div>
					<div class="md:w-2/3">
						<?php

						echo wp_kses(
							get_view_component(
								'select',
								[
									'section'     => 'rewards_widget',
									'name'        => 'launcher_position',
									'label'       => esc_html__( 'Position', 'rewardswp' ),
									'options'     => [
										'left'  => esc_html__( 'Left', 'rewardswp' ),
										'right' => esc_html__( 'Right', 'rewardswp' ),
									],
									'selected'    => get_option_value( LauncherPositionOption::class ),
									'x-on:change' => '$dispatch("setting-updated", { key: "launcher_position", value: $event.target.value })',
								]
							),
							kses()
						);

						?>
					</div>
				</div>
			</div>


		</div>

		<?php
	}
}
