import { Button, HStack, PinInput, PinInputField, Spinner } from "@chakra-ui/react"
import { useRouter } from "next/router"
import { useEffect, useState } from "react"
import { useMutation } from "react-query"
import { useCountdown } from "usehooks-ts"
import { Modal } from "~/components/ui/modal"
import { setAuth } from "~/libs/auth"
import { ActivationOtpProps, ActivationReqProps } from "~/types/auth"
import { activationReq, activationUserOTP } from "~/services/auth"

const FormOTP = () => {
  const router = useRouter()
  const { query } = router
  const [active, setActive] = useState<boolean>(false)
  const [email, setEmail] = useState<string>('')
  const [otp, setOtp] = useState<string>('')
  const [count, { startCountdown, resetCountdown }] = useCountdown({
    countStart: 60 * 1,
    intervalMs: 1000,
  })

  useEffect(() => {
    setEmail((query?.email || '') as string)
  }, [query?.email])

  useEffect(() => {
    setActive(query?.activation === 'otp')
  }, [query.activation])

  useEffect(() => {
    !!active && startCountdown()
  }, [active, startCountdown])

  const mutationActivationReq = useMutation({
    mutationFn: (data: ActivationReqProps) => activationReq(data),
    onSuccess: () => {
      resetCountdown()
      startCountdown()
    }
  })

  const mutationActivation = useMutation({
    mutationFn: (data: ActivationOtpProps) => activationUserOTP(data)
  })

  useEffect(() => {
    if (otp.length === 4 && !mutationActivation.data?.activation) {
      mutationActivation.mutate({ email, otp })
    }
    //eslint-disable-next-line
  }, [otp])

  useEffect(() => {
    if (mutationActivation.data?.user) {
      setAuth(mutationActivation.data.user)
      router.push((query?.redirect || '/') as string)
    }
  }, [mutationActivation.data, router, query.redirect])

  return (
    <Modal active={active} className="w-10/12 md:w-fit px-10" close={() => setActive(false)} mode="desktop">
      <div className="pb-8 flex flex-col items-center">
        <div className="text-title-sm font-medium mb-4">Masukan Kode OTP</div>
        <HStack>
          <PinInput size='lg' otp onChange={(val) => setOtp(val)}>
            <PinInputField autoFocus />
            <PinInputField />
            <PinInputField />
            <PinInputField />
          </PinInput>
        </HStack>
        <div className="mt-4 text-center">
          {mutationActivation.isLoading && <Spinner size='sm' />}

          {!mutationActivation.isLoading &&
            mutationActivation.data?.reason === 'INVALID_OTP' &&
            (
              <span className="text-red-700">Mohon maaf kode OTP yand anda masukan salah</span>
            )
          }
        </div>

        {!mutationActivation.data?.activation && (
          <div className="mt-4 text-center text-gray-700">
            Kode verifikasi telah dikirimkan ke alamat email <span className="font-medium">{email}</span>. Silakan periksa kotak masuk atau folder spam.
          </div>
        )}

        <div className="mt-4 flex flex-col items-center">
          {!mutationActivation.data?.activation && (
            <>
              {count > 0 && timeFormat(count)}

              {!mutationActivation.data?.activation && count == 0 && (
                <>
                  <div className="mb-3">Belum menerima kode apapun?</div>

                  <Button
                    onClick={() => mutationActivationReq.mutate({ email })}
                    disabled={mutationActivationReq.isLoading}
                  >
                    {mutationActivationReq.isLoading ? <Spinner size='sm' /> : 'Kirim Ulang'}
                  </Button>
                </>
              )}
            </>
          )}

        </div>
      </div>
    </Modal>
  )
}

const timeFormat = (time: number): string => {
  const minute = Math.floor(time / 60);
  const second = time % 60;

  const minuteFormat = minute < 10 ? `0${minute}` : `${minute}`
  const secondFormat = second < 10 ? `0${second}` : `${second}`

  return `${minuteFormat}:${secondFormat}`
}

export default FormOTP