<template>
  <form class="auth-form" @submit.prevent="onSubmit">
    <div class="auth-form__body">
      <AuthHeading
        :title="isForgotPassword ? 'بازیابی رمز عبور' : 'ورود با کد تایید'"
        :subtitle="
          isForgotPassword
            ? 'شماره موبایل خود را وارد کنید تا کد تایید برای شما ارسال شود'
            : 'شماره موبایل خود را وارد کنید'
        "
      />

      <TextField
        v-model="form.phone"
        name="phone"
        label="شماره تلفن همراه"
        inputmode="numeric"
        :convert-digits="true"
        :error="errors.phone"
        @blur="validateAt('phone', form.phone)"
      >
        <template #appendIcon>
          <SvgIcon name="phone" :size="22" color="var(--color-thd-gray)" />
        </template>
      </TextField>

      <BaseButton
        type="submit"
        text="ارسال کد تایید"
        :loading="loading"
        custom-class="login-otp__submit"
      >
        <template #appendIcon>
          <SvgIcon name="arrow-left" :size="22" color="#fff" />
        </template>
      </BaseButton>
    </div>

    <div class="login-otp__links">
      <button type="button" class="login-otp__back" @click="emit('back')">
        بازگشت به ورود با رمز عبور
      </button>
    </div>

    <div class="auth-form__footer">
      <AuthCopyright />
    </div>
  </form>
</template>

<script setup>
import { computed, ref } from 'vue'
import useYup from '@/composables/useYup'
import useAuth from '@/composables/useAuth'
import BaseButton from '@/components/BaseButton.vue'
import SvgIcon from '@/components/icons/SvgIcon.vue'
import TextField from '@/components/form/TextField.vue'
import { loginWithCodeSchema } from '@/features/auth/schema'
import AuthHeading from '@/features/auth/components/AuthHeading.vue'
import AuthCopyright from '@/features/auth/components/AuthCopyright.vue'
import { useForgotPasswordMutation, useRequestLoginOtpMutation } from '@/services/query/auth'

const props = defineProps({
  mode: { type: String, default: 'loginWithCode' },
})

const emit = defineEmits(['next', 'back'])

const isForgotPassword = computed(() => props.mode === 'forgotPassword')

const schema = loginWithCodeSchema
const form = ref({ phone: '' })
const { validate, validateAt, errors } = useYup(schema)

const { savePhoneNumber } = useAuth()
const requestLoginOtpMutation = useRequestLoginOtpMutation()
const forgotPasswordMutation = useForgotPasswordMutation()

const loading = computed(
  () => requestLoginOtpMutation.isPending.value || forgotPasswordMutation.isPending.value
)

const onSubmit = async () => {
  const { isValid, payload } = await validate(form.value)
  if (!isValid) return
  if (isForgotPassword.value) {
    await forgotPasswordMutation.mutateAsync({ phone: payload.phone })
  } else {
    await requestLoginOtpMutation.mutateAsync({ phone: payload.phone })
  }
  savePhoneNumber(payload.phone)
  emit('next', { phone: payload.phone, mode: props.mode })
}
</script>

<style lang="scss" scoped>
.auth-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-grow: 1;

  &__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 1rem 0;

    @media (min-width: 768px) {
      flex-grow: 1;
      justify-content: center;
    }
  }

  &__footer {
    margin-top: auto;
    margin-bottom: 1rem;
    text-align: center;
    width: 100%;

    @media (min-width: 768px) {
      margin-top: 0;
    }
  }
}

.login-otp__submit {
  margin-top: 1.5rem;
  width: 100%;
}

.login-otp__links {
  margin: 0.5rem 0;
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.login-otp__back {
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--font-family-fa);
  font-size: 0.75rem;
  color: #a7a7a7;

  &:hover {
    text-decoration: underline;
    color: var(--color-sec-gray);
  }
}
</style>
