import React, { useState } from "react";
import useDeleteFile from "../hooks/useDeleteFile";
import { IFile } from "../interface";
import { DeleteIcon, XIcon } from "../svg";

interface IProps {
  resourceId: number;
  userGroupHash: string;
  file: IFile;
  page: number;
  refetch: () => void;
}
const DeleteFile = ({ file, userGroupHash, resourceId, page, refetch }: IProps) => {
  const [open, setOpen] = useState(false);

  // -------------------- HOOKS --------------------
  const { mutate, isLoading } = useDeleteFile();

  const handleClose = () => {
    setOpen(!open);
  };

  const handleDelete = async () => {
    mutate({
      page,
      resourceId,
      userGroupHash,
      fileHash: file.hash,
      callBack: () => {
        refetch();
        handleClose();
      },
    });
  };

  return (
    <div>
      <button
        className="dialog-content__button btn p-0 bg-transparent hover:bg-transparent"
        onClick={() => {
          return setOpen(true);
        }}
      >
        <DeleteIcon className="dialog-content__button-icon h-5 w-5 stroke-secondary" />
      </button>
      <div
        role="button"
        tabIndex={0}
        className={`dialog-content__modal modal cursor-default  ${
          open ? "modal-open" : ""
        }`}
        onClick={() => {
          return setOpen(false);
        }}
      >
        <div
          onClick={(e) => {
            return e.stopPropagation();
          }}
          role="button"
          tabIndex={-1}
          className="modal-box p-0 overflow-hidden text-right cursor-default"
        >
          <div className="overflow-auto modal-box">
            <div className="flex flex-wrap items-center">
              <h3 className="modal-title">حذف فایل</h3>
              <button
                className="w-fit mr-auto"
                onClick={() => {
                  handleClose();
                }}
              >
                <XIcon className="stroke-base-200 w-4 h-4" />
              </button>
            </div>
            <div className="flex items-center mt-[30px]"><p>از حذف مطمئن هستید؟</p></div>

            <div className="dialog-content__action-part modal-action mt-[30px]">
              {isLoading ? (
                <div className="spinner" />
              ) : (
                <>
                  <button
                    className="dialog-content__submit btn modal-btn-success"
                    onClick={handleDelete}
                  >
                    تایید
                  </button>
                  <button
                    className="dialog-content__btns btn modal-btn-cancel"
                    type="button"
                    onClick={handleClose}
                  >
                    انصراف
                  </button>
                </>
              )}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default DeleteFile;