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

const props = defineProps<{
  email: string;
}>();
const emit = defineEmits<{
  (e: "success", value: string): void;
}>();
const model = defineModel({ type: String, required: true });

async function submitSignup() {
  if (model.value.length !== 6) {
    const toast = await toastController.create({
      message: "Please enter a valid 6-digit verification code.",
      duration: 1500,
      position: "bottom",
    });

    await toast.present();
    return;
  }

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

<template>
  <h1><strong>Verify your email</strong></h1>
  <p>We have sent a verification code to {{ email }}. Please enter the code below to verify your email address.</p>

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

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

<style scoped></style>
