Untitled

// external lib dependencies
import CloudDownloadIcon from "@material-ui/icons/CloudDownload";
import EditIcon from "@material-ui/icons/Edit";
import DeleteIcon from "@material-ui/icons/Delete";
import { FC, useCallback, useEffect, useState } from "react";
import { IconButton, Tooltip } from "@material-ui/core";

// absolute path dependencies
import { useFilesContext } from "providers/FilesContext";

// local dependencies
import ChangeCategoryDialog from "./ChangeCategoryDialog";
import DeleteFileDialog from "./DeleteFileDialog";
import EnterPassword from "./EnterPassword";

interface Props {
  categoryName: string;
  fileID: string;
  fileName: string;
  fileNotSensitive: boolean;
}

const ActionsTableCell: FC<Props> = ({ categoryName, fileID, fileName, fileNotSensitive }) => {
  const [openPasswordDialog, setOpenPasswordDialog] = useState<boolean>(false);
  const [openCategoryDialog, setOpenCategoryDialog] = useState<boolean>(false);
  const [openDeleteDialog, setOpenDeleteDialog] = useState<boolean>(false);
  const [password, setPassword] = useState<string>("");

  const { fetchFile, errorMessage } = useFilesContext();

  const handleOpenCategoryDialog = () => {
    setOpenCategoryDialog(true);
  };

  const handleCloseCategoryDialog = () => {
    setOpenCategoryDialog(false);
  };

  const handleOpenDeleteDialog = () => {
    setOpenDeleteDialog(true);
  };

  const handleCloseDeleteDialog = () => {
    setOpenDeleteDialog(false);
  };

  const handleClosePasswordDialog = () => {
    setOpenPasswordDialog(false);
  };

  const handleOpenPasswordDialog = () => {
    if(fileNotSensitive) {
      fetchFile(fileID, fileName, password);
    } else {
      setOpenPasswordDialog(true);
    }
  };

  useEffect(() => {
    if (errorMessage === "" && openPasswordDialog === true) {
      console.log("errorMessage = null")
      console.log(openPasswordDialog)
      setOpenPasswordDialog(false);
    } else if (openPasswordDialog === false && errorMessage !== "") {
      console.log("errorMessage not null")
      console.log(openPasswordDialog)
      setOpenPasswordDialog(true);
    }
  }, [errorMessage, openPasswordDialog])

  const handleSubmitPasswordDialog = async (password: string) => {
    setPassword(password);
    await fetchFile(fileID, fileName, password);
    console.log(errorMessage)
  };

  return (
    <div className="actionsButtons">
      <EnterPassword
        open={openPasswordDialog}
        handleClose={handleClosePasswordDialog}
        handleSubmitPassword={handleSubmitPasswordDialog}
        errorMessage={errorMessage}
      />
      <Tooltip title="Change Category">
        <IconButton onClick={handleOpenCategoryDialog}>
          <EditIcon />
        </IconButton>
      </Tooltip>

      <ChangeCategoryDialog
        open={openCategoryDialog}
        onClose={handleCloseCategoryDialog}
        categoryName={categoryName}
        fileID={fileID}
      />
      <Tooltip title="Delete">
        <IconButton onClick={handleOpenDeleteDialog}>
          <DeleteIcon />
        </IconButton>
      </Tooltip>

      <DeleteFileDialog open={openDeleteDialog} onClose={handleCloseDeleteDialog} fileID={fileID} />

      <Tooltip title="Download">
        <IconButton onClick={handleOpenPasswordDialog}>
          <CloudDownloadIcon />
        </IconButton>
      </Tooltip>
    </div>
  );
};

export default ActionsTableCell;