actionButtons.js

import { Button } from "@mui/material";
import DownloadOutlinedIcon from "@mui/icons-material/DownloadOutlined";
import BookmarkBorderOutlinedIcon from "@mui/icons-material/BookmarkBorderOutlined";
import OpenInNewOutlinedIcon from "@mui/icons-material/OpenInNewOutlined";
import ShareOutlinedIcon from "@mui/icons-material/ShareOutlined";
import FavoriteOutlinedIcon from "@mui/icons-material/FavoriteOutlined";
import FavoriteBorderOutlinedIcon from "@mui/icons-material/FavoriteBorderOutlined";
import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
import FlagOutlinedIcon from "@mui/icons-material/FlagOutlined";
import FlagIcon from "@mui/icons-material/Flag";
import mecredApi, { mecredURL } from "@/axiosConfig";
import { isLoggedIn, useLoginBarrier } from "@/app/handlers/loginHandler";
import { getStoredValue } from "@/app/handlers/localStorageHandler";
import { useState, useEffect, useLayoutEffect } from "react";
import ShareModal from "../../../components/ShareModal";
import ReportModal from "./reportModal";
import CollectModal from "./collectModal";
import HomologationModal from "./homologationModal";
import DeleteModal from "./deleteModal";
import { usePathname } from "next/navigation";

function ChangeOnHover({ text, textOnHover }) {
  return (
    <div className="">
      <span className="group-hover/button:hidden"> {text}</span>
      <span className="hidden group-hover/button:block"> {textOnHover}</span>
    </div>
  );
}

