<template>
    <div class="font-sins w-full flex items-center justify-center mt-4 p-12">
        <p>{{ wrong }}</p>
        <form @submit.prevent="Login()" class="w-full items-center ">
            <div class="w-full text-right ">
                <label for="phoneNumber" class="block mb-2  text-xs font-medium text-zinc-950 dark:text-white">شماره تلفن</label>
                <input dir="ltr" type="text" v-model="userInformation.phoneNumber" id="phoneNumber" placeholder="0912..." required
                    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 dir="ltr" type="password" v-model="userInformation.password" id="password" placeholder="********" required
                    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="flex mt-2 justify-start text-xs font-medium text-zinc-950 dark:text-white">
                <span class="ml-1">
                    <nuxt-link :to="useRuntimeConfig().public.router.Forgot" class="text-[#0077FE] ">رمز عبور</nuxt-link>
                </span>
                خود را فراموش کرده اید؟
            </div>
            <button type="submit"
                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">

                <p v-if="!isLoad" class="text-sm">
                    ورود 
                </p>
                <div v-else>
                    انتظار
                </div>
            </button>
            <div class="flex mt-2 justify-start text-xs font-medium text-zinc-950 dark:text-white">
                حساب کاربری ندارید؟
                <nuxt-link :to="useRuntimeConfig().public.router.Signup" class="text-[#0077FE] mr-1">ثبت نام کنید</nuxt-link>
            </div>
        </form>
    </div>
</template>


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

const store = useMaghaleStore()
var isLoad = ref(false);
var userInformation = {}
var wrong = ref('')

const props = defineProps({
    destination: {
        type: Boolean,
        default: false
    }
})

async function Login() {
    isLoad.value = true;
    await axios
        .post(`${useRuntimeConfig().public.BaseUrl}maghale/login`, { username: userInformation.phoneNumber, password: userInformation.password })
        .then((r) => {
            store.setMe(r.data)
            store.setToken('Token ' + r.data.token)
            axios.defaults.headers.common.Authorization = 'Token ' + r.data.token
            if (props.destination) {
                useRouter().go(useRouter().currentRoute)
            }
            useRouter().push('/')
            isLoad.value = false
            userInformation.phoneNumber = ''
            userInformation.password = ''
            wrong.value = 'یا موفقیت'
        })
        .catch((response) => {
            isLoad.value = false
            if (response.status == 404) {
                wrong.value = 'نام کاربری یا رمز عبور نادرست است'
            }
        })
}
</script>