<template>
  <div class="w-[25.573vw] text-secondaryTextColor space-y-6 relative">
  
    <p class="text-[1.502vw] border-b px-[0.5vw]">کد ورود</p>
    <div class="relative flex flexBox w-full pt-[1vw]">
      <input
        v-model="code"
        type="text"
        class="loginInput"
        placeholder="کد ورود را وارد کنید"
      />
      <svg
        class="h-[1.146vw] 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 w-full !mt-[1.5vw] relative" @click="checkOtp">
      <span class="loader absolute" v-if="loading"></span>
      <span v-else>ورود</span>
      
    </button>
    <div class="backdrop-blur-sm bg-white/30 p-[1vw] rounded-[0.5vw] text-red-400 text-[0.7vw] absolute w-full" v-for="(error,index) in errors" :key="index">
      <span>* {{error}}</span>
    </div>
  </div>
</template>

<script setup>
const {authUser} = useAuth();
const code = ref(null);
const errors = ref([]);
const loading = ref(false);
const phoneNumber = useState("phoneNumber");
async function checkOtp() {
     if (code.value == null) {
        errors.value = []
        return errors.value.push("وارد کردن کد ورود الزامی است")
    }
  try {
    loading.value = true;
    errors.value = [];
    const data = await $fetch("/api/auth/login-step-two", {
      method: "POST",
      body: {
        phone: phoneNumber.value,
        code: 1234,
      }, 
    });
    if (data.status === 'Active') {
     authUser.value = data;
     navigateTo('/')
   }
    loading.value = false;
  } catch (error) {
    console.log('client err :', error);
  loading.value = false;
  return errors.value.push(error.data.data.error)
  }
}
</script>


<style scoped>
.loader {
  top: 0.65vw;
  left: 12vw;
  width: 1.5vw;
  height: 1.5vw;
  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>