<template>
    <div class=" font-sins p-4">
        <div
            class="flex flex-row-reverse items-center justify-center font-medium gap-4 mb-5 mt-4 text-sm dark:text-white">
            <nuxt-link :to="useRuntimeConfig().public.router.Signup"
                class="text-[#0077FE] border-b-2 border-[#0077FE] pb-2">ثبت نام </nuxt-link>
            <nuxt-link :to="useRuntimeConfig().public.router.Login" class="pb-2">ورود</nuxt-link>
        </div>

        <div class="w-full flex flex-col items-center justify-center p-12">
            <div class="flex flex-col w-full  items-center justify-center">
                <form v-if="!massageIsSend" @submit.prevent="sendSingUpInformaiton()" class="flex flex-col w-full mt-2">
                    <div class="w-full text-right mt-2">
                        <label for="phoneNumber"
                            class="block mb-2 text-xs font-medium text-zinc-950 dark:text-white">شماره
                            تلفن</label>
                        <input type="text" id="phoneNumber" v-model="singUpInformaiton.phoneNumber"
                            placeholder="09123456789" required pattern="09[0-9]{9}" :maxlength="11"
                            class="bg-zinc-50 border border-zinc-300 text-zinc-950 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-1 dark:bg-zinc-700 dark:border-zinc-600 dark:placeholder-zinc-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
                    </div>
                    <div class="w-full text-right mt-2">
                        <label for="password" class="block mb-2 text-xs font-medium text-zinc-950 dark:text-white">رمز
                            عبور</label>
                        <input type="password" id="password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
                            title="بیش از ۸ شناسه و ترکیبی از عدد و حروف کوچک و بزرگ انگلیسی" minlength="8"
                            v-model="singUpInformaiton.password" required placeholder="********"
                            class="bg-zinc-50 border border-zinc-300 text-zinc-950 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-1 dark:bg-zinc-700 dark:border-zinc-600 dark:placeholder-zinc-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
                    </div>
                    <div class="w-full text-right mt-2">
                        <label for="rePassword"
                            class="block mb-2 text-xs font-medium text-zinc-950 dark:text-white">تکرار
                            رمز
                            عبور</label>
                        <input type="password" id="rePassword" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
                            title="بیش از ۸ شناسه و ترکیبی از عدد و حروف کوچک و بزرگ انگلیسی" minlength="8"
                            v-model="singUpInformaiton.rePassword" required placeholder="********"
                            class="bg-zinc-50 border border-zinc-300 text-zinc-950 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-1 dark:bg-zinc-700 dark:border-zinc-600 dark:placeholder-zinc-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
                    </div>
                    <div class="text-xs  w-full  flex-row-reverse gap-2 items-center justify-center hidden ">
                        <div>
                            حساب کاربری دارید؟
                        </div>

                        <nuxt-link :to="useRuntimeConfig().public.router.Login" class="text-[#0077FE] ">وارد
                            شوید</nuxt-link>
                    </div>
                    <button type="submit" v-if="!isLoadSendInformation"
                        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="text-right pr-2 font-medium my-4">
                        <label for="massageCode" class=" block mb-2 text-xs font-medium text-zinc-950 dark:text-white">کد پیامک شده</label>
                    </div>
                    <input type="text" id="massageCode" minlength="7" maxlength="7"
                        v-model="singUpInformaiton.massageCode" required placeholder="*******"
                        class="bg-zinc-50 border border-zinc-300 text-zinc-950 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-1 dark:bg-zinc-700 dark:border-zinc-600 dark:placeholder-zinc-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
                    <div class="w-full h-14 flex flex-row-reverse items-center justify-center gap-4">
                        <div>
                            کد براتون نیومده؟
                        </div>
                        <div
                            class="border-[#0077FE] w-32 border rounded-lg text-[#0077FE] px-4 py-2 text-sm  font-bold text-center">
                            ارسال مجدد
                        </div>
                        <div
                            class="border-[#0077FE] w-32 border rounded-lg text-[#0077FE] px-4 py-2 text-sm  font-bold text-center">
                            تغییر شماره
                        </div>
                    </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>
        </div>
    </div>
</template>


<script setup>
import axios from 'axios';
import { useMaghaleStore } from '~/store';

const store = useMaghaleStore()
const { $CustomAlert } = useNuxtApp();

var massageIsSend = ref(false)
var singUpInformaiton = ref({})
var isLoadSendInformation = ref(false)

function sendSingUpInformaiton() {
    if (singUpInformaiton.value.password != singUpInformaiton.value.rePassword) {
        $CustomAlert('گذرواژه‌ها یکسان نیستند', 6)
        return;
    }
    if (isLoadSendInformation.value) {
        return;
    }
    isLoadSendInformation.value = true
    axios
        .post(`${useRuntimeConfig().public.BaseUrl}users/GenerateOTP`, { phone_number: singUpInformaiton.value.phoneNumber, password: singUpInformaiton.value.password })
        .then((r) => {
            isLoadSendInformation.value = false
            massageIsSend.value = true
            singUpInformaiton.value.massageId = r.data.id
            numberOfMissingOtpCode.value = r.data.wrong_attempts
            $CustomAlert('کد به تلفن همراه شما ارسال شد', 4)
        })
        .catch((catchResponse) => {
            if (catchResponse.response.status == 403) {
                $CustomAlert('کاربری با این شماره در سایت وجود دارد', 6)
                isLoadSendInformation.value = false
            }
        })
}

var isLoadVerifyMassageCode = ref(false)

var numberOfMissingOtpCode = ref(1)

function verifyMassageCode() {
    if (isLoadVerifyMassageCode.value) {
        return;
    }
    isLoadVerifyMassageCode.value = true
    axios
        .post(`${useRuntimeConfig().public.BaseUrl}users/ConfirmOTP`, { id: singUpInformaiton.value.massageId, otp: singUpInformaiton.value.massageCode })
        .then((r) => {
            if (r.status == 200) {
                localStorage.removeItem('image')
                store.setToken('Token ' + r.data)
                $CustomAlert('به گلچین خوش آمدید', 4)
                useRouter().push(useRuntimeConfig().public.router.Information)
            }
        })
        .catch((r) => {
            if (r.response.status == 406) {
                isLoadVerifyMassageCode.value = false
                numberOfMissingOtpCode.value++
                if (numberOfMissingOtpCode.value == 4) {
                    numberOfMissingOtpCode.value = 1
                    $CustomAlert('ramz jadid braye shoma frestade mishavad', 6)
                    return;
                }
                $CustomAlert('na drost', 6)
            }
        })
}
</script>