<script setup lang="ts">
import * as z from "zod";
import type { FormSubmitEvent } from "@nuxt/ui";
import hadithaApi from "../../../apis/hadithaApi";
import { useAuthStore } from "~/stores/authStore";
import { useTemplateRef, ref } from "vue";

useHead({
  title: `${
    import.meta.env.VITE_HADITH_PAGE_TITLE
  } | وارد کردن شماره تلفن همراه`,
  meta: [
    { name: "description", content: "کاوش با هوش مصنوعی در احادیث اسلامی" },
  ],
  bodyAttrs: {
    class: import.meta.env.VITE_HADITH_SYSTEM,
  },
});

const router = useRouter();
const authStore = useAuthStore();
const loading = ref(false);
const pinInputRef = ref(null);

// const localizedErrors = {
//   required: "Invalid email address",
//   // Add more error codes and translations as needed
// };

const schema = z.object({
  verifyCode: z.string().array(), // string[]
});

type Schema = z.output<typeof schema>;

const state = reactive<Partial<Schema>>({
  verifyCode: [] as string[],
});

const toast = useToast();
async function onSubmit(event: FormSubmitEvent<Schema>) {
  const payoload = {
    username: "m.rezae",
    password: "1234",
    // captcha: "",
  };

  console.info("verify code");
  // .loginAsGuest()
  authStore
    .login(payoload)
    .then((res) => {
      loading.value = false;
      // check if search term is not empty

      toast.add({
        title: "Success",
        description: res.data.message,
        color: "success",
      });

      navigateTo({
        name: "haditha",
      });
    })
    .catch((err) => {
      console.info(err);
    })
    .finally(() => {
      loading.value = false;
    });
}
onMounted(() => {
  // console.info(pinInputRef.value);
  // if (pinInputRef.value) {
  // pinInputRef.value.focus(); // Or whatever focus method your PinInput component provides
  // }
});
</script>

<template>
  <p class="description">کد پیامک شده را وارد کنید</p>
  <UForm
    :schema="schema"
    :state="state"
    class="space-y-4 w-full"
    @submit="onSubmit"
  >
    <UFormField
      dir="ltr"
      name="mobile"
      class="mb-6"
      :ui="{
        root: 'root',
        wrapper: 'wrapper',
        labelWrapper: 'labelWrapper',
        label: 'label',
        container: 'container',
        description: 'description',
        error: 'error',
        hint: 'hint',
        help: 'help',
      }"
    >
      <UPinInput
        dir="ltr"
        ref="pinInputRef"
        otp
        :length="4"
        highlight
        color="primary"
        variant="outline"
        v-model="state.verifyCode"
        :ui="{
          root: 'root-pin-input ltr w-full flex justify-between',
          base: 'base-pin-input',
        }"
      />
    </UFormField>
    <UButton
      class="submit-btn w-full flex justify-center"
      variant="solid"
      type="submit"
    >
      ثبت کد
    </UButton>
  </UForm>
</template>

<style scoped>
.haditha-login-page {
  background: #f7fffd;

  .page-container {
    .page-inner-container {
      margin: auto;
      /* max-width: 512px; */
      max-width: 300px;
      /* height: 125px; */
      gap: 24px;

      .title {
        margin-bottom: 1.2em;
        font-family: IRANSansX;
        font-weight: 400;
        font-size: 20px;
        line-height: 30px;
        letter-spacing: 0%;

        /* Fallback color */
        color: #4d00ff;

        /* Gradient background */
        background: linear-gradient(268.94deg, #d284ff -0.65%, #4d00ff 104.59%);

        /* Clip the background to the text */
        background-clip: text;
        -webkit-background-clip: text; /* For Safari */

        /* Make the text transparent */
        color: transparent;
        -webkit-text-fill-color: transparent; /* For Safari */
      }

      .description {
        font-family: IRANSansX;
        font-weight: 400;
        font-size: 14px;
        line-height: 21px;
        letter-spacing: 0%;
        color: #626b84;
        margin-bottom: 5em; /* 70px */
      }
    }
  }
}
</style>

<style>
.haditha-login-page {
  .page-container {
    .page-inner-container {
      .input-elem {
        input {
          width: 48;
          height: 53px;
          justify-content: space-between;
          border-radius: 12px;
          border-width: 0.3px;
          padding: 16px;
          background: #ffffff;
          border: 0.3px solid #d9d9d9;
          box-shadow: 0px 1px 4px 0px #0000000d;

          font-family: IRANSansX;
          font-weight: 400;
          font-size: 16px;
          line-height: 24px;
          letter-spacing: 0%;
          text-align: center;
          color: var(--ui-color-two);
        }
      }

      .submit-btn {
        width: 480;
        height: 48px;
        gap: 4px;
        padding-top: 9.1px;
        padding-right: 32px;
        padding-bottom: 9.1px;
        padding-left: 32px;
        border-radius: 12px;
        border-width: 0.3px;

        background: linear-gradient(102.02deg, #4be8ae 7.38%, #00a762 91.78%);
        border: 0.3px solid #d9d9d9;
        box-shadow: 0px 1px 4px 0px #0000000d;
      }

      .root-pin-input {
        direction: ltr;

        .base-pin-input {
          width: 56px;
          height: 53px;
          justify-content: space-between;
          border-radius: 12px;
          border-width: 0.3px;
          padding: 16px;

          border: 0.3px solid #d9d9d9;
          box-shadow: 0px 1px 4px 0px #0000000d;

          font-family: IRANSansX;
          font-weight: 400;
          font-size: 16px;
          line-height: 100%;
          letter-spacing: 0%;
          text-align: center;

          color: var(--ui-color-two);
        }
      }
    }
  }
}
</style>
