"use client";

import React, { useState } from "react";
import { router } from "@inertiajs/react";
import { FiTrash2 } from "react-icons/fi";

import styles from "./confirm-delete.module.scss";

interface DeleteModalProps {
  closeModal: () => void;
  deleteUrl: string;
  onSuccess?: () => void;
  title: string;
  description: string;
}

const DeleteConfirmationModal: React.FC<
  DeleteModalProps
> = ({
  closeModal,
  deleteUrl,
  onSuccess,
  title,
  description,
}) => {
  const [loading, setLoading] =
    useState(false);

  const handleDelete = () => {
    if (!deleteUrl) return;

    setLoading(true);

    router.delete(deleteUrl, {
      preserveScroll: true,

      onSuccess: () => {
        setLoading(false);
        closeModal();
        onSuccess?.();
      },

      onError: () => {
        setLoading(false);
      },

      onFinish: () => {
        setLoading(false);
      },
    });
  };

  return (
    <div
      className={styles.confirm}
      onClick={closeModal}
    >
      <div
        className={styles.confirm__card}
        onClick={(e) =>
          e.stopPropagation()
        }
      >
        {/* <button
          type="button"
          className={styles.confirm__close}
          onClick={closeModal}
        >
          <FiX />
        </button> */}

        <div className={styles.confirm__icon}>
          <FiTrash2 />
        </div>

        <h2>{title}</h2>

        <p>{description}</p>

        <div
          className={
            styles.confirm__actions
          }
        >
          <button
            type="button"
            onClick={closeModal}
            className={
              styles.confirm__cancel
            }
          >
            Cancel
          </button>

          <button
            type="button"
            disabled={loading}
            onClick={handleDelete}
            className={
              styles.confirm__delete
            }
          >
            {loading
              ? "Deleting..."
              : "Delete"}
          </button>
        </div>
      </div>
    </div>
  );
};

export default DeleteConfirmationModal;