<template>
    <dialog class="pamel-password-restore">
        <Button v-bind="closeBtn.props" @click="$emit('close')" />
        <h2>
            <i class="isax isax-shield-search"></i>
            <span>{{ $t("passwordRecovery") }}</span>
        </h2>
        <p>
            {{ $t("recoverPasswordByEmailOrMobile") }} <br />
            {{ $t("pleaseSelectMethod") }}
        </p>
        <SelectButton v-model="way" :options="ways">
            <template #option="{ option }">
                <span>{{ $t(option.replace("number", "sms")) }}</span>
            </template>
        </SelectButton>
        <div>
            <InputText v-model="form[way]" id="input" placeholder />
            <label for="input">{{ $t(labels[way]) }}</label>
        </div>
        <Button v-bind="recoveryBtn.props" @click="events.recovery()" />
    </dialog>
</template>

<script setup>
import init from "../../../../initialize/panelPasswordRestore";
const { closeBtn, ways, labels, fields, recoveryBtn } = init();
const emit = defineEmits(["dialog"]);
const way = ref("email");
const form = reactive({});
const validator = useValidator();
const optCode = useOtpCodeStore();
const events = reactive({
    recovery: async () => {
        if (validator.isValid(fields, form)) {
            const { status } = await optCode.send(way.value, form);
            if (status == "success") emit("dialog", "PanelOTPCodeEnter");
        }
    },
});
</script>

<style lang="scss">
.pamel-password-restore {
    @apply w-full lg:w-[47.9rem] lg:h-[31.2rem] bg-white rounded-t-2xl lg:rounded-2xl flex flex-col items-center p-6 lg:p-8 relative;

    &::after {
        @apply content-['_'] absolute inset-x-0 bottom-[4.5rem] h-3 shadow-[0px_-2px_5px_#0000000a] lg:shadow-none;
    }

    & > button:nth-of-type(1) {
        @apply self-end -mt-2 -ml-2;

        .p-button-icon {
            @apply text-sm text-[#333333] before:content-['\e90b'];
            @apply lg:text-[2em] lg:text-[#b2b2b29b] lg:before:content-['\e90c'];
        }
    }

    & > h2 {
        @apply flex items-center gap-4 -mt-12 lg:mt-0.5 max-lg:self-start;

        i {
            @apply max-lg:hidden text-[2em];
        }

        span {
            @apply text-[#333333] text-sm lg:text-xl font-bold font-vazir leading-[2.8rem];
        }
    }

    & > p {
        @apply self-start w-[18.1rem] text-[#B2B2B2] text-[0.7em] font-vazir mb-5;
        @apply lg:w-[23.2rem] lg:text-base lg:mt-2 lg:mb-0 lg:leading-snug lg:self-center lg:text-center;
    }

    & > div:nth-of-type(1) {
        @apply w-[21.4rem] lg:w-[23.3rem] h-[3.4rem] rounded-lg border border-[#E5E5E5] mt-1.5 flex items-center p-1 gap-1;

        & > div {
            @apply flex justify-center items-center p-0 text-sm lg:text-base;
            @apply w-[11.4rem] h-[2.9rem] rounded-[0.4rem] border-none text-neutral-400 hover:text-neutral-400;

            &.p-highlight {
                @apply bg-neutral-200 text-zinc-800 hover:bg-neutral-200 hover:text-zinc-800;
            }
        }
    }

    & > div:nth-of-type(2) {
        @apply w-[21.4rem] lg:w-[23.3rem] h-[3.4rem] lg:h-14 relative mt-[1.9rem] lg:mt-10;

        label {
            @apply w-max absolute right-3 top-4 px-1 bg-white transition-['top'] pointer-events-none;
            @apply text-neutral-400 text-sm lg:text-base font-medium font-vazir cursor-text;
        }

        input {
            @apply w-full rounded-[0.6rem] border shadow-none border-[#CCCCCC] text-zinc-800 font-vazir;
        }

        &:has(input:focus),
        &:has(input:not(:placeholder-shown)) {
            label {
                @apply -top-2 h-4;
                @apply text-zinc-800 text-xs font-normal font-vazir;
            }
        }
    }

    & > button:nth-of-type(2) {
        @apply w-[21.4rem] lg:w-[23.3rem] h-12 lg:h-14 mt-8 lg:mt-6;

        .p-button-label {
            @apply font-bold font-vazir leading-tight text-sm lg:text-base;
        }
    }
}
</style>
