import { useHotlistData } from "../../hooks/useHotListData";
import { useIntegrationsContext } from "../../context/IntegrationsContext";
import Card from "../UI/Card";
import CardHeader from "../UI/CardHeader";
import { toast } from "sonner";
import { faTrash } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

const HotlistList = () => {
  const { state, dispatch } = useIntegrationsContext();
  const { mutation } = useHotlistData();

  const hotlists = state?.hotlistFiles;

  const handleDeleteClick = async (filename: string) => {
    await mutation.mutateAsync(filename);
    dispatch({ type: "DELETEHOTLIST", payload: filename });
    toast.success(`${filename} successfully deleted`);
  };

  return (
    <Card className="p-4">
      <CardHeader title="Uploaded hotlists" />
      {hotlists.length > 0 ? (
        <ul className="px-2">
          {hotlists?.map((hotlist) => (
            <li
              key={hotlist.filename}
              className="flex flex-row justify-between my-3 items-center border-b border-gray-700"
            >
              <div>
                <p className="text-xl">{hotlist.filename}</p>
                <div className="flex flex-row gap-3">
                  <div>
                    <p className="text-gray-400">
                      Number of records: <span>{hotlist.rowCount}</span>
                    </p>
                  </div>
                  <div>
                    <p className="text-gray-400">
                      File Size (bytes): <span>{hotlist.fileSizeBytes}</span>
                    </p>
                  </div>
                </div>
              </div>

              <button onClick={() => handleDeleteClick(hotlist.filename)}>
                <FontAwesomeIcon icon={faTrash} />
              </button>
            </li>
          ))}
        </ul>
      ) : (
        <div className="mt-4 flex flex-col items-center justify-center rounded-2xl border border-slate-800 bg-slate-900/40 p-10 text-center">
          <div className="mb-3 rounded-xl bg-slate-800 px-3 py-1 text-xs uppercase tracking-wider text-slate-400">
            No Uploaded Hotlists
          </div>
          <p className="max-w-md text-slate-300">
            <span className="text-emerald-400">Hotlists</span> will appear here once there are uploaded.
          </p>
        </div>
      )}
    </Card>
  );
};

export default HotlistList;