<template>
  <Card
    v-if="!changeForm"
    class="m-auto w-96"
    :pt="{
      title: 'text-center pt-4',
      content: 'flex flex-col gap-9 pt-8 h-30',
    }"
  >
    <template #title> {{ $t("login") }} </template>
    <template #content>
      <div class="flex flex-col gap-1">
        <FloatLabel>
          <InputText
          oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
          maxlength = "11"
            type="number"  v-model="number" class="w-full ltr" />
          <label>{{ $t("phoneNumber") }}</label>
        </FloatLabel>
        
        <small v-if="errors.length > 0">{{ errors }}</small>
      </div>
    </template>
    <template #footer>
      <Button
        :label="$t('sendOtp')"
        class="w-full"
        :loading="loading"
        @click="login()"
      />
    </template>
  </Card>

  <Card
    v-else
    class="m-auto w-96"
    :pt="{
      title: 'text-center pt-4',
      content: 'flex flex-col gap-9 pt-8 h-30',
    }"
  >
    <template #title> {{ $t("otp") }} </template>
    <template #content>
      <div class="flex flex-col gap-1">
        <FloatLabel>
          <InputText type="number" v-model="code" class="w-full ltr" />
          <label>{{ $t("otp") }}</label>
        </FloatLabel>
        <small v-if="errors.length > 0">{{ errors }}</small>
      </div>
    </template>
    <template #footer>
      <Button
        :label="$t('login')"
        class="w-full"
        :loading="loading"
        @click="checkOtp()"
      />
    </template>
  </Card>
</template>
<script setup>
import { inject, ref, watch } from "vue";
import { useAdminsStore } from "@/stores/admins";
import { useRouter } from "vue-router";
const { toast, t } = inject("service");
const loading = ref(false);
const changeForm = ref(false);
const store = useAdminsStore();
const errors = ref({});
const emptyError = ref(false)
const number = ref(null);
const maxlength = ref(2)
const code = ref(1234);
const router = useRouter();
const pattern = /^(\+98|0)?9\d{9}$/;
const login = async () => {
  if (number.value === null || number.value === '') {
    return toast.add({
        severity: "error",
        life: 2000,
        detail: t("شماره موبایل را وارد کنید"),
        summary: t("error"),
      });
  }
if (!pattern.test(number.value)) {
 return toast.add({
        severity: "error",
        life: 2000,
        detail: t("شماره موبایل را صحیح وارد کنید"),
        summary: t("error"),
      });
};

  loading.value = true;

  try {
    const { status, data } = await store.login(number);
    if (status === 200) {
    changeForm.value = true;
    toast.add({
      severity: "success",
      life: 2000,
      detail: t("sendOtpSuccessfully"),
      summary: t("successful"),
      closable: false,
    });
  loading.value = false;
  }else{
  loading.value = false;
    return toast.add({
        severity: "error",
        life: 2000,
        detail: t("خطایی رخ داد، لطفا مجدد تلاش کنید"),
        summary: t("error"),
      });

  }    
  } catch (error) {
    loading.value = false;
    return toast.add({
        severity: "error",
        life: 2000,
        detail: error.response.data.error,
        summary: t("error"),
      });
  
    
  }
  

};
const checkOtp = async () => {

  
  loading.value = true;
  try {
    const {data, status} = await store.sendOtp(number, code);
    if (status === 200) {
    if (data.roles[0] === "Admin" || data.roles[1] === "Admin" || data.roles[2] === "Admin") {
      toast.add({
        severity: "success",
        life: 2000,
        detail: t("loginSuccessfully"),
        summary: t("successful"),
        closable: false,
      });
      loading.value = false;
      setTimeout(() => router.push("/"), 300);
    } else {
      loading.value = false
      return toast.add({
        severity: "error",
        life: 2000,
        detail: t("شماره مجوز ورود ندارید !"),
        summary: t("error"),
      });
    }
  }
  } catch (error) {
    loading.value = false;
    return toast.add({
        severity: "error",
        life: 2000,
        detail: error.response.data.error,
        summary: t("error"),
      });
  
  }
};


</script>