<template>
    <div class="p-4">
        <form @submit.prevent="sendPhoneNumber()" class="mt-40">
            <div class="mt-2">
                <label for="phoneNumber" class="block mb-2 text-xs font-medium text-cyen-950 dark:text-white">شماره
                    تلفن
                    همراه</label>
                <input type="text" id="phoneNumber" v-model="resetPasswordContent.phoneNumber" :disabled="massageIsSend"
                    class="bg-cyen-50 border border-cyen-300 text-cyen-950 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-1 dark:bg-cyen-700 dark:border-cyen-600 dark:placeholder-cyen-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                    placeholder="09123456789" required pattern="09[0-9]{9}">
            </div>
            <button type="submit" v-if="!isLoadSendPhoneNumber"
                class="w-full mt-4 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg px-3 py-1.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">دریافت
                کد</button>
        </form>
        <form v-if="massageIsSend" @submit.prevent="verifyMassageCode()">
            <div class="mt-2">
                <label for="massageCode" class="block mb-2 text-xs font-medium text-cyen-950 dark:text-white">کد ارسال
                    شده</label>
                <input type="text" id="massageCode" minlength="7" maxlength="7"
                    v-model="resetPasswordContent.massageCode"
                    class="bg-cyen-50 border border-cyen-300 text-cyen-950 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-1 dark:bg-cyen-700 dark:border-cyen-600 dark:placeholder-cyen-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                    required placeholder="6666666">
            </div>
            <div class="mt-2">
                <label for="password" class="block mb-2 text-xs font-medium text-cyen-950 dark:text-white">گذرواژه
                    جدید</label>
                <input type="password" id="password" minlength="8" v-model="resetPasswordContent.password" required
                    class="bg-cyen-50 border border-cyen-300 text-cyen-950 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-1 dark:bg-cyen-700 dark:border-cyen-600 dark:placeholder-cyen-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                    placeholder="********">
            </div>
            <div class="mt-2">
                <label for="rePassword" class="block mb-2 text-xs font-medium text-cyen-950 dark:text-white">تکرار
                    گذرواژه</label>
                <input type="password" id="rePassword" minlength="8" v-model="resetPasswordContent.rePassword" required
                    class="bg-cyen-50 border border-cyen-300 text-cyen-950 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-1 dark:bg-cyen-700 dark:border-cyen-600 dark:placeholder-cyen-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                    placeholder="********">
            </div>
            <button type="button" @click="massageIsSend = false">
                phone number
            </button>
            <!-- <button type="button" @click="reSendPassword()" v-if="!timer && !isLoadReSendMassage">
                reSend
            </button>
            <div v-else-if="isLoadReSendMassage">
                sabr
            </div>
            <div v-else>
                {{ timer }}
            </div> -->
            <button type="submit" v-if="!isLoadVerifyMassageCode"
            class="w-full mt-4 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg px-3 py-1.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
            >ثبت</button>
        </form>
    </div>
</template>


<script setup>
import axios from 'axios';

const { $CustomAlert } = useNuxtApp();

var massageIsSend = ref(false)

var resetPasswordContent = ref({})

var isLoadSendPhoneNumber = ref(false)

// var isLoadReSendMassage = ref(false)

// var timer = ref(0)

function sendPhoneNumber() {
    if (isLoadSendPhoneNumber.value) {
        return;
    }
    isLoadSendPhoneNumber.value = true
    axios
        .post(`${useRuntimeConfig().public.BaseUrl}users/ResetPasswordToken`, { phone: resetPasswordContent.value.phoneNumber })
        .then((r) => {
            massageIsSend.value = true
            isLoadSendPhoneNumber.value = false
            resetPasswordContent.value.massageId = r.data.id
            numberOfMissingOtpCode.value = r.data.wrong_attempts
            $CustomAlert('پیام فرستاده شد', 4)
        })
        .catch((r) => {
            if (r.response.status == 400) {
                isLoadSendPhoneNumber.value = false
                $CustomAlert('کاربری با این شماره تلفن در سایت وجود دارد', 6)
            }
        })
}

var isLoadVerifyMassageCode = ref(false)

var numberOfMissingOtpCode = ref(1)

function verifyMassageCode() {
    if (resetPasswordContent.value.password != resetPasswordContent.value.rePassword) {
        $CustomAlert('گذرواژه‌ها یکسان نیستند', 6)
        return;
    }
    if (isLoadVerifyMassageCode.value) {
        return;
    }
    isLoadVerifyMassageCode.value = true
    axios
        .post(`${useRuntimeConfig().public.BaseUrl}users/ResetPassword`, {
            id: resetPasswordContent.value.massageId, otp: resetPasswordContent.value.massageCode
            , password: resetPasswordContent.value.password
        })
        .then((r) => {
            if (r.status == 200) {
                $CustomAlert('موفق', 4)
                useRouter().push(useRuntimeConfig().public.router.Login)
            }
        })
        .catch((r) => {
            if (r.response.status == 406) {
                isLoadVerifyMassageCode.value = false
                numberOfMissingOtpCode.value++
                if (numberOfMissingOtpCode.value == 4) {
                    numberOfMissingOtpCode.value = 1
                    $CustomAlert('کد جدید برای شما فرستاده میشود', 6)
                    return;
                }
                $CustomAlert('ناموفق', 6)
            }
        })
}

// function reSendPassword() {
//     if (isLoadReSendMassage.value && !timer) {
//         return;
//     }
//     isLoadReSendMassage.value = true
//     axios
//         .post(`${useRuntimeConfig().public.BaseUrl}users/ResendRPC`, {
//             id: resetPasswordContent.value.massageId, otp: resetPasswordContent.value.massageCode
//             , password: resetPasswordContent.value.password
//         })
//         .then((r) => {
//             isLoadReSendMassage.value = true;
//             timer.value = 60;
//             setTimeout(setTimerMassage(), 1000);
//         })
// }

// function setTimerMassage() {
//     timer.value -= 1
//     if (!timer.value) {
//         setTimeout(setTimerMassage(), 1000);
//     }
// }
</script>