export default function ActionButtons({ learningObject, setNeedLoginOpen, state }) {
  const [liked, setLiked] = useState(learningObject.liked);
  const [shareOpen, setShareOpen] = useState(false);
  const [reportOpen, setReportOpen] = useState(false);
  const [reported, setReported] = useState(false);
  const [collectOpen, setCollectOpen] = useState(false)
  const [userData, setUserData] = useState("");
  const [submitOpen, setSubmitOpen] = useState(false)
  const [deleteOpen, setDeleteOpen] = useState(false)
  const [submitted, setSubmitted] = useState(state)

  const token = getStoredValue("access_token");
  const client = getStoredValue("client");
  const uid = getStoredValue("uid");
  const pathname = usePathname();

  useEffect(() => {
    if (!isLoggedIn()) return;

    const data = JSON.parse(getStoredValue("user_data"));
    setUserData(data);
  }, [token])

  useEffect(() => {
    setLiked(learningObject.liked);
  }, [learningObject.liked, userData]);

  useEffect(() => {
    if(!isLoggedIn() || !learningObject?.id) return;
    setReported(learningObject.complained);
  }, [learningObject])

  let buttonInfo = [
       // Botão de Acessar PDF
       learningObject.default_mime_type !== "application/pdf" ? null : {
        name: "Acessar",
        icon: <OpenInNewOutlinedIcon />,
        action: () => {
          if (typeof window !== "undefined") {
            const uri =
              mecredURL + "inline/" + learningObject.id;
            window.open(uri);
          }
        },
        extraProps: {},
      },
      // Botão de Acessar ou Baixar
      {
        name: learningObject.link ? "Acessar" : "Baixar",
        icon: learningObject.link ? (
          <OpenInNewOutlinedIcon />
        ) : (
          <DownloadOutlinedIcon />
        ),
        action: () => {
          if (typeof window !== "undefined") {
            window.open(
              mecredApi.getUri() +
              `/learning_objects/${learningObject.id}/download`
            );
          }
        },
        extraProps: {},
      },
    // Botão de curtir
    {
      name: liked ? (
        <ChangeOnHover text="Curtido" textOnHover="Descurtir" />
      ) : (
        "Curtir"
      ),
      icon: liked ? <FavoriteOutlinedIcon /> : <FavoriteBorderOutlinedIcon />,
      action: () => {
        if (!isLoggedIn()) {
          setNeedLoginOpen(true);
          return;
        }

        mecredApi.put(
          `learning_objects/${learningObject.id}/like`,
          {},
          {
            headers: {
              "access-token": token,
              "token-type": "Bearer",
              client: client,
              uid: uid,
              Expires: 0,
            },
          }
        );
        setLiked(!liked);
      },
      extraProps: {},
    },
 
    // Botão de Colecionar
    {
      name: "Colecionar", icon: <BookmarkBorderOutlinedIcon />, action: () => {
        if (!isLoggedIn()) {
          setNeedLoginOpen(true);
          return;
        }
        setCollectOpen(true)
      }
    },
    //Botão de Compartilhar
    {
      name: "Compartilhar",
      icon: <ShareOutlinedIcon />,
      action: () => {
        setShareOpen(true);
      },
      extraProps: {},
    },
   // Botão de Reportar
    userData.id === learningObject.publisher.id ? null :
    {
      name: reported ? "Reportado" : "Reportar",
      icon: reported ? <FlagIcon /> : <FlagOutlinedIcon />,
      action: () => {
        if (!isLoggedIn()) {
          setNeedLoginOpen(true);
          return;
        }
        if (reported) return;

        setReportOpen(true);
      },
      extraProps: { disabled: reported },
    },
    userData.id !== learningObject.publisher.id ? null :
    {
      name: "Deletar",
      icon: <DeleteOutlinedIcon />,
      action: () => {
        if (!isLoggedIn()) {
          setNeedLoginOpen(true);
          return;
        }

        setDeleteOpen(true);
      },
      extraProps: {},
    }
  ];

  let buttonKey = 0;
  let genButton = (info) => (
    !info ? null :  <Button
      id="conteudo"
      key={buttonKey++}
      className="group first:bg-turquoise-HC-white first:hover:text-darkGray-HC-white first:text-darkGray-HC-dark first:hover:bg-darkTurquoise-HC-dark text-darkGray-HC-white group outline outline-1 outline-ice-HC-white group/button shadow-none flex justify-start rounded-xl p-1 m-1 normal-case text-sm min-w-min font-bold bg-white-HC-dark hover:bg-lightGray-HC-white text-darkGray-HC-white-underline hover:text-darkGray-HC-dark focus:bg-ice-HC-dark"
      onClick={info.action}
      {...info.extraProps}
    >
      <div className="p-1 text-darkGray-HC-white group-hover:text-darkGray-HC-dark-underline group-first:group-hover:text-white-HC-underline group-first:text-white-HC-dark-underline">{info.icon}</div>
      <div className="p-1 text-darkGray-HC-white group-hover:text-darkGray-HC-dark-underline group-first:group-hover:text-white-HC-underline group-first:text-white-HC-dark-underline">{info.name}</div>
    </Button>
  );
  
  return (
    <>
      <DeleteModal open={deleteOpen} onClose={() => setDeleteOpen(false)} idLogin={userData["id"]} resourceId={learningObject.id}  />
      <HomologationModal open={submitOpen} onClose={() => setSubmitOpen(false)} name={learningObject.name} id={learningObject.submission_id} setSubmitted={setSubmitted}/>
      <ShareModal open={shareOpen} onClose={() => setShareOpen(false)} learningObject={learningObject} title='Compartilhando recurso' id={learningObject.id} type='recurso'/>
      <ReportModal
        learningObject={learningObject}
        open={reportOpen}
        setReported={setReported}
        onClose={() => setReportOpen(false)}
      />
      {/* Verifica se o usuário está logado antes de abrir o modal de colecionar */}
      {userData && <CollectModal open={collectOpen} onClose={() => setCollectOpen(false)} idLogin={userData["id"]} resourceId={learningObject.id} />}
      {!submitted ?
        <div className="flex justify-start py-4 max-sm:no-scrollbar max-sm:overflow-x-auto animate-scrollHint">
          {buttonInfo.map(genButton)}
        </div>
        :
        <div className="flex justify-start py-4 max-sm:no-scrollbar max-sm:overflow-x-auto animate-scrollHint text-red-800">
          {genButton(buttonInfo[1] || buttonInfo[2])}
      </div>
      }
    </>
  );
}