Dwinzo_dev/app/src/components/ui/menu/menu.tsx

import React, { useState } from "react";
import { ArrowIcon } from "../../icons/ExportCommonIcons";
import { toggleTheme } from "../../../utils/theme";
import { useNavigate } from "react-router-dom";
import useVersionHistoryStore from "../../../store/store";
import { useSubModuleStore } from "../../../store/useModuleStore";

interface MenuBarProps {
  setOpenMenu: (isOpen: boolean) => void; // Function to update menu state
}

const MenuBar: React.FC<MenuBarProps> = ({ setOpenMenu }) => {
  const navigate = useNavigate();
  const [activeMenu, setActiveMenu] = useState<string | null>(null);
  const [activeSubMenu, setActiveSubMenu] = useState<string | null>(null);

  const { setVersionHistory } = useVersionHistoryStore();
  const { setSubModule } = useSubModuleStore();

  // State to track selection for all menu items
  const [selectedItems, setSelectedItems] = useState<Record<string, boolean>>(
    {}
  );

  // Function to toggle selection for a specific item
  const toggleSelection = (itemName: string) => {
    setSelectedItems((prev) => ({
      ...prev,
      [itemName]: !prev[itemName], // Toggle the selection state
    }));
  };

  function handleThemeChange() {
    toggleTheme();
    window.location.reload();
  }

  const savedTheme: string | null = localStorage.getItem("theme") ?? "light";


  const handleLogout = () => {
    localStorage.clear(); // 1. Clear all localStorage
    navigate('/');        // 2. Redirect to homepage
  };

  return (
    <div
      className="menu-bar"
      onPointerLeave={() => {
        setOpenMenu(false);
      }}
    >
      {/* Top-level menu buttons */}
      <div className="menu-buttons">
        {/* File Menu */}
        <div
          className="menu-button-container"
          onMouseEnter={() => setActiveMenu("File")}
          onMouseLeave={() => {
            setActiveMenu(null);
            setActiveSubMenu(null);
          }}
        >
          <div className="menu-button">
            File
            <span className="dropdown-icon">
              <ArrowIcon />
            </span>
          </div>

          {/* File Dropdown */}
          {activeMenu === "File" && (
            <div className="dropdown-menu">
              {/* New File */}
              <div
                className="menu-item-container"
                onClick={() => toggleSelection("New File")}
              >
                <div className="menu-item">
                  <span>New File</span>
                  <div className="menu-item-right">
                    <span className="shortcut">Ctrl + N</span>
                  </div>
                </div>
              </div>

              {/* Open Local File */}
              <div
                className="menu-item-container"
                onClick={() => toggleSelection("Open Local File")}
              >
                <div className="menu-item">
                  <span>Open Local File</span>
                  <div className="menu-item-right">
                    <span className="shortcut">Ctrl + O</span>
                  </div>
                </div>
              </div>

              {/* Save Version */}
              <div
                className="menu-item-container"
                onClick={() => toggleSelection("Save Version")}
              >
                <div className="menu-item">
                  <span>Save Version</span>
                </div>
                <div className="split"></div>
              </div>

              {/* Make a Copy */}
              <div
                className="menu-item-container"
                onClick={() => toggleSelection("Make a Copy")}
              >
                <div className="menu-item">
                  <span>Make a Copy</span>
                </div>
              </div>

              {/* Share */}
              <div
                className="menu-item-container"
                onClick={() => toggleSelection("Share")}
              >
                <div className="menu-item">
                  <span>Share</span>
                </div>
              </div>

              {/* Rename */}
              <div
                className="menu-item-container"
                onClick={() => toggleSelection("Rename")}
              >
                <div className="menu-item">
                  <span>Rename</span>
                </div>
                <div className="split"></div>
              </div>

              {/* Import */}
              <div
                className="menu-item-container"
                onClick={() => toggleSelection("Import")}
              >
                <div className="menu-item">
                  <span>Import</span>
                </div>
              </div>

              {/* Close File */}
              <div
                className="menu-item-container"
                onClick={() => toggleSelection("Close File")}
              >
                <div className="menu-item">
                  <span>Close File</span>
                </div>
              </div>
            </div>
          )}
        </div>

        {/* Edit Menu */}
        <div
          className="menu-button-container"
          onMouseEnter={() => setActiveMenu("Edit")}
          onMouseLeave={() => {
            setActiveMenu(null);
            setActiveSubMenu(null);
          }}
        >
          <div className="menu-button">
            Edit
            <span className="dropdown-icon">
              <ArrowIcon />
            </span>
          </div>

          {/* Edit Dropdown */}
          {activeMenu === "Edit" && (
            <div className="dropdown-menu">
              {/* Undo */}
              <div
                className="menu-item-container"
                onClick={() => toggleSelection("Undo")}
              >
                <div className="menu-item">
                  <span>Undo</span>
                  <div className="menu-item-right">
                    <span className="shortcut">Ctrl + Z</span>
                  </div>
                </div>
              </div>

              {/* Redo */}
              <div
                className="menu-item-container"
                onClick={() => toggleSelection("Redo")}
              >
                <div className="menu-item">
                  <span>Redo</span>
                  <div className="menu-item-right">
                    <span className="shortcut">Ctrl + Shift + Z</span>
                  </div>
                </div>
                <div className="split"></div>
              </div>

              {/* Undo History */}
              <div
                className="menu-item-container"
                onClick={() => toggleSelection("Undo History")}
              >
                <div className="menu-item">
                  <span>Undo History</span>
                </div>
              </div>

              {/* Redo History */}
              <div
                className="menu-item-container"
                onClick={() => toggleSelection("Redo History")}
              >
                <div className="menu-item">
                  <span>Redo History</span>
                </div>
                <div className="split"></div>
              </div>

              {/* Find */}
              <div
                className="menu-item-container"
                onClick={() => toggleSelection("Find")}
              >
                <div className="menu-item">
                  <span>Find</span>
                  <div className="menu-item-right">
                    <span className="shortcut">Ctrl + F</span>
                  </div>
                </div>
              </div>

              {/* Delete */}
              <div
                className="menu-item-container"
                onClick={() => toggleSelection("Delete")}
              >
                <div className="menu-item">
                  <span>Delete</span>
                </div>
              </div>

              {/* Select by... */}
              <div
                className="menu-item-container"
                onClick={() => toggleSelection("Select by...")}
              >
                <div className="menu-item">
                  <span>Select by...</span>
                </div>
              </div>

              {/* Keymap */}
              <div
                className="menu-item-container"
                onClick={() => toggleSelection("Keymap")}
              >
                <div className="menu-item">
                  <span>Keymap</span>
                </div>
              </div>
            </div>
          )}
        </div>

        {/* View Menu */}
        <div
          className="menu-button-container"
          onMouseEnter={() => setActiveMenu("View")}
          onMouseLeave={() => {
            setActiveMenu(null);
            setActiveSubMenu(null);
          }}
        >
          <div className="menu-button">
            View
            <span className="dropdown-icon">
              <ArrowIcon />
            </span>
          </div>

          {/* View Dropdown */}
          {activeMenu === "View" && (
            <div className="dropdown-menu">
              {/* Grid */}
              <div
                className={"menu-item-container"}
                onClick={() => toggleSelection("Grid")}
              >
                <div className="menu-item">
                  <span>Grid</span>
                </div>
              </div>

              {/* Gizmo */}
              <div
                className="menu-item-container"
                onMouseEnter={() => setActiveSubMenu("View-Gizmo")}
                onMouseLeave={() => setActiveSubMenu(null)}
              >
                <div className="menu-item">
                  <span>Gizmo</span>
                  <span className="dropdown-icon">
                    <ArrowIcon />
                  </span>
                </div>
                <div className="split"></div>

                {/* Gizmo Submenu */}
                {activeSubMenu === "View-Gizmo" && (
                  <div className="submenu">
                    {/* Visibility */}
                    <div
                      className="submenu-item"
                      onClick={() => toggleSelection("Visibility")}
                    >
                      <span>
                        {selectedItems["Visibility"] && "✓ "}
                        Visibility
                      </span>
                    </div>
                    <div className="split"></div>

                    {/* Cube view */}
                    <div
                      className="submenu-item"
                      onClick={() => toggleSelection("Cube view")}
                    >
                      <span>Cube view</span>
                    </div>

                    {/* Sphere view */}
                    <div
                      className="submenu-item"
                      onClick={() => toggleSelection("Sphere view")}
                    >
                      <span>Sphere view</span>
                    </div>
                  </div>
                )}
              </div>

              {/* Zoom */}
              <div
                className="menu-item-container"
                onClick={() => toggleSelection("Zoom")}
              >
                <div className="menu-item">
                  <span>Zoom</span>
                </div>
              </div>

              {/* Full Screen */}
              <div
                className="menu-item-container"
                onClick={() => toggleSelection("Full Screen")}
              >
                <div className="menu-item">
                  <span>Full Screen</span>
                  <div className="menu-item-right">
                    <span className="shortcut">F11</span>
                  </div>
                </div>
              </div>
            </div>
          )}
        </div>

        {/* Version History Menu */}
        <div
          className="menu-button-container"
          onMouseEnter={() => setActiveMenu("Version history")}
          onMouseLeave={() => {
            setActiveMenu(null);
            setActiveSubMenu(null);
          }}
          onClick={() => {
            setVersionHistory(true);
            setSubModule("properties");
          }}
        >
          <div className="menu-button">Version history</div>
        </div>

        {/* Export As Menu */}
        <div
          className="menu-button-container"
          onMouseEnter={() => setActiveMenu("Export as...")}
          onMouseLeave={() => {
            setActiveMenu(null);
            setActiveSubMenu(null);
          }}
        >
          <div className="menu-button">Export as...</div>
        </div>

        <div
          className="menu-button-container"
          onMouseEnter={() => setActiveMenu("theme")}
          onMouseLeave={() => {
            setActiveMenu(null);
            setActiveSubMenu(null);
          }}
          onClick={() => {
            handleThemeChange();
          }}
        >
          <div className="menu-button">
            Theme <div className="value">{savedTheme}</div>
          </div>
        </div>

        {/* Apps Menu */}
        {/* <div
          className="menu-button-container"
          onMouseEnter={() => setActiveMenu("Apps")}
          onMouseLeave={() => {
            setActiveMenu(null);
            setActiveSubMenu(null);
          }}
        >
          <div className="menu-button">
            Apps
            <span className="dropdown-icon">
              <ArrowIcon />
            </span>
          </div>

          {activeMenu === "Apps" && (
            <div className="dropdown-menu">
              <div
                className="menu-item-container"
                onClick={() => toggleSelection("New App")}
              >
                <div className="menu-item">
                  <span>
                    
                    New App
                  </span>
                </div>
                <div className="split"></div>
              </div>

              <div
                className="menu-item-container"
                onClick={() => toggleSelection("Work-flow Monitor")}
              >
                <div className="menu-item">
                  <span>
                    
                    Work-flow Monitor
                  </span>
                </div>
              </div>

              <div
                className="menu-item-container"
                onClick={() => toggleSelection("Temperature Visualizer")}
              >
                <div className="menu-item">
                  <span>
                    
                    Temperature Visualizer
                  </span>
                </div>
              </div>

              <div
                className="menu-item-container"
                onClick={() => toggleSelection("View all")}
              >
                <div className="menu-item">
                  <span>
                    
                    View all
                  </span>
                </div>
              </div>
            </div>
          )}
        </div> */}

        {/* Help Menu */}
        <div
          className="menu-button-container"
          onMouseEnter={() => setActiveMenu("Help")}
          onMouseLeave={() => {
            setActiveMenu(null);
            setActiveSubMenu(null);
          }}
        >
          <div className="menu-button">
            Help
            <span className="dropdown-icon">
              <ArrowIcon />
            </span>
          </div>

          {/* Help Dropdown */}
          {activeMenu === "Help" && (
            <div className="dropdown-menu">
              {/* Shortcuts */}
              <div
                className="menu-item-container"
                onClick={() => toggleSelection("Shortcuts")}
              >
                <div className="menu-item">
                  <span>Shortcuts</span>
                  <div className="menu-item-right">
                    <span className="shortcut">Ctrl + Shift + ?</span>
                  </div>
                </div>
              </div>

              {/* Manual */}
              <div
                className="menu-item-container"
                onClick={() => toggleSelection("Manual")}
              >
                <div className="menu-item">
                  <span>Manual</span>
                </div>
              </div>

              {/* Video Tutorials */}
              <div
                className="menu-item-container"
                onClick={() => toggleSelection("Video Tutorials")}
              >
                <div className="menu-item">
                  <span>Video Tutorials</span>
                </div>
              </div>

              {/* Report a bug */}
              <div
                className="menu-item-container"
                onClick={() => toggleSelection("Report a bug")}
              >
                <div className="menu-item">
                  <span>Report a bug</span>
                </div>
              </div>
            </div>
          )}
        </div>
        <div className="menu-button-container" onClick={handleLogout}>
          <div className="menu-button">Log out</div>
        </div>
      </div>
    </div>
  );
};

export default MenuBar;