<template>
  <AuthShell>
    <LoginForm v-if="step === LOGIN_STEPS.LOGIN" @next="handleNext" />
    <LoginWithVerifyCodeForm
      v-else-if="step === LOGIN_STEPS.LOGIN_WITH_VERIFY_CODE"
      :mode="mode"
      @next="handleCodeSent"
      @back="step = LOGIN_STEPS.LOGIN"
    />
    <VerifyCodeForm
      v-else-if="step === LOGIN_STEPS.VERIFY_CODE"
      :phone-number="phoneNumber"
      :mode="mode"
      @back="step = LOGIN_STEPS.LOGIN_WITH_VERIFY_CODE"
      @password-login="step = LOGIN_STEPS.LOGIN"
    />
  </AuthShell>
</template>

<script setup>
import { ref } from 'vue'
import { LOGIN_STEPS } from '@/enums'
import AuthShell from '@/features/auth/components/AuthShell.vue'
import LoginForm from '@/features/auth/components/LoginForm.vue'
import VerifyCodeForm from '@/features/auth/components/VerifyCodeForm.vue'
import LoginWithVerifyCodeForm from '@/features/auth/components/LoginWithVerifyCodeForm.vue'

const step = ref(LOGIN_STEPS.LOGIN)
const mode = ref('loginWithCode')
const phoneNumber = ref('')

const handleNext = ({ mode: newMode }) => {
  mode.value = newMode
  step.value = LOGIN_STEPS.LOGIN_WITH_VERIFY_CODE
}

const handleCodeSent = ({ phone, mode: newMode }) => {
  phoneNumber.value = phone
  mode.value = newMode
  step.value = LOGIN_STEPS.VERIFY_CODE
}
</script>
