<template>
  <AuthShell>
    <SignupForm v-if="step === SIGNUP_STEPS.SIGNUP" @next="handleNext" />
    <VerifyCodeForm
      v-else
      :phone-number="phoneNumber"
      mode="signup"
      @back="step = SIGNUP_STEPS.SIGNUP"
      @verified="handleVerified"
      @password-login="router.push({ name: 'login' })"
    />
  </AuthShell>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { SIGNUP_STEPS } from '@/enums'
import AuthShell from '@/features/auth/components/AuthShell.vue'
import SignupForm from '@/features/auth/components/SignupForm.vue'
import VerifyCodeForm from '@/features/auth/components/VerifyCodeForm.vue'

const router = useRouter()

const step = ref(SIGNUP_STEPS.SIGNUP)
const phoneNumber = ref('')

const handleNext = ({ phone }) => {
  phoneNumber.value = phone
  step.value = SIGNUP_STEPS.VERIFY_CODE
}

const handleVerified = () => {
  router.push({ name: 'student-register' }).catch(() => router.push('/'))
}
</script>
