Dwinzo_dev/app/src/utils/shortcutkeys/handleShortcutKeys.ts

// Importing React and useEffect from React library
import React, { useEffect } from "react";
// Importing the necessary hooks and types from React and TypeScript
import useModuleStore, { useThreeDStore } from "../../store/useModuleStore";
import useToggleStore from "../../store/useUIToggleStore";
import { useActiveSubTool, useActiveTool, useAddAction, useDeleteTool, useSelectedWallItem, useToggleView, useToolMode } from "../../store/store";
import { usePlayButtonStore } from "../../store/usePlayButtonStore";

const KeyPressListener: React.FC = () => {
    // Function to detect if Shift, Ctrl, Alt, or combinations are pressed
    const detectModifierKeys = (event: KeyboardEvent): string => {
        const modifiers = [
            event.ctrlKey ? "Ctrl" : "",
            event.altKey ? "Alt" : "",
            event.shiftKey ? "Shift" : "",
            event.metaKey ? "Meta" : "" // Add support for Command/Win key
        ].filter(Boolean);

        // Ignore modifier keys when they're pressed alone
        const isModifierKey = [
            "Control", "Shift", "Alt", "Meta",
            "Ctrl", "AltGraph", "OS" // Additional modifier key aliases
        ].includes(event.key);

        const mainKey = isModifierKey ? "" : event.key.toUpperCase();

        // Handle special cases for keys with different representations
        const normalizedKey = mainKey === " " ? "Space" : mainKey;

        // Build the combination string
        if (modifiers.length > 0 && normalizedKey) {
            return `${modifiers.join("+")}+${normalizedKey}`;
        } else if (modifiers.length > 0) {
            return modifiers.join("+");
        } else {
            return normalizedKey;
        }
    };

    // Importing the necessary hooks from the store
    const { activeModule, setActiveModule } = useModuleStore();
    const { setActiveSubTool } = useActiveSubTool();
    const { toggleUI, setToggleUI } = useToggleStore();
    const { setToggleThreeD } = useThreeDStore();
    const { setToolMode } = useToolMode();
    const { setIsPlaying } = usePlayButtonStore();

    // wall options
    const { toggleView, setToggleView } = useToggleView();
    const { setDeleteTool } = useDeleteTool();
    const { setAddAction } = useAddAction();
    const { setSelectedWallItem } = useSelectedWallItem();
    const { setActiveTool } = useActiveTool();

    useEffect(() => {
        // Function to handle keydown events
        const handleKeyPress = (event: KeyboardEvent) => {

            const activeElement = document.activeElement;

            const isTyping = 
              activeElement instanceof HTMLInputElement ||
              activeElement instanceof HTMLTextAreaElement ||
              (activeElement && activeElement.getAttribute('contenteditable') === 'true');
      
            if (isTyping) {
              return; // Don't trigger shortcuts while typing
            }

            const keyCombination = detectModifierKeys(event);
            
            // Allow default behavior for F5 and F12
            if (["F5", "F11", "F12"].includes(event.key) || keyCombination === "Ctrl+R") {
                return;
            }

            // Prevent default action for the key press
            event.preventDefault();

            // Detect the key combination pressed
            if (keyCombination) {
                // Check for specific key combinations to switch modules
                if (keyCombination === "1" && !toggleView) {
                    setActiveTool("cursor");
                    setActiveSubTool("cursor");
                    setActiveModule("builder");
                }
                if (keyCombination === "2" && !toggleView) {
                    setActiveTool("cursor");
                    setActiveSubTool("cursor");
                    setActiveModule("simulation");
                }
                if (keyCombination === "3" && !toggleView) {
                    setActiveTool("cursor");
                    setActiveSubTool("cursor");
                    setActiveModule("visualization");
                }
                if (keyCombination === "4" && !toggleView) {
                    setActiveTool("cursor");
                    setActiveSubTool("cursor");
                    setToggleUI(false);
                    setActiveModule("market");
                }

                // sidebar toggle
                if (keyCombination === "Ctrl+." && activeModule !== "market") {
                    setToggleUI(!toggleUI);
                }

                // tools toggle
                if (keyCombination === "V") {
                    setActiveTool("cursor");
                    setActiveSubTool("cursor");
                }
                if (keyCombination === "X") {
                    setActiveTool("delete");
                    setActiveSubTool("delete");
                }
                if (keyCombination === "H") {
                    setActiveTool("free-hand");
                    setActiveSubTool("free-hand");
                }

                // player toggle
                if (keyCombination === "Ctrl+P" && !toggleView) {
                    setIsPlaying(true);
                }

                // builder key combination
                if (activeModule === "builder") {
                    if (keyCombination === "TAB") {
                        if (toggleView) {
                            setToggleView(false);
                            setToggleThreeD(true);
                            setActiveTool("cursor");
                        } else {
                            setSelectedWallItem(null);
                            setDeleteTool(false);
                            setAddAction(null);
                            setToggleView(true);
                            setToggleThreeD(false);
                            setActiveTool("cursor");
                        }
                    }
                    // builder tools
                    if (toggleView) {
                        if (keyCombination === "Q" || keyCombination === "6") {
                            setActiveTool("draw-wall");
                            setToolMode("Wall");
                        }
                        if (keyCombination === "R" || keyCombination === "7") {
                            setActiveTool("draw-aisle");
                            setToolMode("Aisle");
                        }
                        if (keyCombination === "E" || keyCombination === "8") {
                            setActiveTool("draw-zone");
                            setToolMode("Zone");
                        }
                        if (keyCombination === "T" || keyCombination === "9") {
                            setActiveTool("draw-floor");
                            setToolMode("Floor");
                        }
                    }
                    if (keyCombination === "M") {
                        setActiveTool("measure");
                        setToolMode("MeasurementScale");
                    }
                }

                // Undo redo
                if (keyCombination === "Ctrl+Z") {
                    // Handle undo action here
                }
                if (keyCombination === "Ctrl+Y" || keyCombination === "Ctrl+Shift+Z") {
                    // Handle redo action here
                }

                // cleanup function to remove event listener
                if (keyCombination === "ESCAPE") {
                    setActiveTool("cursor");
                    setIsPlaying(false);
                }
            }
        };

        // Add event listener for keydown
        window.addEventListener("keydown", handleKeyPress);

        // Cleanup function to remove event listener
        return () => {
            window.removeEventListener("keydown", handleKeyPress);
        };
    }, [activeModule, toggleUI, toggleView]); // Empty dependency array ensures this runs only once

    return null; // No UI component to render, so return null
};

export default KeyPressListener;