<template>
    <form class="phone">
        <h1>{{ $t("enterYourPhoneNumber") }}</h1>
        <div>
            <InputText v-bind="field.props" v-model="form.number" />
            <label for="phone"> {{ $t("phoneNumber") }} </label>
        </div>
        <Button v-bind="btn.props" @click="send()" />
    </form>
</template>

<script setup>
import init from "../../initialize/auth/phone";
const { field, btn } = init();

const store = useOtpCodeStore();
const router = useRouter()
const route = useRoute()
const form = reactive({ number: store.number });

const { toast, t } = inject('service')

const send = async () => {
    btn.props.loading = true;
    let result = {}
    const body = Object.assign({}, form);

    if (route.path.includes('register'))
        result = await store.withoutToken(body)
    else if (route.path.includes('restore'))
        result = await store.forgotPassword(body
    )
    const { status, data, error } = result;
    btn.props.loading = false;

    if (status.value == "success")
        router.push({ query: { step: 1 } });
    else {
        let detail = error.value.data.msg
        if (error.value.statusCode == 422)
            detail = Object.values(error.value.data).join('\n')

        toast.add({ life: 3000, severity: 'error', summary: t('error'), detail })
    }
}
</script>

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

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

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

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