import React, { useState } from "react";

const MenuBar = () => {
  const [activeMenu, setActiveMenu] = useState<string | null>(null);
  const [activeSubMenu, setActiveSubMenu] = useState<string | null>(null);

  // 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
    }));
  };

  return (
    <div className="menu-bar">
      {/* 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">▾</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>
                    {selectedItems["New File"] && "✓ "}
                    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>
                    {selectedItems["Open Local File"] && "✓ "}
                    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>
                    {selectedItems["Save Version"] && "✓ "}
                    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>
                    {selectedItems["Make a Copy"] && "✓ "}
                    Make a Copy
                  </span>
                </div>
              </div>

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

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

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

              {/* Close File */}
              <div
                className="menu-item-container"
                onClick={() => toggleSelection("Close File")}
              >
                <div className="menu-item">
                  <span>
                    {selectedItems["Close File"] && "✓ "}
                    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">▾</span>
          </div>

          {/* Edit Dropdown */}
          {activeMenu === "Edit" && (
            <div className="dropdown-menu">
              {/* Undo */}
              <div
                className="menu-item-container"
                onClick={() => toggleSelection("Undo")}
              >
                <div className="menu-item">
                  <span>
                    {selectedItems["Undo"] && "✓ "}
                    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>
                    {selectedItems["Redo"] && "✓ "}
                    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>
                    {selectedItems["Undo History"] && "✓ "}
                    Undo History
                  </span>
                </div>
              </div>

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

              {/* Find */}
              <div
                className="menu-item-container"
                onClick={() => toggleSelection("Find")}
              >
                <div className="menu-item">
                  <span>
                    {selectedItems["Find"] && "✓ "}
                    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>
                    {selectedItems["Delete"] && "✓ "}
                    Delete
                  </span>
                </div>
              </div>

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

              {/* Keymap */}
              <div
                className="menu-item-container"
                onClick={() => toggleSelection("Keymap")}
              >
                <div className="menu-item">
                  <span>
                    {selectedItems["Keymap"] && "✓ "}
                    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">▾</span>
          </div>

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

              {/* Gizmo */}
              <div
                className="menu-item-container"
                onMouseEnter={() => setActiveSubMenu("View-Gizmo")}
                onMouseLeave={() => setActiveSubMenu(null)}
              >
                <div className="menu-item">
                  <span>
                    {selectedItems["Gizmo"] && "✓ "}
                    Gizmo
                  </span>
                  <span className="icon">▾</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>

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

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

                    {/* Custom settings */}
                    <div
                      className="submenu-item"
                      onClick={() => toggleSelection("Custom settings")}
                    >
                      <span>
                        {selectedItems["Custom settings"] && "✓ "}
                        Custom settings
                      </span>
                    </div>
                  </div>
                )}
              </div>

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

              {/* Full Screen */}
              <div
                className="menu-item-container"
                onClick={() => toggleSelection("Full Screen")}
              >
                <div className="menu-item">
                  <span>
                    {selectedItems["Full Screen"] && "✓ "}
                    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);
          }}
        >
          <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>

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

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

              </div>

              {/* Work-flow Monitor */}
              <div
                className="menu-item-container"
                onClick={() => toggleSelection("Work-flow Monitor")}
              >
                <div className="menu-item">
                  <span>
                    {selectedItems["Work-flow Monitor"] && "✓ "}
                    Work-flow Monitor
                  </span>
                </div>
              </div>

              {/* Temperature Visualizer */}
              <div
                className="menu-item-container"
                onClick={() => toggleSelection("Temperature Visualizer")}
              >
                <div className="menu-item">
                  <span>
                    {selectedItems["Temperature Visualizer"] && "✓ "}
                    Temperature Visualizer
                  </span>
                </div>
              </div>

              {/* View all */}
              <div
                className="menu-item-container"
                onClick={() => toggleSelection("View all")}
              >
                <div className="menu-item">
                  <span>
                    {selectedItems["View all"] && "✓ "}
                    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">▾</span>
          </div>

          {/* Help Dropdown */}
          {activeMenu === "Help" && (
            <div className="dropdown-menu">
              {/* Shortcuts */}
              <div
                className="menu-item-container"
                onClick={() => toggleSelection("Shortcuts")}
              >
                <div className="menu-item">
                  <span>
                    {selectedItems["Shortcuts"] && "✓ "}
                    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>
                    {selectedItems["Manual"] && "✓ "}
                    Manual
                  </span>
                </div>
              </div>

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

              {/* Report a bug */}
              <div
                className="menu-item-container"
                onClick={() => toggleSelection("Report a bug")}
              >
                <div className="menu-item">
                  <span>
                    {selectedItems["Report a bug"] && "✓ "}
                    Report a bug
                  </span>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

export default MenuBar;