import { useState } from "react";
import { TorrentsList } from "./TorrentsList";
import { ErrorComponent } from "./ErrorComponent";
import { useTorrentStore } from "../stores/torrentStore";
import { useErrorStore } from "../stores/errorStore";
import { IconButton } from "./buttons/IconButton";
import { FiTrash2 } from "react-icons/fi";
import { DeleteAllTorrentsModal } from "./modal/DeleteAllTorrentsModal";

export const RootContent = (props: {}) => {
  let closeableError = useErrorStore((state) => state.closeableError);
  let setCloseableError = useErrorStore((state) => state.setCloseableError);
  let otherError = useErrorStore((state) => state.otherError);
  let torrents = useTorrentStore((state) => state.torrents);
  let torrentsInitiallyLoading = useTorrentStore(
    (state) => state.torrentsInitiallyLoading
  );
  const [deleteAllOpened, setDeleteAllOpened] = useState(false);

  return (
    <div className="container mx-auto">
      <ErrorComponent
        error={closeableError}
        remove={() => setCloseableError(null)}
      />
      <ErrorComponent error={otherError} />
      {torrents && torrents.length > 0 && (
        <div className="flex justify-end px-4 py-2">
          <IconButton onClick={() => setDeleteAllOpened(true)}>
            <FiTrash2 className="hover:text-red-500" />
          </IconButton>
        </div>
      )}
      <TorrentsList torrents={torrents} loading={torrentsInitiallyLoading} />
      <DeleteAllTorrentsModal
        show={deleteAllOpened}
        onHide={() => setDeleteAllOpened(false)}
      />
    </div>
  );
};