riseup-squad23/src/components/Sidebar.jsx

import React, { useState, useEffect } from "react";
import { Link, useNavigate } from "react-router-dom";
import MobileMenuToggle from "./MobileMenuToggle";
import ToggleSidebar from "./ToggleSidebar";
import { useAuth } from "./utils/AuthProvider";

import PacienteItems from "../data/sidebar-items-paciente.json"
import DoctorItems from "../data/sidebar-items-medico.json"
import admItems from "../data/sidebar-items-adm.json"
import SecretariaItems from "../data/sidebar-items-secretaria.json"
import FinanceiroItems from "../data/sidebar-items-financeiro.json"

import { UserInfos } from "./utils/Functions-Endpoints/General";

function Sidebar({ menuItems }) {
  const [isActive, setIsActive] = useState(true);
  const [openSubmenu, setOpenSubmenu] = useState(null);
  const [isMobile, setIsMobile] = useState(false);
  const [showLogoutModal, setShowLogoutModal] = useState(false);
  const navigate = useNavigate();
 
  const [roleUser, setRoleUser] = useState([])

  const {getAuthorizationHeader} = useAuth();

  const authHeader = getAuthorizationHeader();

  let pathname = window.location.pathname.split("/")[1] 


// useEffect para definir quais toggle da sidebar devem aparecer 
  useEffect(() => {
	let teste = localStorage.getItem("roleUser")
     setRoleUser(teste)
	   
  }, [authHeader])



  // Detecta se é mobile/tablet
  useEffect(() => {
    const checkScreenSize = () => {
      const mobile = window.innerWidth < 992;
      setIsMobile(mobile);
      setIsActive(!mobile);
    };


    checkScreenSize();
    window.addEventListener("resize", checkScreenSize);
    return () => window.removeEventListener("resize", checkScreenSize);
  }, []);

  const toggleSidebar = () => setIsActive(!isActive);
  const handleSubmenuClick = (submenuName) =>
    setOpenSubmenu(openSubmenu === submenuName ? null : submenuName);

  const handleLogoutClick = () => setShowLogoutModal(true);

  const handleLogoutConfirm = async () => {
    try {
      const token =
        localStorage.getItem("token") ||
        localStorage.getItem("authToken") ||
        localStorage.getItem("userToken") ||
        localStorage.getItem("access_token") ||
        sessionStorage.getItem("token") ||
        sessionStorage.getItem("authToken");

      if (token) {
        const response = await fetch(
          "https://mock.apidog.com/m1/1053378-0-default/auth/v1/logout",
          {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
              Authorization: `Bearer ${token}`,
            },
          }
        );

        if (response.status === 204) console.log("Logout realizado com sucesso");
        else if (response.status === 401) console.log("Token inválido ou expirado");
        else {
          try {
            const errorData = await response.json();
            console.error("Erro no logout:", errorData);
          } catch {
            console.error("Erro no logout - status:", response.status);
          }
        }
      }

      clearAuthData();
      navigate("/login");
    } catch (error) {
      console.error("Erro durante logout:", error);
      clearAuthData();
      navigate("/login");
    } finally {
      setShowLogoutModal(false);
    }
  };

  const clearAuthData = () => {
    ["token","authToken","userToken","access_token","user","auth","userData"].forEach(key => {
      localStorage.removeItem(key);
      sessionStorage.removeItem(key);
    });

    if (window.caches) {
      caches.keys().then(names => {
        names.forEach(name => {
          if (name.includes("auth") || name.includes("api")) caches.delete(name);
        });
      });
    }
  };

  const handleLogoutCancel = () => setShowLogoutModal(false);


  const renderLink = (item) => {
    if (item.url && item.url.startsWith("/")) {
      return (
        <Link to={item.url} className="sidebar-link">
          {item.icon && <i className={`bi bi-${item.icon}`}></i>}
          <span>{item.name}</span>
        </Link>
      );
    }
    return (
      <a href={item.url} className="sidebar-link" target="_blank" rel="noreferrer">
        {item.icon && <i className={`bi bi-${item.icon}`}></i>}
        <span>{item.name}</span>
      </a>
    );
  };

  return (
    <>
      {/* Toggle e backdrop para mobile */}
      {isMobile && <MobileMenuToggle isOpen={isActive} onToggle={toggleSidebar} />}
      {isMobile && isActive && (
        <div
          className="sidebar-backdrop"
          onClick={toggleSidebar}
          style={{
            position: "fixed",
            top: 0,
            left: 0,
            width: "100vw",
            height: "100vh",
            backgroundColor: "rgba(0,0,0,0.5)",
            zIndex: 1040,
          }}
        />
      )}

      {/* Modal de Logout */}
      {showLogoutModal && (
        <div
          className="modal-overlay"
          style={{
            position: "fixed",
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            backgroundColor: "rgba(0,0,0,0.5)",
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
            zIndex: 9999,
          }}
        >
          <div
            className="modal-content"
            style={{
              backgroundColor: "white",
              padding: "2rem",
              borderRadius: "8px",
              boxShadow: "0 4px 6px rgba(0,0,0,0.1)",
              maxWidth: "400px",
              width: "90%",
            }}
          >
            <h3 style={{ marginBottom: "1rem" }}>Confirmar Logout</h3>
            <p style={{ marginBottom: "2rem" }}>Tem certeza que deseja encerrar a sessão?</p>
            <div style={{ display: "flex", gap: "1rem", justifyContent: "flex-end" }}>
              <button
                onClick={handleLogoutCancel}
                style={{
                  padding: "0.5rem 1rem",
                  border: "1px solid #ccc",
                  borderRadius: "4px",
                  backgroundColor: "transparent",
                  cursor: "pointer",
                }}
              >
                Cancelar
              </button>
              <button
                onClick={handleLogoutConfirm}
                style={{
                  padding: "0.5rem 1rem",
                  border: "none",
                  borderRadius: "4px",
                  backgroundColor: "#dc3545",
                  color: "white",
                  cursor: "pointer",
                }}
              >
                Sair
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Sidebar */}
      <div id="sidebar" className={isActive ? "active" : ""}>
        <div className="sidebar-wrapper active">
          <div className="sidebar-header">
            <div className="d-flex justify-content-between">
              <div className="logo">
                <Link to="/">
                  <h1>MediConnect</h1>
                </Link>
              </div>
              <div className="toggler">
                <button
                  type="button"
                  className="sidebar-hide d-xl-none d-block btn"
                  onClick={toggleSidebar}
                >
                  <i className="bi bi-x bi-middle"></i>
                </button>
              </div>
            </div>
          </div>

          <div className="sidebar-menu">
            <ul className="menu">

              {roleUser.includes("admin") &&
              <ToggleSidebar perfil={"administrador"} items={admItems} defaultOpen={pathname.includes("admin") } />
              }
              {roleUser.includes("admin") || roleUser.includes("secretaria") ?
              <ToggleSidebar perfil={"secretaria"} items={SecretariaItems}  defaultOpen={pathname.includes("secretaria")} />
              :
              null
              }

              {roleUser.includes("admin") || roleUser.includes("medico") ?
              <ToggleSidebar perfil={"medico"} items={DoctorItems} defaultOpen={pathname.includes("medico") } />
              :null
              }

              {roleUser.includes("admin") || roleUser.includes("financeiro") ?
              <ToggleSidebar perfil={"financeiro"} items={FinanceiroItems} defaultOpen={pathname.includes("financeiro") }  />
              :null
              }

              {roleUser.includes("admin") || roleUser.includes("paciente") ? 
              <ToggleSidebar perfil={"paciente"} items={PacienteItems}  defaultOpen={pathname.includes("paciente") } />
              : null
              }

              {/* Botão de Logout */}
              <li className="sidebar-item logout-item">
                <button 
                  className="sidebar-link logout-button"
                  onClick={handleLogoutClick}
                >
                  <i className="bi bi-box-arrow-right"></i>
                  <span>Sair</span>
                </button>
              </li>
            </ul>
          </div>

          <button className="sidebar-toggler btn x" onClick={toggleSidebar}>
            <i data-feather="x"></i>
          </button>
        </div>
      </div>
    </>
  );
}

export default Sidebar;