import { useEffect } from 'react'
import { useQueryClient } from 'react-query'
import { Button, Label, Modal, TextInput } from 'flowbite-react'
import { toast } from 'react-toastify'

import { useForm } from '@/src/hooks/useForm'
import { useEditStudyYear } from '@/src/hooks/user/studyYears'
import { StudyYearEditFormValues } from '@/src/interfaces/users/studyYears'
import { validateEditStudyYear } from '@/src/validations/user'
import { useUIStore } from '@/src/store/uiStore'
import { useUserStore } from '@/src/store/userStore'

const initialValues: StudyYearEditFormValues = {
  year: '',
}

interface Props {
  show: boolean
  onClose: () => void
}

export default function ModalEditStudyYear({ show, onClose }: Props) {
  const { mutate, isLoading } = useEditStudyYear()
  const { setLoading } = useUIStore()
  const { studyYearSelected } = useUserStore()
  const queryClient = useQueryClient()
  const {
    values,
    errors: fieldErrors,
    setValues,
    resetForm,
    handleChange,
    handleSubmit,
  } = useForm(initialValues, validateEditStudyYear, values => {
    if (!studyYearSelected?.id) {
      toast.error('El ciclo académico no existe')
    } else {
      mutate(
        { studyYearId: studyYearSelected?.id, ...values },
        {
          onSuccess: data => {
            onClose()
            queryClient.invalidateQueries('studyYears')
          },
        },
      )
    }
  })

  useEffect(() => {
    setLoading(isLoading)
  }, [isLoading])

  useEffect(() => {
    if (studyYearSelected) {
      setValues({
        year: studyYearSelected.year || initialValues.year,
      })
    } else {
      resetForm()
    }
  }, [studyYearSelected])

  useEffect(() => {
    if (!show) {
      resetForm()
    }
  }, [show])

  return (
    <Modal
      show={show}
      onClose={onClose}
      size="md"
      position="center"
      popup
      className="flex items-center justify-center min-h-screen">
      <Modal.Header />

      <Modal.Body>
        <div className="space-y-6">
          <h3 className="text-xl font-medium text-gray-900 dark:text-white">
            Editar ciclo académico
          </h3>
          <form onSubmit={handleSubmit} noValidate className="space-y-6">
            <div>
              <div className="mb-2 block">
                <Label htmlFor="name" value="Nombre" />
              </div>
              <TextInput
                id="name"
                name="year"
                value={values.year}
                onChange={handleChange}
              />
              {fieldErrors.year && (
                <p className="text-sm text-error">{fieldErrors.year}</p>
              )}
            </div>

            <div className="w-full flex justify-center">
              <Button type="submit">Editar</Button>
            </div>
          </form>
        </div>
      </Modal.Body>
    </Modal>
  )
}