<template>
  <div class="w-[75vw] md:w-[25.573vw] text-secondaryTextColor space-y-6 relative">
  
    <p class="text-[6vw] md:text-[1.502vw] border-b px-[0.5vw]">ورود</p>
    <div class="relative flex flexBox w-full pt-[1vw]">
      <input
        v-model="phone"
        type="text"
        class="loginInput"
        placeholder="شماره موبایل خود را وارد کنید"
      />
      <svg
        class="h-[5vw] w-[5vw] md:h-[1.146vw] md:w-[1.146vw] absolute left-[1.2vw]"
        viewBox="0 0 22 22"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M11.1464 9.96418C11.0547 9.95501 10.9447 9.95501 10.8439 9.96418C8.66219 9.89084 6.92969 8.10334 6.92969 5.90334C6.92969 3.65751 8.74469 1.83334 10.9997 1.83334C13.2455 1.83334 15.0697 3.65751 15.0697 5.90334C15.0605 8.10334 13.328 9.89084 11.1464 9.96418Z"
          stroke="#878787"
          stroke-width="1.5"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
        <path
          d="M6.56414 13.3467C4.34581 14.8317 4.34581 17.2517 6.56414 18.7275C9.08497 20.4142 13.2191 20.4142 15.74 18.7275C17.9583 17.2425 17.9583 14.8225 15.74 13.3467C13.2283 11.6692 9.09414 11.6692 6.56414 13.3467Z"
          stroke="#878787"
          stroke-width="1.5"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
      </svg>
    </div>

    <button class="greenButton  h-[13.59vw] md:h-[2.917vw] text-[3.59vw] md:text-[0.833vw] rounded-[2.051vw] md:rounded-auto w-full !mt-[8vw] md:!mt-[1.5vw] relative" @click="login">
      <span class="loader 
      h-[7vw] w-[7vw] left-[35vw] top-[3vw]
      md:h-[1.5vw] md:w-[1.5vw] md:left-[12vw] md:top-[0.65vw]
      absolute" v-if="loading"></span>
      <span v-else>دریافت کد ورود</span>
      
    </button>
    <div class="backdrop-blur-sm bg-white/30 md:p-[1vw] rounded-[2.051vw]  md:rounded-[0.5vw] text-red-400 text-[3vw] md:text-[0.7vw] absolute w-full p-[3vw] md:-top-[10vw]" v-for="(error,index) in errors" :key="index">
      <span>* {{error}}</span>
    </div>
  </div>
</template>

<script setup>
import { useToast } from 'vue-toastification'
const toast = useToast()
const phone = ref(null);
const errors = ref([]);
const loading = ref(false);
const FormStatus = useState("showCheckOtpForm");
async function login() {
     if (phone.value == null) {
     return toast.error("شماره موبایل الزامی است")
        // errors.value = []
        // return errors.value.push("شماره موبایل الزامی است")
    }

    const pattern = /^(\+98|0)?9\d{9}$/;

    if (!pattern.test(phone.value)) {
     return toast.error("فرمت شماره موبایل معتبر نیست")
      // errors.value = []
      //  return errors.value.push("فرمت شماره موبایل معتبر نیست")
    };

  try {
    loading.value = true;
    errors.value = [];
    const data = await $fetch("/api/auth/login", {
      method: "POST",
      body: {
        phone: phone.value,
        type: "1",
      },
    });
    if (data.message === 'کد با موفقیت ارسال شد') {
      toast.success('کد ورود برای شما ارسال شد')
      const phoneNumber = useState('phoneNumber', () => phone.value)
      FormStatus.value = true;
    }
    loading.value = false;
  } catch (error) {
  loading.value = false;
  return toast.error("عملیات ناموفق، لطفا کمی بعد تلاش کنید")
  // return errors.value.push(error.data.data.error)
  }
}
</script>


<style scoped>

.loader {
  border: 0.2vw solid #fff;
  border-bottom-color: transparent;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>