<template>
    <form class="password">
        <h1>{{ $t("chooseStrongPassword") }}</h1>
        <ul>
            <li v-for="(item, key) in fields" :key="key">
                <Password v-model="form[key]" v-bind="item.props" :inputId="key" />
                <label :for="key">{{ $t(key) }}</label>
            </li>
        </ul>
        <Button v-bind="btn.props" @click="next()" />
    </form>
</template>

<script setup>
import init from "../../initialize/auth/password";
const { fields, btn } = init();
const { t, toast } = inject('service')

const router = useRouter();
const route = useRoute();
const form = reactive({ password: '', repassword: null });
const store = useUserStore();
const otpCode = useOtpCodeStore()

const next = async () => {
    if (form.password.length < 8) {
        toast.add({ severity: "error", summary: t("error"), detail: t('passwordMin8'), life: 3000 });
    } else if (form.password != form.repassword) {
        toast.add({ severity: "error", summary: t("error"), detail: t('passwordNotSame'), life: 3000 });
    } else {
        if (route.path.includes('register')) {
            store.profile.password = form.password
            router.push({ query: { step: 3 } });
        } else if (route.path.includes('restore')) {
            btn.props.loading = true
            const body = Object.assign({}, form)
            body.phoneNumber = otpCode.number
            body.otp = otpCode.code
            delete body.repassword
            const { status, error } = await store.forgetPassword(body);
            if (status.value == "success") {
                toast.add({ severity: "success", summary: t("success"), detail: t('updatePasswordSuccessfull'), life: 3000 });
                router.replace('/auth/login');

            }
            else {
                let detail = error.value.data.msg
                toast.add({ severity: "error", summary: t("error"), detail, life: 3000 });
            }
            btn.props.loading = false

        }

    }


}
</script>

<style lang="scss">
.auth .password {
    @apply flex flex-col m-auto gap-[1.9rem] lg:gap-[3.2rem];

    &>h1 {
        @apply w-full text-[#CCCCCC] font-black font-vazir text-right leading-[3rem] whitespace-nowrap;
        @apply text-xl lg:text-3xl;
    }

    ul {
        @apply flex flex-col gap-6 lg:mb-7;

        li {
            @apply w-full h-14 relative;

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

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

                svg {
                    @apply text-[#CCCCCC] w-5 h-5 -mt-2.5;
                }
            }

            &: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 {
        @apply w-full h-11 mt-1.5 lg:h-14 #{!important};

        .p-button-label {
            @apply text-sm font-medium font-iran-sans;
        }
    }
}
</style>
