'use client';

import { cn } from "../../utils/cn.mjs";
import { useDevice } from "../../hooks/useDevice.mjs";
import { useEffect, useState } from "react";
import { jsx, jsxs } from "react/jsx-runtime";

//#region src/components/KeyboardShortcut/KeyboardShortcut.tsx
/**
* Enum for available keyboard keys
*/
let KeyList = /* @__PURE__ */ function(KeyList$1) {
	KeyList$1["⌘"] = "⌘";
	KeyList$1["Ctrl"] = "Ctrl";
	KeyList$1["Alt"] = "Alt";
	KeyList$1["⌥"] = "⌥";
	KeyList$1["Shift"] = "Shift";
	KeyList$1["Meta"] = "Meta";
	KeyList$1["F"] = "F";
	KeyList$1["K"] = "K";
	KeyList$1["L"] = "L";
	KeyList$1["P"] = "P";
	KeyList$1["S"] = "S";
	KeyList$1["A"] = "A";
	KeyList$1["B"] = "B";
	KeyList$1["C"] = "C";
	KeyList$1["D"] = "D";
	KeyList$1["E"] = "E";
	KeyList$1["G"] = "G";
	KeyList$1["H"] = "H";
	KeyList$1["I"] = "I";
	KeyList$1["J"] = "J";
	KeyList$1["M"] = "M";
	KeyList$1["N"] = "N";
	KeyList$1["O"] = "O";
	KeyList$1["Q"] = "Q";
	KeyList$1["R"] = "R";
	KeyList$1["T"] = "T";
	KeyList$1["U"] = "U";
	KeyList$1["V"] = "V";
	KeyList$1["W"] = "W";
	KeyList$1["X"] = "X";
	KeyList$1["Y"] = "Y";
	KeyList$1["Z"] = "Z";
	KeyList$1["Enter"] = "Enter";
	KeyList$1["Escape"] = "Escape";
	KeyList$1["Backspace"] = "Backspace";
	KeyList$1["Tab"] = "Tab";
	KeyList$1["Space"] = "Space";
	KeyList$1["ArrowUp"] = "ArrowUp";
	KeyList$1["ArrowDown"] = "ArrowDown";
	KeyList$1["ArrowLeft"] = "ArrowLeft";
	KeyList$1["ArrowRight"] = "ArrowRight";
	KeyList$1["↑"] = "↑";
	KeyList$1["↓"] = "↓";
	KeyList$1["←"] = "←";
	KeyList$1["→"] = "→";
	return KeyList$1;
}({});
/**
* Parse keyboard shortcut string into individual keys
*/
const parseShortcut = (shortcut) => {
	return shortcut.split(" + ").map((key) => key.trim());
};
/**
* Normalize key name for event comparison
*/
const normalizeKey = (key) => {
	return {
		"⌘": "Meta",
		Ctrl: "Control",
		Control: "Control",
		Alt: "Alt",
		"⌥": "Alt",
		Shift: "Shift",
		Meta: "Meta",
		"↑": "ArrowUp",
		"↓": "ArrowDown",
		"←": "ArrowLeft",
		"→": "ArrowRight",
		ArrowUp: "ArrowUp",
		ArrowDown: "ArrowDown",
		ArrowLeft: "ArrowLeft",
		ArrowRight: "ArrowRight"
	}[key] || key;
};
/**
* Check if the keyboard event matches the shortcut
*/
const matchesShortcut = (event, keys) => {
	const normalizedKeys = keys.map(normalizeKey);
	const hasModifiers = {
		Meta: normalizedKeys.includes("Meta"),
		Control: normalizedKeys.includes("Control"),
		Alt: normalizedKeys.includes("Alt"),
		Shift: normalizedKeys.includes("Shift")
	};
	if (hasModifiers.Meta !== event.metaKey || hasModifiers.Control !== event.ctrlKey || hasModifiers.Alt !== event.altKey || hasModifiers.Shift !== event.shiftKey) return false;
	const nonModifierKey = keys.find((key) => ![
		"⌘",
		"Ctrl",
		"Control",
		"Alt",
		"⌥",
		"Shift",
		"Meta"
	].includes(normalizeKey(key)));
	if (!nonModifierKey) return false;
	const normalizedNonModifierKey = normalizeKey(nonModifierKey);
	if (normalizedNonModifierKey.startsWith("Arrow")) return event.key === normalizedNonModifierKey;
	return event.key.toLowerCase() === normalizedNonModifierKey.toLowerCase();
};
/**
* Get display key symbol for better visual representation
*/
const getDisplayKey = (key) => {
	return {
		ArrowUp: "↑",
		ArrowDown: "↓",
		ArrowLeft: "←",
		ArrowRight: "→"
	}[key] || key;
};
/**
* Get display shortcut based on OS (Mac uses ⌘ and ⌥, others use Ctrl and Alt)
*/
const getDisplayShortcut = (shortcut, isMac) => {
	let result = shortcut;
	if (isMac) {
		result = result.replace(/Ctrl/g, "⌘");
		result = result.replace(/Alt/g, "⌥");
	} else {
		result = result.replace(/⌘/g, "Ctrl");
		result = result.replace(/⌥/g, "Alt");
	}
	result = result.replace(/ArrowUp/g, "↑");
	result = result.replace(/ArrowDown/g, "↓");
	result = result.replace(/ArrowLeft/g, "←");
	result = result.replace(/ArrowRight/g, "→");
	return result;
};
/**
* KeyboardShortcut Component
*
* A reusable component that displays keyboard shortcuts and listens for key combinations.
* Automatically adapts to Mac (⌘, ⌥) and Windows/Linux (Ctrl, Alt) conventions.
*
* @example
* ```tsx
* <KeyboardShortcut
*   shortcut="⌘ + F"
*   onTriggered={() => setShowSearch(true)}
* />
* ```
*/
const KeyboardShortcut = ({ shortcut, onTriggered, display = true, className, size = "md" }) => {
	const { isMac } = useDevice();
	const keys = parseShortcut(getDisplayShortcut(shortcut, isMac ?? false));
	const [pressedKeys, setPressedKeys] = useState(/* @__PURE__ */ new Set());
	useEffect(() => {
		const handleKeyDown = (event) => {
			const target = event.target;
			const isInputField = target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable;
			const currentKey = event.key;
			const normalizedEventKeys = /* @__PURE__ */ new Set();
			if (event.metaKey) normalizedEventKeys.add("⌘");
			if (event.ctrlKey) normalizedEventKeys.add("Ctrl");
			if (event.altKey) normalizedEventKeys.add(isMac ? "⌥" : "Alt");
			if (event.shiftKey) normalizedEventKeys.add("Shift");
			if (currentKey.startsWith("Arrow")) {
				normalizedEventKeys.add(currentKey);
				const arrowSymbol = getDisplayKey(currentKey);
				normalizedEventKeys.add(arrowSymbol);
			} else normalizedEventKeys.add(currentKey.toUpperCase());
			setPressedKeys(normalizedEventKeys);
			if (onTriggered && matchesShortcut(event, keys)) {
				if (isInputField) return;
				event.preventDefault();
				onTriggered();
			}
		};
		const handleKeyUp = () => {
			setPressedKeys(/* @__PURE__ */ new Set());
		};
		window.addEventListener("keydown", handleKeyDown);
		window.addEventListener("keyup", handleKeyUp);
		window.addEventListener("blur", handleKeyUp);
		return () => {
			window.removeEventListener("keydown", handleKeyDown);
			window.removeEventListener("keyup", handleKeyUp);
			window.removeEventListener("blur", handleKeyUp);
		};
	}, [keys, onTriggered]);
	if (!display) return null;
	/**
	* Check if a key is currently pressed
	*/
	const isKeyPressed = (key) => {
		const upperKey = key.toUpperCase();
		const normalizedKey = normalizeKey(key);
		return pressedKeys.has(key) || pressedKeys.has(upperKey) || pressedKeys.has(normalizedKey) || key === "⌘" && pressedKeys.has("Meta") || key === "Ctrl" && pressedKeys.has("Control") || key === "⌥" && pressedKeys.has("Alt") || key === "Alt" && pressedKeys.has("Alt") || key === "←" && pressedKeys.has("ArrowLeft") || key === "→" && pressedKeys.has("ArrowRight") || key === "↑" && pressedKeys.has("ArrowUp") || key === "↓" && pressedKeys.has("ArrowDown");
	};
	return /* @__PURE__ */ jsx("kbd", {
		className: cn("inline-flex items-center justify-center gap-0.5 p-0.5", "rounded-lg [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-xl", "font-medium font-sans", "border-1 border-neutral/20 text-neutral", size === "sm" && "text-xs", size === "md" && "text-sm", size === "lg" && "text-base", className),
		children: keys.map((key, index) => {
			const keyId = `${key}-${index}-${shortcut}`;
			const displayKey = getDisplayKey(key);
			return /* @__PURE__ */ jsxs("span", {
				className: "inline-flex items-center",
				children: [index > 0 && /* @__PURE__ */ jsx("span", {
					className: "text-neutral/50",
					children: "+"
				}), /* @__PURE__ */ jsx("span", {
					className: cn("min-w-4 px-0.5", isKeyPressed(key) && "scale-120 font-bold text-text"),
					children: displayKey
				})]
			}, keyId);
		})
	});
};

//#endregion
export { KeyList, KeyboardShortcut };
//# sourceMappingURL=KeyboardShortcut.mjs.map