<?php
declare(strict_types=1);

use Hyva\Theme\Model\ViewModelRegistry;
use Hyva\Theme\ViewModel\Customer\LoginButton;
use Hyva\Theme\ViewModel\HeroiconsOutline;
use Hyva\Theme\ViewModel\HeroiconsSolid;
use Hyva\Theme\ViewModel\ReCaptcha;
use Magento\Customer\Block\Form\Login;
use Magento\Framework\Escaper;

/** @var Escaper $escaper */
/** @var Login $block */
/** @var LoginButton $loginButtonViewModel */
/** @var ViewModelRegistry $viewModels */
/** @var ReCaptcha $recaptcha */
/** @var HeroiconsOutline $heroiconsoutline */
/** @var HeroiconsSolid $heroiconssolid */

$heroiconsoutline = $viewModels->require(HeroiconsOutline::class);
$heroiconssolid = $viewModels->require(HeroiconsSolid::class);
$loginButtonViewModel = $viewModels->require(LoginButton::class);

// Disabling autocomplete on form fields is not recommended,
// Enable it in Stores->Configuration->Customers configuration->Password Options

// Do not replace this with $viewModels->require(ReCaptcha::class); that might break the dependency
// on the Magento_ReCaptchaCustomer module
$recaptcha = $block->getData('viewModelRecaptcha');

// Detect trackorder redirect via GET param
$request = $block->getRequest();
$isFromTrackOrder = (bool) $request->getParam('trackorder');
?>
<div class="bg-white p-4 xl:p-10">
    <div aria-labelledby="block-customer-login-heading">
        <form class="form form-login"
              action="<?= $escaper->escapeUrl($block->getPostActionUrl()) ?>"
              method="post"
              x-data="initCustomerLoginForm()"
              @submit.prevent="submitForm()"
              id="customer-login-form">
            <?= $block->getBlockHtml('formkey') ?>
            <fieldset class="fieldset login space-y-3 md:space-y-6">
                <legend>
                    <div class="text-2xl lg:text-4xl font-medium title-font text-primary-darker font-sen">
                        <?= $escaper->escapeHtml($isFromTrackOrder ? __('Sign in to Track Your Order') : __('Already a Customer?')) ?>
                    </div>
                </legend>
                <div class="text-black text-base font-sen">
                    <?= $escaper->escapeHtml($isFromTrackOrder ? __('Use your email and password to view your order.') : __('If you have an account, sign in with your email address.')) ?>
                </div>
                <div class="field email required">
                    <div class="control">
                        <input name="login[username]"
                               class="font-sen form-input w-full"
                               required
                               value="<?= $escaper->escapeHtmlAttr($block->getUsername()) ?>"
                               autocomplete="<?= $block->isAutocompleteDisabled() ? 'off' : 'username' ?>"
                               id="email"
                               type="email"
                               placeholder="Email"
                               title="<?= $escaper->escapeHtmlAttr(__('Email')) ?>"
                        />
                    </div>
                </div>
                <div class="field password required">
                    <div class="control flex items-center">
                        <div class="sr-only hidden" aria-live="polite">
                            <template x-if="!showPassword">
                                <span>
                                    <?= $escaper->escapeHtml(__('Password hidden')) ?>
                                </span>
                            </template>
                            <template x-if="showPassword">
                                <span>
                                    <?= $escaper->escapeHtml(__('Password shown')) ?>
                                </span>
                            </template>
                        </div>
                        <input name="login[password]"
                            class="font-sen form-input w-full"
                            required
                            :type="showPassword ? 'text' : 'password'"
                            autocomplete="<?= $block->isAutocompleteDisabled() ? 'off' : 'current-password' ?>"
                            id="pass"
                            placeholder="Password "
                            title="<?= $escaper->escapeHtmlAttr(__('Password')) ?>"
                        />
                        <button
                            type="button"
                            x-on:click="showPassword = !showPassword"
                            :aria-pressed="showPassword ? 'true' : 'false'"
                            class="px-4 py-3 hidden"
                            :aria-label="showPassword ? '<?= $escaper->escapeJs(__('Hide Password')) ?>' : '<?= $escaper->escapeJs(__('Show Password')) ?>'"
                        >
                            <template x-if="!showPassword">
                                <?= $heroiconssolid->eyeHtml('w-5 h-5'); ?>
                            </template>
                            <template x-if="showPassword">
                                <?= $heroiconssolid->eyeOffHtml('w-5 h-5'); ?>
                            </template>
                        </button>
                    </div>
                </div>

                <?= $recaptcha ? $recaptcha->getInputHtml(ReCaptcha::RECAPTCHA_FORM_ID_CUSTOMER_LOGIN) : '' ?>
                <?= $block->getChildHtml('form_additional_info') ?>
                <div class="actions-toolbar pt-6 pb-2">
                        <button type="submit" class="btn btn-primary bg-primary-darker font-sen" name="send"
                            <?php if ($loginButtonViewModel->disabled()): ?> disabled data-recaptcha-btn<?php endif; ?>
                        >
                            <span><?= $escaper->escapeHtml(__('Sign In')) ?></span>
                        </button>
                        <a class="underline text-primary-darker font-sen" href="<?= $escaper->escapeUrl(
                            $block->getForgotPasswordUrl()
                        ) ?>"><span><?= $escaper->escapeHtml(__('Forgot Your Password?')) ?></span>
                        </a>
                </div>
                <div>
                    <template x-if="displayErrorMessage">
                        <p class="text-red flex items-center">
                            <span class="inline-block w-8 h-8 mr-3">
                                <?= $heroiconsoutline->exclamationCircleHtml('', 24, 24, ['aria-hidden' => true]); ?>
                            </span>
                            <template x-for="errorMessage in errorMessages">
                                <span x-html="errorMessage"></span>
                            </template>
                        </p>
                    </template>
                </div>
            </fieldset>
        </form>
    </div>
    <div class="w-full">
        <?= $recaptcha ? $recaptcha->getLegalNoticeHtml(ReCaptcha::RECAPTCHA_FORM_ID_CUSTOMER_LOGIN) : '' ?>
    </div>
    <script>
        function initCustomerLoginForm() {
            return {
                errors: 0,
                hasCaptchaToken: 0,
                showPassword: false,
                displayErrorMessage: false,
                errorMessages: [],
                setErrorMessages(messages) {
                    this.errorMessages = [messages]
                    this.displayErrorMessage = this.errorMessages.length
                },
                submitForm() {
                    // do not rename $form, the variable is the expected name in the recaptcha output
                    const $form = document.querySelector('#customer-login-form');
                    <?= $recaptcha ? $recaptcha->getValidationJsHtml(ReCaptcha::RECAPTCHA_FORM_ID_CUSTOMER_LOGIN) : '' ?>

                    if (this.errors === 0) {
                        $form.submit();
                    }
                }
            }
        }
    </script>
</div>
