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 { StudyProgramEditFormValues } from '@/src/interfaces/users/studyPrograms'
import { validateEditStudyProgram } from '@/src/validations/user'
import { useUIStore } from '@/src/store/uiStore'
import { useUserStore } from '@/src/store/userStore'
import { useEditStudyProgram } from '@/src/hooks/user/studyPrograms'

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

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

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

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

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

  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 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">
                Editar
              </Button>
            </div>
          </form>
        </div>
      </Modal.Body>
    </Modal>
  )
}