<script lang='ts' setup>
import type { PropType } from "vue";
import type { AuthUserSignup } from "@/auth/type";
import { toastController } from "@ionic/vue";

const emit = defineEmits<{
  (e: "success", value: AuthUserSignup): void;
}>();

const { t } = useI18n();

const model = defineModel({ type: Object as PropType<AuthUserSignup>, required: true });

async function submitSignup() {
  if (model.value.verificationCode.length !== 6) {
    const toast = await toastController.create({
      message: t("auth.common.validVerificationCodeError"),
      duration: 1500,
      position: "bottom",
    });

    await toast.present();
    return;
  }

  emit("success", model.value);
}
</script>

<template>
  <h1><strong>{{ t('auth.verification.title') }}</strong></h1>
  <p>{{ t('auth.verification.description', { email: model.email }) }}</p>

  <div>
    <ion-input-otp v-model="model.verificationCode" :length="6" />
    <!--
    <ui-input v-model="model.name" placeholder="Name" />

    <ui-input v-model="model.password" placeholder="Password" />

    <ui-input v-model="model.confirmPassword" placeholder="Confirm Password" /> -->

    <ion-button expand="block" class="ion-margin-top" shape="round" @click="submitSignup">
      {{ t('auth.common.submit') }}
    </ion-button>
  </div>
</template>

<style scoped></style>
