import { jsxs, jsx } from 'react/jsx-runtime';
import React__default from 'react';
import { cn } from '../../../utils/cn.js';
import { Kbd } from '../Kbd/Kbd.js';
import { commandPaletteTheme } from './CommandPalette.theme.js';

/**
 * Map string shortcuts to KbdKey types
 */
const mapStringToKbdKey = (key) => {
    const normalized = key.toLowerCase().trim();
    const keyMap = {
        '⌘': 'command',
        'cmd': 'command',
        'command': 'command',
        '⇧': 'shift',
        'shift': 'shift',
        '⌃': 'ctrl',
        'ctrl': 'ctrl',
        'control': 'ctrl',
        '⌥': 'option',
        'option': 'option',
        'alt': 'alt',
        'enter': 'enter',
        'return': 'enter',
        'delete': 'delete',
        'del': 'delete',
        'esc': 'escape',
        'escape': 'escape',
        'tab': 'tab',
        'capslock': 'capslock',
        'caps': 'capslock',
        '↑': 'up',
        'up': 'up',
        '→': 'right',
        'right': 'right',
        '↓': 'down',
        'down': 'down',
        '←': 'left',
        'left': 'left',
        'pageup': 'pageup',
        'pagedown': 'pagedown',
        'home': 'home',
        'end': 'end',
        'help': 'help',
        'space': 'space',
        'fn': 'fn',
        '⊞': 'win',
        'win': 'win',
        'windows': 'win',
    };
    return keyMap[normalized] || keyMap[key] || null;
};
/**
 * Render keyboard shortcut using Kbd component
 */
const Shortcut = ({ keys }) => {
    const keyArray = Array.isArray(keys) ? keys : [keys];
    // Map all keys to KbdKey types or keep as strings
    const mappedResults = keyArray.map((key) => {
        const mapped = mapStringToKbdKey(key);
        return { original: key, mapped };
    });
    // Check if all keys were successfully mapped
    const allKeysMapped = mappedResults.every((result) => result.mapped !== null);
    if (allKeysMapped && mappedResults.length > 0) {
        // Use Kbd component with keys prop - all keys are KbdKey types
        const kbdKeys = mappedResults.map((result) => result.mapped);
        return jsx(Kbd, { keys: kbdKeys, size: "sm" });
    }
    // If some keys can't be mapped, render with Kbd using children for unmapped keys
    return (jsx("span", { className: "inline-flex items-center gap-1", children: mappedResults.map((result, index) => {
            if (result.mapped) {
                return (jsx(React__default.Fragment, { children: jsx(Kbd, { keys: [result.mapped], size: "sm" }) }, index));
            }
            return (jsx(React__default.Fragment, { children: jsx(Kbd, { size: "sm", children: result.original }) }, index));
        }) }));
};
/**
 * CommandItem Component
 *
 * Internal component used by CommandPalette to render individual command items.
 * Supports flexible content with contentStart (icons, avatars) and contentEnd (shortcuts, badges).
 *
 * @example
 * ```tsx
 * <CommandItem
 *   command={{
 *     id: 'user-profile',
 *     label: 'John Doe',
 *     subtitle: 'View profile',
 *     contentStart: <Avatar src="..." />,
 *     contentEnd: <Badge>Admin</Badge>,
 *     onSelect: () => navigate('/profile')
 *   }}
 *   index={0}
 *   isHighlighted={true}
 *   onSelect={handleSelect}
 *   onMouseEnter={setHighlightedIndex}
 * />
 * ```
 */
const CommandItem = ({ command, index, isHighlighted, contentStart, contentEnd, className, onSelect, onMouseEnter, theme = commandPaletteTheme, }) => {
    const handleClick = () => {
        if (!command.disabled) {
            onSelect(command);
        }
    };
    const handleMouseEnter = () => {
        if (!command.disabled) {
            onMouseEnter(index);
        }
    };
    // Determine what to render in contentStart
    const finalContentStart = contentStart !== null && contentStart !== void 0 ? contentStart : command.contentStart;
    // Determine what to render in contentEnd
    const renderContentEnd = () => {
        if (contentEnd) {
            return jsx("div", { className: "flex items-center gap-1", children: contentEnd });
        }
        if (command.contentEnd) {
            return jsx("div", { className: "flex items-center gap-1", children: command.contentEnd });
        }
        if (command.shortcut) {
            return (jsx("div", { className: "flex items-center gap-1", children: jsx(Shortcut, { keys: command.shortcut }) }));
        }
        return null;
    };
    return (jsxs("div", { "data-command-index": index, "data-highlighted": isHighlighted, "data-disabled": command.disabled || false, className: cn(theme.commandItem, className), role: "option", "aria-selected": isHighlighted, "aria-disabled": command.disabled || false, onClick: handleClick, onMouseEnter: handleMouseEnter, children: [finalContentStart && (jsx("div", { className: "flex-shrink-0", children: finalContentStart })), jsxs("div", { className: "flex-1 min-w-0", children: [jsx("div", { className: "text-base  truncate", children: command.label }), command.subtitle && (jsx("div", { className: "text-base opacity-70 truncate mt-0", children: command.subtitle }))] }), renderContentEnd()] }));
};

export { CommandItem };
