<?php

use Lib\PHPXUI\{
    CommandDialog,
    CommandInput,
    CommandList,
    CommandEmpty,
    CommandGroup,
    CommandItem,
    CommandSeparator,
    CommandShortcut,
};

use Lib\PPIcons\{
    Calendar as IconCalendar,
    Smile,
    Calculator,
    User,
    CreditCard,
    Settings,
};

?>

<p class="text-muted-foreground text-sm">
    Press
    <kbd
        class="bg-muted text-muted-foreground pointer-events-none inline-flex h-5 items-center gap-1 rounded border px-1.5 font-mono text-[10px] font-medium opacity-100 select-none">
        <span class="text-xs">⌘</span>J
    </kbd>
</p>

<CommandDialog open="{openDialog}" onOpenChange="{setOpenDialog}">
    <CommandInput placeholder="Type a command or search..." />
    <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandGroup heading="Suggestions">
            <CommandItem>
                <IconCalendar />
                <span>Calendar</span>
            </CommandItem>
            <CommandItem>
                <Smile />
                <span>Search Emoji</span>
            </CommandItem>
            <CommandItem disabled="true">
                <Calculator />
                <span>Calculator</span>
            </CommandItem>
        </CommandGroup>
        <CommandSeparator />
        <CommandGroup heading="Settings">
            <CommandItem>
                <User />
                <span>Profile</span>
                <CommandShortcut>⌘P</CommandShortcut>
            </CommandItem>
            <CommandItem>
                <CreditCard />
                <span>Billing</span>
                <CommandShortcut>⌘B</CommandShortcut>
            </CommandItem>
            <CommandItem>
                <Settings />
                <span>Settings</span>
                <CommandShortcut>⌘S</CommandShortcut>
            </CommandItem>
        </CommandGroup>
    </CommandList>
</CommandDialog>

<script>
    const [openDialog, setOpenDialog] = pp.state(false);

    pp.effect(() => {
        const onKeyDown = (e) => {
            if (e.key.toLowerCase() === 'j' && (e.ctrlKey || e.metaKey)) {
                e.preventDefault();
                setOpenDialog(v => !v);
            }
        };
        document.addEventListener('keydown', onKeyDown);
        return () => document.removeEventListener('keydown', onKeyDown);
    }, []);
</script>