import { useEffect, useState } from 'react'
import cx from 'classnames'

import type { PropsWithClassName } from '@/lib/types'
import { useGlobals } from '@/lib/globals'

import Button from '@/components/shared/Button'

type Props = PropsWithClassName & {
  inputClassName?: string
  buttonClassName?: string
}

export default function Newsletter({ className, inputClassName, buttonClassName }: Props) {
  const { newsletterForm } = useGlobals()

  const [email, setEmail] = useState('')
  const [errors, setErrors] = useState([] as { message: string }[])
  const [success, setSuccess] = useState(false)
  const [isSubmitting, setIsSubmitting] = useState(false)

  const handleEmailChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setEmail(event.target.value)
  }

  const handleSubmit = async (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
    e.preventDefault()
    setIsSubmitting(true)

    if (email === '') {
      setErrors([{ message: 'Email is required' }])
    } else {
      const sumbitFooterNewsletterForm = (await import('@/lib/api/newsletter-form')).sumbitFooterNewsletterForm
      const response = await sumbitFooterNewsletterForm(email)

      if (response.errors) {
        setErrors(response.errors)
        setSuccess(false)
      } else {
        setErrors([])
        setEmail('')
        setSuccess(true)
      }
    }

    setIsSubmitting(false)
  }

  // make errors and success disappear if user changes email
  useEffect(() => {
    if (errors.length > 0) {
      setErrors([])
      setSuccess(false)
    }
  }, [email])

  if (!newsletterForm) return null

  return (
    <form className={className}>
      <input
        className={cx(
          'text-xl placeholder:text-gray-dark text-white font-light w-full border-t-0 border-l-0 border-r-0 border-b-1 border-white bg-transparent mb-30px py-10px px-0',
          inputClassName
        )}
        type={newsletterForm.formFields.nodes[0].type}
        placeholder={`${newsletterForm.formFields.nodes[0].label}*`}
        value={email}
        onChange={handleEmailChange}
      />
      {errors.length > 0 && (
        <div className="text-white text-sm mb-30px">
          {errors.map((error, index) => (
            <p key={index}>*{error.message}</p>
          ))}
        </div>
      )}

      <Button onClick={handleSubmit} color="white" className={buttonClassName} disabled={isSubmitting}>
        {newsletterForm.submitButton.text}
      </Button>

      {success && <div className="text-white text-sm pt-30px">{newsletterForm.confirmations[0].message}</div>}
    </form>
  )
}