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 { useDeletePaymentConcept } from '@/src/hooks/user/paymentConcepts'

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

export default function ModalDeletePaymentConcept({ show, onClose }: Props) {
  const { paymentConceptSelected } = useUserStore()
  const { setLoading } = useUIStore()
  const { mutate, isLoading } = useDeletePaymentConcept()
  const queryClient = useQueryClient()

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

  const handleDelete = () => {
    if (!paymentConceptSelected) {
      toast.error('El concepto de pago no existe')
    } else {
      mutate(
        { id: paymentConceptSelected.id },
        {
          onSuccess() {
            onClose()
            queryClient.invalidateQueries('paymentConcepts')
          },
        },
      )
    }
  }

  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 concepto de pago?
          </h3>
          <p className="text-gray-500 mb-4">
            Al eliminar el concepto de pago 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>
  )
}