<?php
/**
 * Toast notification view component.
 *
 * @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\Helpers\IconHelper;
use Awesomemotive\Rewardswp\Interfaces\ViewInterface;

class ToastView extends AbstractView implements ViewInterface {
	/**
	 * Icon helper instance.
	 *
	 * @var IconHelper
	 */
	private IconHelper $icon_helper;

	/**
	 * Constructor.
	 */
	public function __construct() {
		$this->icon_helper = new IconHelper();
	}

	/**
	 * Render the toast component.
	 *
	 * @since 1.0.0
	 * @param array $args
	 * @return void
	 */
	public function render( array $args = [] ): void {
		?>
		<div
			x-data="{ show: false, message: '', type: 'success', timeout: null }"
			x-init="
				window.addEventListener('rewardswp-toast', e => {
					message = e.detail.message;
					type = e.detail.type || 'success';
					show = true;
					clearTimeout(timeout);
					timeout = setTimeout(() => show = false, 3500);
				});
			"
			aria-live="assertive"
			class="pointer-events-none fixed top-0 right-0 bottom-0 left-0 flex items-end px-4 pb-8 z-[9999999] rewardswp-container"
		>
			<div class="flex w-full flex-col items-center space-y-3">
				<div
					x-show="show"
					x-transition:enter="transform ease-out duration-300 transition"
					x-transition:enter-start="translate-y-2 opacity-0"
					x-transition:enter-end="translate-y-0 opacity-100"
					x-transition:leave="transition ease-in duration-100"
					x-transition:leave-start="opacity-100"
					x-transition:leave-end="opacity-0"
					class="pointer-events-auto w-full max-w-md overflow-hidden rounded-lg bg-gray-900 shadow-2xl ring-1 ring-white/10"
					style="display: none;"
				>
					<div class="p-4">
						<div class="flex items-center">
							<div class="shrink-0">
								<template x-if="type === 'success'">
									<?php $this->icon_helper->render_icon( 'check-circle', 'size-5 text-green-400' ); ?>
								</template>
								<template x-if="type === 'error'">
									<?php $this->icon_helper->render_icon( 'alert-triangle', 'size-6 text-red-400' ); ?>
								</template>
								<template x-if="type === 'warning'">
									<?php $this->icon_helper->render_icon( 'alert-triangle', 'size-6 text-yellow-400' ); ?>
								</template>
								<template x-if="type === 'info'">
									<?php $this->icon_helper->render_icon( 'info', 'size-6 text-blue-400' ); ?>
								</template>
							</div>
							<div class="ml-3 w-0 flex-1 pt-0.5">
								<p class="text-sm font-medium text-white" x-text="message"></p>
							</div>
							<div class="ml-4 flex shrink-0">
								<button
									type="button"
									x-on:click="show = false; clearTimeout(timeout)"
									class="inline-flex items-center justify-center rounded-md bg-gray-900 text-gray-400 hover:text-gray-300 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-gray-900 focus:outline-none"
								>
									<span class="sr-only"><?php esc_html_e( 'Close', 'rewardswp' ); ?></span>
									<svg class="size-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
										<path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" />
									</svg>
								</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<?php
	}
}
