import { useNavigate, useSearchParams, Link } from 'react-router'
import { useForm } from 'react-hook-form'
import { ErrorMessage } from '@hookform/error-message'
import { isValidCPF } from '@brazilian-utils/brazilian-utils'
import { yupResolver } from '@hookform/resolvers/yup'
import { Card } from '~/layouts/auth/layout'
import { Control, Label, Input, Button, Error } from '~/components/form'
import { Heading } from '~/components/heading'
import Password from './_password'
import * as yup from 'yup'

yup.addMethod(yup.string, 'username', function (message) {
  return this.test(
    'username',
    message,
    (x) => isValidCPF(x) || yup.string().email().isValid(x),
  )
})

export const schema = yup.object({
  username: yup
    .string()
    .trim()
    .lowercase()
    .username('Deve ser um Email ou CPF válido')
    .transform((x) => (isValidCPF(x) ? x.replace(/\D/g, '') : x))
    .required('Digite um Email ou CPF'),
})

export default function Component() {
  const [searchParams] = useSearchParams()

  if (searchParams.get('username')) {
    return <Password />
  }

  return <SignIn />
}

function SignIn() {
  const [searchParams, setSearchParams] = useSearchParams()
  const { handleSubmit, formState, setError, register } = useForm({
    resolver: yupResolver(schema),
  })

  const onSubmit = async ({ username }) => {
    setSearchParams((searchParams) => {
      searchParams.set('username', username)
      return searchParams
    })
  }

  return (
    <Card>
      <Heading>Digite o seu email ou cpf para continuar</Heading>

      {/* Sign in */}
      <form onSubmit={handleSubmit(onSubmit)} className="space-y-2.5">
        <Control
          className="space-y-0.5"
          aria-invalid={'username' in formState.errors}
        >
          <Label aria-required={true}>Email ou CPF</Label>
          <Input
            className="w-full"
            autoFocus={true}
            {...register('username')}
          />
          <ErrorMessage
            errors={formState.errors}
            name="username"
            render={({ message }) => <Error>{message}</Error>}
          />
        </Control>

        <Button
          type="submit"
          className="w-full"
          isLoading={formState.isSubmitting}
        >
          Continuar
        </Button>
      </form>

      <div className="flex justify-center items-center gap-4">
        <span className="flex-1 h-px bg-yellow-secondary dark:bg-gray-700" />
        <span>ou</span>
        <span className="flex-1 h-px bg-yellow-secondary dark:bg-gray-700" />
      </div>

      <Button
        as={Link}
        to={{
          pathname: './passcode',
          search: searchParams.toString(),
        }}
        relative="path"
        className="flex justify-center items-center !bg-yellow-primary w-full"
      >
        Entrar com código de acesso
      </Button>
    </Card>
  )
}