<?php
/**
 * Modal 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;

class ModalComponentView extends AbstractView implements ViewInterface {
	/**
	 * Render a modal wrapper with all the boilerplate.
	 *
	 * @param array $args {
	 *     Required. An array of arguments.
	 *
	 *     @type string $show_var           Alpine variable name for showing/hiding modal (required).
	 *     @type string $content            The inner content of the modal (required).
	 *     @type string $event              Optional. Alpine event to listen for to open modal.
	 *     @type string $width              Optional. Modal width: 'sm', 'md', 'lg', 'xl'. Default 'md'.
	 *     @type bool   $show_close_button  Optional. Whether to show close button. Default true.
	 *     @type string $close_on_click     Optional. Alpine expression for clicking overlay. Default closes modal.
	 *     @type string $aria_label         Optional. Aria label for modal. Default 'modal-title'.
	 *     @type string $additional_classes Optional. Additional classes for modal panel.
	 * }
	 *
	 * @return void
	 */
	public function render( array $args = array() ): void {
		$args = wp_parse_args(
			$args,
			[
				'show_var'           => '',
				'content'            => '',
				'event'              => '',
				'width'              => 'md',
				'show_close_button'  => true,
				'close_on_click'     => '',
				'aria_label'         => 'modal-title',
				'additional_classes' => '',
			]
		);

		if ( empty( $args['show_var'] ) || empty( $args['content'] ) ) {
			return;
		}

		// Width mapping
		$width_classes = [
			'sm'  => 'sm:max-w-sm',
			'md'  => 'sm:max-w-md',
			'lg'  => 'sm:max-w-lg',
			'xl'  => 'sm:max-w-xl',
			'2xl' => 'sm:max-w-2xl',
		];

		$width_class = $width_classes[ $args['width'] ] ?? $width_classes['md'];

		// Close action
		$close_action = ! empty( $args['close_on_click'] ) ? $args['close_on_click'] : $args['show_var'] . ' = false';

		?>
		<div
			x-show="<?php echo esc_attr( $args['show_var'] ); ?>"
			<?php if ( ! empty( $args['event'] ) ) : ?>
			x-on:<?php echo esc_attr( $args['event'] ); ?>="<?php echo esc_attr( $args['show_var'] ); ?> = true"
			<?php endif; ?>
			x-on:keydown.escape.window="<?php echo esc_attr( $close_action ); ?>"
			class="fixed inset-x-0 z-50 overflow-y-auto"
			style="top: var(--wp-admin--admin-bar--height, 32px); height: calc(100vh - var(--wp-admin--admin-bar--height, 32px))"
			aria-labelledby="<?php echo esc_attr( $args['aria_label'] ); ?>"
			role="dialog"
			aria-modal="true"
			x-cloak
			x-trap.noscroll.inert="<?php echo esc_attr( $args['show_var'] ); ?>"
		>
			<div class="flex min-h-full items-center justify-center p-4 text-center sm:items-center sm:p-0">
				<!-- Background overlay -->
				<div
					x-show="<?php echo esc_attr( $args['show_var'] ); ?>"
					x-transition:enter="ease-out duration-300"
					x-transition:enter-start="opacity-0"
					x-transition:enter-end="opacity-100"
					x-transition:leave="ease-in duration-200"
					x-transition:leave-start="opacity-100"
					x-transition:leave-end="opacity-0"
					class="fixed inset-x-0 transition-opacity z-40"
					style="top: var(--wp-admin--admin-bar--height, 32px); height: calc(100vh - var(--wp-admin--admin-bar--height, 32px))"
					aria-hidden="true"
					x-on:click="<?php echo esc_attr( $close_action ); ?>"
				>
					<div class="absolute inset-0 bg-slate-900/40"></div>
				</div>

				<!-- Modal panel -->
				<div
					x-show="<?php echo esc_attr( $args['show_var'] ); ?>"
					x-transition:enter="ease-out duration-300"
					x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
					x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
					x-transition:leave="ease-in duration-200"
					x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
					x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
					x-on:click.outside="<?php echo esc_attr( $close_action ); ?>"
					class="relative z-50 transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full <?php echo esc_attr( $width_class ); ?> <?php echo esc_attr( $args['additional_classes'] ); ?>"
				>
					<?php if ( $args['show_close_button'] ) : ?>
					<!-- Close button -->
					<button
						x-on:click="<?php echo esc_attr( $close_action ); ?>"
						type="button"
						class="absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:outline-none z-10"
					>
						<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-6 w-6">
							<path d="M18 6 6 18"></path>
							<path d="m6 6 12 12"></path>
						</svg>
						<span class="sr-only"><?php esc_html_e( 'Close', 'rewardswp' ); ?></span>
					</button>
					<?php endif; ?>

					<!-- Modal content -->
					<?php
					// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Contents are escaped by the function
					echo $args['content'];
					?>
				</div>
			</div>
		</div>
		<?php
	}
}
