import React from "react";
import { ToggleSidebarIcon } from "../../icons/HeaderIcons";
import { LogoIcon } from "../../icons/Logo";
import FileMenu from "../../ui/FileMenu";
import { useToggleStore } from "../../../store/useUIToggleStore";
import useModuleStore from "../../../store/useModuleStore";
import { useNavigate } from "react-router-dom";
import useRestStates from "../../../hooks/useResetStates";

const Header: React.FC = () => {
  const { toggleUILeft, toggleUIRight, setToggleUI } = useToggleStore();
  const { activeModule } = useModuleStore();
  const navigate = useNavigate();
  const { resetStates } = useRestStates();

  return (
    <div className="header-container">
      <div className="header-content">
        <button
          className="logo-container"
          onClick={() => {
            resetStates();
            navigate("/Dashboard")
          }}
          title="Back to Dashboard"
        >
          <LogoIcon />
        </button>
        <div className="header-title">
          <FileMenu />
        </div>
      </div>
      <button
        id="toggle-leftSidebar-ui-button"
        className={`toggle-sidebar-ui-button ${!toggleUILeft ? "active" : ""}`}
        onClick={() => {
          if (activeModule !== "market") {
            setToggleUI(!toggleUILeft, toggleUIRight);
            localStorage.setItem("navBarUiLeft", JSON.stringify(!toggleUILeft));
          }
        }}
      >
        <div className="tooltip">
          {toggleUILeft ? "Hide" : "Show"} sidebar (ctrl + [)
        </div>
        <ToggleSidebarIcon />
      </button>
    </div >
  );
};

export default Header;
