import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
import { useState } from 'react';
import { Button } from '../components/ui/button.js';
import { useSoundAction, SOUND_ACTION_MAP } from './use-sound-action.js';
/* ------------------------------------------------------------------ */
/*  Action categories for display grouping                            */
/* ------------------------------------------------------------------ */
const ACTION_CATEGORIES = {
    'Navigation (0.2)': ['navigate', 'menu-item'],
    'Toggles & Selections (0.3)': [
        'select',
        'toggle-on',
        'toggle-off',
        'click',
        'cancel',
        'expand',
        'collapse',
        'menu-open',
        'copy',
    ],
    'Drawers & Transitions (0.4)': ['drawer-open', 'drawer-close', 'submit'],
    'Significant Actions (0.5)': ['approve', 'reject', 'create', 'delete'],
    'Notifications (0.5)': [
        'notification-success',
        'notification-error',
        'notification-warning',
        'notification-info',
    ],
};
/* ------------------------------------------------------------------ */
/*  Single action button                                              */
/* ------------------------------------------------------------------ */
function ActionSoundButton({ action }) {
    const { play } = useSoundAction(action);
    const [playing, setPlaying] = useState(false);
    const entry = SOUND_ACTION_MAP[action];
    const handleClick = () => {
        play();
        setPlaying(true);
        setTimeout(() => setPlaying(false), 600);
    };
    return (_jsxs(Button, { size: "sm", variant: playing ? 'default' : 'outline', onClick: handleClick, className: "min-w-[160px] font-mono text-xs", children: [action, _jsxs("span", { className: "text-muted-foreground ms-1 text-[10px]", children: ["(", entry.sound, " @ ", entry.volume, ")"] })] }));
}
/* ------------------------------------------------------------------ */
/*  Full catalog                                                      */
/* ------------------------------------------------------------------ */
function SoundActionCatalog() {
    return (_jsxs("div", { className: "flex w-[640px] flex-col gap-6", children: [_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("h2", { className: "text-base font-semibold", children: "Sound Action Map" }), _jsxs("p", { className: "text-muted-foreground text-sm", children: [Object.keys(SOUND_ACTION_MAP).length, " semantic actions mapped to sounds. Volume hierarchy: navigation (0.2) \u2192 toggles (0.3) \u2192 drawers (0.4) \u2192 actions (0.5)."] })] }), Object.entries(ACTION_CATEGORIES).map(([category, actions]) => (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("h3", { className: "text-sm font-semibold", children: category }), _jsx("div", { className: "flex flex-wrap gap-2", children: actions.map((action) => (_jsx(ActionSoundButton, { action: action }, action))) })] }, category)))] }));
}
/* ------------------------------------------------------------------ */
/*  Storybook meta                                                    */
/* ------------------------------------------------------------------ */
const meta = {
    title: 'Hooks/useSoundAction',
    parameters: { layout: 'centered' },
    tags: ['autodocs'],
};
export default meta;
export const Catalog = {
    render: () => _jsx(SoundActionCatalog, {}),
};
