import React from "react";

import {
  UndoIcon,
  RedoIcon,
  ESCIcon,
  HelpIcon,
  FindIcon,
  InfoIcon,
  CurserIcon,
  DeleteIcon,
  FreeHandIcon,
  MeasurementToolIcon,
  WallToolIcon,
  ZoneToolIcon,
  AisleToolIcon,
  FloorToolIcon,
  MoveIcon,
  RotateIcon,
  ToogleViewIcon,
  UIVisiblityIcon,
  FirstPersonViewIcon,
  BuilderIcon,
  SimulationIcon,
  VisualizationIcon,
  MarketplaceIcon,
  CopyIcon,
  PasteIcon,
  DublicateIcon,
  DuplicateInstanceIcon,
  PlayIcon,
} from "../icons/ShortcutIcons";
import {
  CloseIcon,
  EyeCloseIcon,
  PerformanceStatsIcon,
} from "../icons/ExportCommonIcons";

interface ShortcutItem {
  keys: string[];
  name?: string;
  description: string;
  icon: any;
}

interface ShortcutGroup {
  category: string;
  items: ShortcutItem[];
}

interface ShortcutHelperProps {
  setShowShortcuts: (value: boolean) => void;
}

const ShortcutHelper: React.FC<ShortcutHelperProps> = ({
  setShowShortcuts,
}) => {
  const shortcuts: ShortcutGroup[] = [
    // Essential
    {
      category: "Essential",
      items: [
        {
          keys: ["CTRL", "+", "Z"],
          name: "Undo",
          description: "Undo Last action",
          icon: <UndoIcon />,
        },
        {
          keys: ["CTRL", "+", "Y"],
          name: "Redo",
          description: "Redo Last action",
          icon: <RedoIcon />,
        },
        {
          keys: ["ESC"],
          name: "Escape",
          description: "Reset to Cursor & Stop Playback",
          icon: <ESCIcon />,
        },
        {
          keys: ["CTRL", "+", "H"],
          name: "Version History",
          description: "Open Version History",
          icon: <HelpIcon />,
        },
        {
          keys: ["CTRL", "+", "F"],
          name: "Find",
          description: "Find / Search Functionality",
          icon: <FindIcon />,
        },
        {
          keys: ["CTRL", "+", "SHIFT", "+", "?"],
          name: "Info",
          description: "Show Shortcut Info",
          icon: <InfoIcon />,
        },
        {
          keys: ["L"],
          name: "Log",
          description: "Show Log list",
          icon: <InfoIcon />,
        },
      ],
    },
    // Tools
    {
      category: "Tools",
      items: [
        {
          keys: ["V"],
          name: "Cursor Tool",
          description: "Activate Cursor tool",
          icon: <CurserIcon />,
        },
        {
          keys: ["X"],
          name: "Delete Tool",
          description: "Activate Delete tool",
          icon: <DeleteIcon />,
        },
        {
          keys: ["H"],
          name: "Freehand Tool",
          description: "Activate Free-Hand tool",
          icon: <FreeHandIcon />,
        },
        {
          keys: ["M"],
          name: "Measurement Tool",
          description: "Activate Measurement tool",
          icon: <MeasurementToolIcon />,
        },
        {
          keys: ["Q", "OR", "6"],
          name: "Wall Tool",
          description: "Select Wall floor tool (2D)",
          icon: <WallToolIcon />,
        },
        {
          keys: ["E", "OR", "8"],
          name: "Zone Tool",
          description: "Select Draw zone tool (2D)",
          icon: <ZoneToolIcon />,
        },
        {
          keys: ["R", "OR", "7"],
          name: "Aisle Tool",
          description: "Select Aisle floor tool (2D)",
          icon: <AisleToolIcon />,
        },
        {
          keys: ["T", "OR", "9"],
          name: "Floor Tool",
          description: "Select Draw floor tool (2D)",
          icon: <FloorToolIcon />,
        },
        {
          keys: ["G"],
          name: "Move Asset",
          description: "Move Selected Asset",
          icon: <MoveIcon />,
        },
        {
          keys: ["R"],
          name: "Rotate Asset",
          description: "Rotate Selected Asset",
          icon: <RotateIcon />,
        },
      ],
    },
    // View & Navigation
    {
      category: "View & Navigation",
      items: [
        {
          keys: ["TAB"],
          name: "Toggle View",
          description: "Toggle between 2D & 3D views (Builder)",
          icon: <ToogleViewIcon />,
        },
        {
          keys: ["CTRL", "+", "\\"],
          name: "Toggle UI",
          description: "Toggle UI Visibility",
          icon: <UIVisiblityIcon />,
        },
        {
          keys: ["CTRL", "+", "["],
          name: "Toggle UI",
          description: "Left Sidebar Visibility",
          icon: <UIVisiblityIcon />,
        },
        {
          keys: ["CTRL", "+", "]"],
          name: "Toggle UI",
          description: "Right Sidebar Visibility",
          icon: <UIVisiblityIcon />,
        },
        {
          keys: ["/"],
          name: "First Person View",
          description: "Switch to First-person View",
          icon: <FirstPersonViewIcon />,
        },
      ],
    },
    // Module Switching
    {
      category: "Module Switching",
      items: [
        {
          keys: ["1"],
          name: "Builder",
          description: "Switch to Builder module",
          icon: <BuilderIcon />,
        },
        {
          keys: ["2"],
          name: "Simulation",
          description: "Switch to Simulation module",
          icon: <SimulationIcon />,
        },
        {
          keys: ["3"],
          name: "Visualization",
          description: "Switch to Visualization module",
          icon: <VisualizationIcon />,
        },
        {
          keys: ["4"],
          name: "Marketplace",
          description: "Switch to Marketplace module",
          icon: <MarketplaceIcon />,
        },
      ],
    },
    // Selection
    {
      category: "Selection",
      items: [
        {
          keys: ["CTRL", "+", "C"],
          name: "Copy",
          description: "Copy an Asset",
          icon: <CopyIcon />,
        },
        {
          keys: ["CTRL", "+", "V"],
          name: "Paste",
          description: "Paste an Asset",
          icon: <PasteIcon />,
        },
        {
          keys: ["CTRL", "+", "D"],
          name: "Duplicate",
          description: "Duplicate an Asset",
          icon: <DublicateIcon />,
        },
        {
          keys: ["ALT", "+", "D"],
          name: "Duplicate (Instance)",
          description: "Duplicate an Instanced Asset",
          icon: <DuplicateInstanceIcon />,
        },
      ],
    },
    // Simulation
    {
      category: "Simulation",
      items: [
        {
          keys: ["CTRL", "+", "P"],
          name: "Play",
          description: "Play Simulation",
          icon: <PlayIcon />,
        },
        {
          keys: ["H"],
          name: "Hide Player",
          description: "Hide Simulation Player",
          icon: <EyeCloseIcon />,
        },
        {
          keys: ["F1"],
          name: "Stats",
          description: "Show Scene Stats",
          icon: <PerformanceStatsIcon />,
        },
      ],
    },
  ];

  const [activeCategory, setActiveCategory] =
    React.useState<string>("Essential");

  const activeShortcuts =
    shortcuts.find((group) => group.category === activeCategory)?.items ?? [];

  return (
    <div className="shortcut-helper-container">
      <button
        id="close-shortcuts-helper"
        className="close-button"
        title="close-btn"
        onClick={() => {
          setShowShortcuts(false);
        }}
      >
        <CloseIcon />
      </button>
      <div className="header">
        <div className="header-wrapper">
          {shortcuts.map((group) => (
            <button
              id={group.category}
              key={group.category}
              onClick={() => setActiveCategory(group.category)}
              className={activeCategory === group.category ? "active" : ""}
            >
              {group.category}
            </button>
          ))}
        </div>
      </div>

      <div
        className={`shortcut-wrapper ${
          activeShortcuts.length === 1 ? "single-item" : ""
        }`}
      >
        {activeShortcuts.map((item) => (
          <div
            key={`${item.name}-${item.keys.join("")}`}
            className="shortcut-item"
          >
            <div className="shortcut-intro">
              <div className="icon">{item.icon}</div>
              <div className="value-wrapper">
                <div className="name">{item.name}</div>
                <div className="description">{item.description}</div>
              </div>
            </div>
            <div className="keys">
              {item.keys.map((key, i) => (
                <span
                  key={`${key}-${i}`}
                  className={`key${key === "+" || key === "OR" ? " add" : ""}`}
                >
                  {key}
                </span>
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default ShortcutHelper;
