import { computed, onMounted, reactive, ref } from 'vue'
import type { FormInstance } from 'ant-design-vue'
import { message } from 'ant-design-vue'
import OtpInput from 'vue3-otp-input'
import type { Login } from '@/models/login'
import {
  authenticateWithFingerprint,
  getToken,
  loading,
  setToken,
} from '@/utils'
import useCountdownTimer from '@/utils/useCountdownTimer'
import { loginCustomer, verifyToken } from '@/api/login'
import router from '@/router'
import { useUserStore } from '@/store/userStore'
import { useWalletStore } from '@/store/walletStore'
import { useSettingsStore } from '@/store/settingsStore'
import { setTruth } from '@/app/authBoot'
import { completeLoginNavigation } from '@/layouts/composables/useMobileScrollReset'

export function useLoginForm() {
  const { time, onFinish, reset } = useCountdownTimer('00:02:00', 'mm:ss')
  const enableSendAgainCode = ref(false)
  const stepTwoVerify = ref(false)
  const formRef = ref<FormInstance>()
  const userStore = useUserStore()
  const walletStore = useWalletStore()
  const refOtpInput = ref<InstanceType<typeof OtpInput> | null>(null)
  const isSMS = ref(true)
  const isRegister = ref<boolean | undefined>()
  const showPWAInstallGuide = ref(false)

  const userFormState = reactive<Login>({
    provider: 'customer',
  })

  onFinish(() => {
    enableSendAgainCode.value = true
  })

  async function reSendCode() {
    userFormState.token = undefined
    enableSendAgainCode.value = false
    await loginCustomer(userFormState)
    reset()
  }

  function setIsSMS(val: boolean) {
    isSMS.value = val
    if (!val) stepTwoVerify.value = false
    userFormState.token = ''
    userFormState.password = ''
  }

  async function enterFingerPrint() {
    const fingerPrint = await authenticateWithFingerprint()
    if (fingerPrint) {
      setTruth()
      await completeLoginNavigation()
    } else {
      message.error('خطا در اعتبارسنجی')
    }
  }

  function handleOnChange(value: string) {
    userFormState.token = value
  }

  async function handleOnComplete(value: string) {
    userFormState.token = value
    phoneVerification()
  }

  async function login(accessToken: string | undefined) {
    setToken(accessToken)
    await userStore.getMyInfo()
    await walletStore.getMyWallet()
    setTruth()
    await completeLoginNavigation()
  }

  function getcode() {
    if ('OTPCredential' in window) {
      const ac = new AbortController()
      navigator.credentials
        .get({
          otp: { transport: ['sms'] },
          signal: ac.signal,
        })
        .then((otp) => {
          userFormState.token = otp?.code
          refOtpInput.value?.fillInput(otp?.code)
          phoneVerification()
          ac.abort()
        })
        .catch(() => {
          ac.abort()
        })
    }
  }

  function phoneVerification() {
    formRef.value?.validateFields().then(async () => {
      try {
        loading.value = true
        if (isSMS.value) {
          if (!stepTwoVerify.value) {
            userFormState.token = undefined
            userFormState.password = undefined
            userFormState.provider = 'customer'
            const { id } = await loginCustomer(userFormState)
            userFormState.id = id
            stepTwoVerify.value = true
            getcode()
            reset()
          } else {
            const { access_token } = await verifyToken(userFormState)
            await login(access_token)
          }
        } else {
          userFormState.token = undefined
          const { access_token } = await loginCustomer(userFormState)
          await login(access_token)
        }
      } catch (e) {
        console.log(e)
      } finally {
        loading.value = false
      }
    })
  }

  function editPhoneNumber() {
    stepTwoVerify.value = false
  }

  async function isOpenRegister() {
    const settingsStore = useSettingsStore()
    await settingsStore.fetchSettings()
    isRegister.value = settingsStore.settings.find(
      (s) => s?.key === 'open_register' && s?.is_active === true,
    )
  }

  function installWebApp() {
    showPWAInstallGuide.value = true
  }

  function proceedWithInstall() {
    showPWAInstallGuide.value = false
  }

  const submitLabel = computed(() => {
    if (!isSMS.value) return 'ورود'
    return stepTwoVerify.value ? 'ورود' : 'ارسال کد'
  })

  const showFingerprint = computed(
    () => Boolean(getToken() && userStore.userInfo?.finger_print),
  )

  onMounted(async () => {
    await isOpenRegister()
  })

  return {
    time,
    enableSendAgainCode,
    stepTwoVerify,
    formRef,
    refOtpInput,
    isSMS,
    isRegister,
    showPWAInstallGuide,
    userFormState,
    loading,
    submitLabel,
    showFingerprint,
    setIsSMS,
    reSendCode,
    enterFingerPrint,
    handleOnChange,
    handleOnComplete,
    phoneVerification,
    editPhoneNumber,
    installWebApp,
    proceedWithInstall,
  }
}