<?php
/**
 * Hyvä Themes - https://hyva.io
 * Copyright © Hyvä Themes. All rights reserved.
 * See COPYING.txt for license details.
 */

use Hyva\Theme\Model\ViewModelRegistry;
use Hyva\Theme\ViewModel\HeroiconsOutline;
use Hyva\Theme\ViewModel\HyvaCsp;
use Hyva\Theme\ViewModel\ReCaptcha;
use Magento\Framework\Escaper;
use Magento\Newsletter\Block\Subscribe;

/** @var Subscribe $block */
/** @var Escaper $escaper */
/** @var HyvaCsp $hyvaCsp */
/** @var ViewModelRegistry $viewModels */
/** @var ReCaptcha $recaptcha */
/** @var HeroiconsOutline $heroicons */

$heroicons = $viewModels->require(HeroiconsOutline::class);

// Do not replace this with $viewModels->require(ReCaptcha::class); that might break the dependency
// on the Magento_ReCaptchaNewsletter module
$recaptcha = $block->getData('viewModelRecaptcha');
?>
<div class="pr-4 lg:w-1/4 md:w-1/2">
    <form
        class="form subscribe"
        action="<?= $escaper->escapeUrl($block->getFormActionUrl()) ?>"
        method="post"
        x-data="initNewsletterForm"
        @submit.prevent="submitForm"
        id="newsletter-validate-detail"
        aria-label="<?= $escaper->escapeHtmlAttr(__('Subscribe to Newsletter')) ?>"
    >
        <h2
            class="text-md leading-5 font-semibold tracking-wider uppercase mb-4"
            id="footer-newsletter-heading"
        >
            <?= $escaper->escapeHtml(__('Newsletter')) ?>
        </h2>
        <div class="flex flex-wrap justify-center gap-2 md:justify-start">
            <label for="newsletter-subscribe" class="sr-only">
                <?= $escaper->escapeHtml(__('Email Address')) ?>
            </label>
            <input
                name="email"
                type="email"
                required
                id="newsletter-subscribe"
                class="form-input inline-flex w-full"
                placeholder="<?= $escaper->escapeHtmlAttr(__('Enter your email address')) ?>"
                autocomplete="email"
                aria-describedby="footer-newsletter-heading"
            >
            <?= $block->getBlockHtml('formkey') ?>
            <?= $recaptcha ? $recaptcha->getInputHtml(ReCaptcha::RECAPTCHA_FORM_ID_NEWSLETTER) : '' ?>
            <button class="inline-flex shrink-0 ml-auto xl:mt-0 btn btn-primary">
                <?= $escaper->escapeHtml(__('Subscribe')) ?>
            </button>
        </div>
        <div>
            <template x-if="displayErrorMessage">
                <p class="flex items-center text-red">
                    <span class="inline-block w-8 h-8 mr-3">
                        <?= $heroicons->exclamationCircleHtml('', 24, 24, ['aria-hidden' => true]); ?>
                    </span>
                    <template x-for="errorMessage in errorMessages">
                        <span x-html="errorMessage"></span>
                    </template>
                </p>
            </template>
        </div>
    </form>
    <div class="w-full">
        <?= $recaptcha ? $recaptcha->getLegalNoticeHtml(ReCaptcha::RECAPTCHA_FORM_ID_NEWSLETTER) : '' ?>
    </div>
    <script>
        function initNewsletterForm() {
            return {
                errors: 0,
                hasCaptchaToken: 0,
                displayErrorMessage: false,
                errorMessages: [],
                setErrorMessages(messages) {
                    this.errorMessages = [messages]
                    this.displayErrorMessage = this.errorMessages.length
                },
                submitForm() {
                    // Do not rename $form, the variable is expected to be declared in the recaptcha output
                    const $form = document.querySelector('#newsletter-validate-detail');
                    <?= $recaptcha ? $recaptcha->getValidationJsHtml(ReCaptcha::RECAPTCHA_FORM_ID_NEWSLETTER) : '' ?>

                    if (this.errors === 0) {
                        $form.submit();
                    }
                }
            }
        }

        window.addEventListener('alpine:init', () => Alpine.data('initNewsletterForm', initNewsletterForm), {once: true})
    </script>
    <?php $hyvaCsp->registerInlineScript() ?>
</div>