<template>
  <Card
    v-if="!changeForm"
    class="m-auto w-96"
    :pt="{ title: 'text-center pt-4', content: 'flex flex-col gap-9 pt-8 h-30' }"
  >
    <template #title> {{ $t('login') }} </template>
    <template #content>
      <div class="flex flex-col gap-1">
        <FloatLabel>
          <InputText v-model="number" class="w-full ltr" />
          <label>{{ $t('phoneNumber') }}</label>
        </FloatLabel>
        <small v-if="errors.length > 0">{{ errors }}</small>
      </div>
    </template>
    <template #footer>
      <Button :label="$t('sendOtp')" class="w-full" :loading="loading" @click="login()" />
    </template>
  </Card>

  <Card
    v-else
    class="m-auto w-96"
    :pt="{ title: 'text-center pt-4', content: 'flex flex-col gap-9 pt-8 h-30' }"
  >
    <template #title> {{ $t('otp') }} </template>
    <template #content>
      <div class="flex flex-col gap-1">
        <FloatLabel>
          <InputText v-model="code" class="w-full ltr" />
          <label>{{ $t('otp') }}</label>
        </FloatLabel>
        <small v-if="errors.length > 0">{{ errors }}</small>
      </div>
    </template>
    <template #footer>
      <Button :label="$t('login')" class="w-full" :loading="loading" @click="checkOtp()" />
    </template>
  </Card>
</template>
<script setup>
import { inject, reactive, ref } from 'vue'
import { useAdminsStore } from '@/stores/admins'
import { useRouter } from 'vue-router'
const { toast, t } = inject('service')
const loading = ref(false)
const changeForm = ref(false)
const store = useAdminsStore()
const errors = ref({})
const number = ref(null)
const code = ref(1234)
const router = useRouter()
const login = async () => {
  loading.value = true
  const { status, data } = await store.login(number)
  loading.value = false
  if (status === 200) {
    changeForm.value = true
    toast.add({
      severity: 'success',
      life: 2000,
      detail: t('sendOtpSuccessfully'),
      summary: t('successful'),
      closable: false
    })
  }
}
const checkOtp = async () => {
  loading.value = true
  const { status, data } = await store.sendOtp(number, code)
  console.log('com data', data)
  console.log('com status', status)
  loading.value = false
  if (status === 200) {
    toast.add({
            severity: 'success', life: 2000, detail: t('loginSuccessfully'), summary: t('successful'), closable: false
        })
    setTimeout(() => router.push('/'), 300); 
  }
}

//         // setTimeout(() => router.push('/'), 300);
//         console.log(data);
//     } else if (status === 400)
//    // console.log('400', data.message[0])
//          errors.value = data.message[0]
//     else
//     {
//         console.log(data);

//     }
// toast.add({
//     severity: 'error', life: 2000, detail: data.msg, summary: t('error')
// })
</script>