import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import { Button } from '../components/ui/button.js';
import { useSound, SOUND_NAMES } from './use-sound.js';
/* ------------------------------------------------------------------ */
/*  Helpers                                                           */
/* ------------------------------------------------------------------ */
const CATEGORIES = {
    'UI Actions': ['button', 'select', 'disabled'],
    Toggles: ['toggle_on', 'toggle_off'],
    Transitions: ['transition_up', 'transition_down'],
    Alerts: ['notification', 'caution', 'celebration'],
    Swipes: ['swipe', 'swipe_01', 'swipe_02', 'swipe_03', 'swipe_04', 'swipe_05'],
    Taps: ['tap_01', 'tap_02', 'tap_03', 'tap_04', 'tap_05'],
    Typing: ['type_01', 'type_02', 'type_03', 'type_04', 'type_05'],
    Loops: ['progress_loop', 'ringtone_loop'],
};
/* ------------------------------------------------------------------ */
/*  Single sound player (used per button)                             */
/* ------------------------------------------------------------------ */
function SoundButton({ name, volume }) {
    const isLoop = name.includes('loop');
    const { play, stop } = useSound(name, { volume, loop: isLoop });
    const [playing, setPlaying] = useState(false);
    const handleClick = () => {
        if (isLoop && playing) {
            stop();
            setPlaying(false);
        }
        else {
            play();
            setPlaying(true);
            if (!isLoop) {
                setTimeout(() => setPlaying(false), 2000);
            }
        }
    };
    return (_jsx(Button, { size: "sm", variant: playing ? 'default' : 'outline', onClick: handleClick, className: "min-w-[120px] font-mono text-xs", children: isLoop && playing ? `Stop ${name}` : name }));
}
/* ------------------------------------------------------------------ */
/*  Full catalog demo                                                 */
/* ------------------------------------------------------------------ */
function SoundCatalog({ volume }) {
    return (_jsxs("div", { className: "flex w-[560px] flex-col gap-6", children: [_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("h2", { className: "text-base font-semibold", children: "Sound Library" }), _jsxs("p", { className: "text-muted-foreground text-sm", children: [SOUND_NAMES.length, " sounds available at", ' ', _jsx("code", { className: "bg-muted rounded px-1 py-0.5 text-xs", children: "/sounds/*.wav" })] })] }), Object.entries(CATEGORIES).map(([category, sounds]) => (_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: sounds.map((name) => (_jsx(SoundButton, { name: name, volume: volume }, name))) })] }, category)))] }));
}
/* ------------------------------------------------------------------ */
/*  Storybook meta                                                    */
/* ------------------------------------------------------------------ */
const meta = {
    title: 'Hooks/useSound',
    parameters: { layout: 'centered' },
    tags: ['autodocs'],
    argTypes: {
        volume: {
            control: { type: 'range', min: 0, max: 1, step: 0.1 },
            description: 'Playback volume (0 to 1)',
            defaultValue: 0.5,
        },
    },
    args: {
        volume: 0.5,
    },
};
export default meta;
export const Catalog = {
    render: ({ volume }) => _jsx(SoundCatalog, { volume: volume }),
};
