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

import { useForm } from '@/src/hooks/useForm'
import { StudyProgramCreateFormValues } from '@/src/interfaces/users/studyPrograms'
import { validateCreateStudyProgram } from '@/src/validations/user'
import { useUIStore } from '@/src/store/uiStore'
import { useCreateStudyProgram } from '@/src/hooks/user/studyPrograms'

const initialValues: StudyProgramCreateFormValues = {
  name: '',
}

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

export default function ModalCreateStudyProgram({ show, onClose }: Props) {
  const { mutate, isLoading } = useCreateStudyProgram()
  const { setLoading } = useUIStore()
  const queryClient = useQueryClient()
  const {
    values,
    errors: fieldErrors,
    handleChange,
    handleSubmit,
    resetForm,
  } = useForm(initialValues, validateCreateStudyProgram, values => {
    mutate(values, {
      onSuccess: () => {
        onClose()
        queryClient.invalidateQueries('studyPrograms')
      },
    })
  })

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

  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">
            Añadir nuevo programa de estudios
          </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="name"
                value={values.name}
                onChange={handleChange}
              />
              {fieldErrors.name && (
                <p className="text-sm text-error">{fieldErrors.name}</p>
              )}
            </div>

            <div className="w-full flex justify-center">
              <Button type="submit" color="primary">
                Añadir
              </Button>
            </div>
          </form>
        </div>
      </Modal.Body>
    </Modal>
  )
}