import { useQueryClient } from 'react-query'
import { Button, Modal } from 'flowbite-react'
import { HiOutlineExclamationCircle } from 'react-icons/hi'
import { useEffect } from 'react'
import { toast } from 'react-toastify'

import { useUserStore } from '@/src/store/userStore'
import { useUIStore } from '@/src/store/uiStore'
import { useDeleteStudyProgram } from '@/src/hooks/user/studyPrograms'

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

export default function ModalDeleteStudyProgram({ show, onClose }: Props) {
  const { studyProgramSelected } = useUserStore()
  const { setLoading } = useUIStore()
  const { mutate, isLoading } = useDeleteStudyProgram()
  const queryClient = useQueryClient()

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

  const handleDelete = () => {
    if (!studyProgramSelected) {
      toast.error('El programa de estudios no existe')
    } else {
      mutate(
        { studyProgramId: studyProgramSelected.id },
        {
          onSuccess() {
            onClose()
            queryClient.invalidateQueries('studyPrograms')
          },
        },
      )
    }
  }

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

      <Modal.Body>
        <div className="text-center">
          <HiOutlineExclamationCircle className="mx-auto mb-4 h-14 w-14 text-error" />
          <h3 className="mb-5 text-lg font-semibold text-gray-500 dark:text-gray-400">
            ¿Estás seguro de eliminar este programa de estudio?
          </h3>
          <p className="text-gray-500 mb-4">
            Al eliminar el programa de estudio podrías afectar otros datos
          </p>
          <div className="flex justify-center gap-4">
            <Button color="failure" onClick={handleDelete}>
              Sí, estoy seguro
            </Button>
            <Button color="gray" onClick={onClose}>
              No, cancelar
            </Button>
          </div>
        </div>{' '}
      </Modal.Body>
    </Modal>
  )
}