<script lang='ts' setup>
import type { AuthUserSignup } from "../type";
import { toastController } from "@ionic/vue";
import { logoGoogle, phonePortraitOutline } from "ionicons/icons";
import { emailPattern } from "@/utils";
import { authClient } from "..";

const form = ref<AuthUserSignup>({
  email: "",
  password: "",
  confirmPassword: "",
  verificationCode: "",
});
const step = ref(1);

function onEmailBlur() {
  const isEmailValid = emailPattern.test(form.value.email);
  if (!isEmailValid) {
    toastController
      .create({
        message: "Please enter a valid email address.",
        duration: 1500,
        position: "bottom",
      })
      .then((toast) => {
        toast.present();
      });
  }
}
async function submitSendVerification() {
  const isEmailValid = emailPattern.test(form.value.email);
  if (!isEmailValid) {
    const toast = await toastController.create({
      message: "Please enter a valid email address.",
      duration: 1500,
      position: "bottom",
    });

    await toast.present();
    return;
  }

  const { data, error } = await authClient.emailOtp.sendVerificationOtp({
    email: form.value.email, // required
    type: "sign-in", // required
  });
  if (data?.success) {
    step.value = 2;
  }
  else {
    const toast = await toastController.create({
      message: error?.message || "Failed to send verification code.",
      duration: 1500,
      position: "bottom",
    });

    await toast.present();
  }
}

function reset() {
  step.value = 1;
  form.value.email = "";
  form.value.password = "";
  form.value.confirmPassword = "";
  form.value.verificationCode = "";
}

async function submitSignup() {
  const { data, error } = await authClient.signIn.emailOtp({
    email: form.value.email,
    otp: form.value.verificationCode,
  });
  if (data?.token) {
    reset();
    step.value = 1;
    const toast = await toastController.create({
      message: "Email verified successfully!",
      duration: 1500,
      position: "bottom",
    });

    await toast.present();
  }
  else {
    const toast = await toastController.create({
      message: error?.message || "Failed to verify the code.",
      duration: 1500,
      position: "bottom",
    });

    await toast.present();
  }
}
</script>

<template>
  <div v-if="step === 1">
    <h1><strong>What's your email?</strong></h1>
    <p>You'll use this email to login and access everything we have to offer.</p>

    <div>
      <ui-input v-model="form.email" type="email" placeholder="Enter your email address" @ion-blur="onEmailBlur" />

      <ion-button expand="block" class="ion-margin-top" shape="round" @click="submitSendVerification">
        Sign up
      </ion-button>

      <ui-divider text="Or continue with" />

      <ion-button color="medium" expand="block" class="ion-margin-top" shape="round">
        <IonIcon slot="start" aria-hidden="true" :icon="phonePortraitOutline" />
        Phone Number
      </ion-button>
      <ion-button color="medium" expand="block" class="ion-margin-top" shape="round">
        <IonIcon slot="start" aria-hidden="true" :icon="logoGoogle" />
        Google
      </ion-button>
    </div>
  </div>
  <div v-else-if="step === 2">
    <h1><strong>Verify your email</strong></h1>
    <p>We have sent a verification code to {{ form.email }}. Please enter the code below to verify your email address.</p>

    <div>
      <ion-item>
        <ion-input-otp v-model="form.verificationCode" :length="6" />
      </ion-item>

      <ion-button expand="block" class="ion-margin-top" shape="round" @click="submitSignup">
        Submit
      </ion-button>
    </div>
  </div>
</template>

<style lang='css' scoped></style>
