import {
  Box,
  Button,
  Flex,
  FormControl,
  FormErrorMessage,
  Input,
  InputProps,
  Stack,
  Text,
  Textarea,
} from '@chakra-ui/react'
import { forwardRef, useState } from 'react'
import { useFormContext } from 'react-hook-form'
import TextareaAutosize from 'react-textarea-autosize'

const CustomInput = forwardRef<HTMLInputElement, InputProps>(
  ({ name, ...props }, ref) => {
    return (
      <Input
        name={name}
        type="text"
        variant="flushed"
        borderColor="gray"
        borderBottomWidth="1px"
        focusBorderColor="primary"
        ref={ref}
        _disabled={{ color: 'gray' }}
        _autofill={{ background: 'none' }}
        {...props}
      />
    )
  },
)

CustomInput.displayName = 'CustomInput'

// type FormFields = {
//   name: string
//   email: string
//   message: string
// }

const sendMessage = async () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      alert('¡Este formulario no es real!')
      resolve(true)
    }, 1500)
  })
}

const ContactForm: React.FC = () => {
  const [sending, setSending] = useState(false)
  const [error, setError] = useState(false)

  const { formState, register, handleSubmit, errors, reset } = useFormContext()
  const { isSubmitSuccessful } = formState

  const onSubmit = async (/* data: FormFields */) => {
    setSending(true)
    setError(false)

    sendMessage()
      .then(() => {
        setSending(false)
        setError(false)
      })
      .catch(() => {
        setSending(false)
        setError(true)
      })
  }

  const buttonText = (() => {
    if (sending) {
      return 'Enviando'
    }
    if (isSubmitSuccessful) {
      return '¡Enviado!'
    }
    return 'Enviar'
  })()

  return (
    <Box w="100%">
      <Stack
        as="form"
        onSubmit={handleSubmit(onSubmit)}
        flexDir="column"
        flexWrap="nowrap"
        w="480px"
        maxW="calc(100% - 4rem)"
        m="2rem auto"
        spacing="3rem"
      >
        <FormControl id="name" isInvalid={errors.name}>
          <CustomInput
            name="name"
            placeholder="Nombre"
            aria-label="Nombre"
            isDisabled={isSubmitSuccessful}
            ref={register({ required: true })}
          />
          <FormErrorMessage>Este campo es obligatorio</FormErrorMessage>
        </FormControl>

        <FormControl id="email" isInvalid={errors.email}>
          <CustomInput
            name="email"
            placeholder="e-mail"
            aria-label="e-mail"
            isDisabled={isSubmitSuccessful}
            ref={register({
              required: true,
              pattern: /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/,
            })}
          />
          <FormErrorMessage>
            {errors.email
              ? errors.email.type === 'required'
                ? 'Este campo es obligatorio'
                : null || errors.email.type === 'pattern'
                ? 'La dirección de correo electrónico no es válida'
                : null
              : null}
          </FormErrorMessage>
        </FormControl>

        <FormControl id="message" isInvalid={errors.message}>
          <Textarea
            as={TextareaAutosize}
            minRows={1}
            borderBottomWidth="1px"
            name="message"
            aria-label="mensaje"
            placeholder="Mensaje"
            resize="none"
            minH={0}
            variant="flushed"
            borderColor="gray"
            focusBorderColor="primary"
            overflow="hidden"
            isDisabled={isSubmitSuccessful}
            ref={register({ required: true })}
            _disabled={{ color: 'gray' }}
          />
          <FormErrorMessage>Este campo es obligatorio</FormErrorMessage>
        </FormControl>

        <Flex>
          <Input
            type="submit"
            disabled={sending || isSubmitSuccessful}
            opacity="1 !important"
            value={buttonText}
            bg={sending ? 'lightGray' : isSubmitSuccessful ? 'green' : 'blue'}
            borderRadius="primary"
            color={sending ? 'gray' : 'white'}
            cursor={!sending || !isSubmitSuccessful ? 'pointer' : 'default'}
            fontWeight="bold"
            border="none"
            outline="none"
            py="1em"
            fontSize="xl"
            h="auto"
            w="100%"
          />
        </Flex>
        {error ? (
          <Text color="red.500">
            Ocurrió un error. Por favor, intentalo nuevamente más tarde.
          </Text>
        ) : null}
        {isSubmitSuccessful ? (
          <Button variant="link" onClick={() => reset()}>
            Enviar un nuevo mensaje
          </Button>
        ) : null}
      </Stack>
    </Box>
  )
}

export default ContactForm
