'use client';
import { Check } from '@lucide/icons';
import { Icon } from '@fayegram-ai/faye-ui/core/icon';
import { useRef, useState } from 'react';
import { Menu } from '@fayegram-ai/faye-ui/overlays/menu';
import { ContextMenu } from '@fayegram-ai/faye-ui/overlays/context-menu';
import { Menubar } from '@fayegram-ai/faye-ui/navigation/menubar';
import { Button } from '@fayegram-ai/faye-ui/controls/button';
import { Inline } from '@fayegram-ai/faye-ui/layout';
import { Section, Result } from '../example';
export default function Menus() {
    const anchor = useRef<HTMLDivElement>(null);
    const [action, setAction] = useState('No action selected'), [checked, setChecked] = useState(true);
    return <><Section title="Anchor sides, alignment and offsets"><Inline gap="2" wrap>{(['top','bottom','inline-start','inline-end'] as const).map(side=><Menu.Root key={side}><Menu.Trigger render={<Button/>}>{side} menu</Menu.Trigger><Menu.Portal><Menu.Positioner side={side} align="start" sideOffset={8}><Menu.Popup><Menu.Item onClick={()=>setAction(`${side} selected`)}>Choose from {side}</Menu.Item></Menu.Popup></Menu.Positioner></Menu.Portal></Menu.Root>)}</Inline><div ref={anchor} className="docs-layout-cell" data-menu-anchor>Separate anchor target</div><Menu.Root><Menu.Trigger render={<Button/>}>Open anchored menu</Menu.Trigger><Menu.Portal><Menu.Positioner anchor={anchor} side="bottom" align="end" sideOffset={8} alignOffset={0}><Menu.Popup><Menu.Item onClick={()=>setAction('Anchored action')}>Action at the anchor</Menu.Item></Menu.Popup></Menu.Positioner></Menu.Portal></Menu.Root><p>Placement follows logical direction and flips to stay inside the viewport.</p></Section><Section title="Menu with checked state and submenu"><Menu.Root><Menu.Trigger render={<Button />}>Project actions</Menu.Trigger><Menu.Portal><Menu.Positioner><Menu.Popup><Menu.Group><Menu.GroupLabel>Document</Menu.GroupLabel><Menu.Item onClick={() => setAction('Duplicated')}>Duplicate</Menu.Item><Menu.Item disabled>Publish (unavailable)</Menu.Item></Menu.Group><Menu.Separator /><Menu.CheckboxItem checked={checked} onCheckedChange={setChecked}><Menu.CheckboxItemIndicator><Icon icon={Check} size="sm"/></Menu.CheckboxItemIndicator>Show details</Menu.CheckboxItem><Menu.RadioGroup defaultValue="list"><Menu.RadioItem value="list"><Menu.RadioItemIndicator><Icon icon={Check} size="sm"/></Menu.RadioItemIndicator>List view</Menu.RadioItem><Menu.RadioItem value="grid"><Menu.RadioItemIndicator><Icon icon={Check} size="sm"/></Menu.RadioItemIndicator>Grid view</Menu.RadioItem></Menu.RadioGroup><Menu.SubmenuRoot><Menu.SubmenuTrigger>Move to…</Menu.SubmenuTrigger><Menu.Portal><Menu.Positioner><Menu.Popup>{['Research', 'Design', 'Archive'].map(x => <Menu.Item key={x} onClick={() => setAction(`Moved to ${x}`)}>{x}</Menu.Item>)}</Menu.Popup></Menu.Positioner></Menu.Portal></Menu.SubmenuRoot></Menu.Popup></Menu.Positioner></Menu.Portal></Menu.Root><Result>{action}; details {checked ? 'visible' : 'hidden'}</Result></Section><Section title="Context menu with an ordinary action alternative"><ContextMenu.Root><ContextMenu.Trigger className="docs-layout-cell" tabIndex={0}>Right-click or use the context-menu key.</ContextMenu.Trigger><ContextMenu.Portal><ContextMenu.Positioner><ContextMenu.Popup><ContextMenu.Group><ContextMenu.GroupLabel>Local actions</ContextMenu.GroupLabel><ContextMenu.Item onClick={() => setAction('Copied link')}>Copy local link</ContextMenu.Item><ContextMenu.LinkItem href="/docs/overview/">Documentation home</ContextMenu.LinkItem></ContextMenu.Group><ContextMenu.Separator/><ContextMenu.CheckboxItem checked={checked} onCheckedChange={setChecked}><ContextMenu.CheckboxItemIndicator><Icon icon={Check} size="sm"/></ContextMenu.CheckboxItemIndicator>Show context details</ContextMenu.CheckboxItem><ContextMenu.RadioGroup defaultValue="regular"><ContextMenu.RadioItem value="regular"><ContextMenu.RadioItemIndicator><Icon icon={Check} size="sm"/></ContextMenu.RadioItemIndicator>Regular view</ContextMenu.RadioItem></ContextMenu.RadioGroup><ContextMenu.SubmenuRoot><ContextMenu.SubmenuTrigger>Move local item</ContextMenu.SubmenuTrigger><ContextMenu.Portal><ContextMenu.Positioner><ContextMenu.Popup><ContextMenu.Item onClick={() => setAction('Archived')}>Archive locally</ContextMenu.Item></ContextMenu.Popup></ContextMenu.Positioner></ContextMenu.Portal></ContextMenu.SubmenuRoot></ContextMenu.Popup></ContextMenu.Positioner></ContextMenu.Portal></ContextMenu.Root><Button onClick={() => setAction('Copied link')}>Copy local link</Button></Section><Section title="Application menubar"><Menubar>{['File', 'Edit'].map(label => <Menu.Root key={label}><Menu.Trigger>{label}</Menu.Trigger><Menu.Portal><Menu.Positioner><Menu.Popup><Menu.Item onClick={() => setAction(`${label} action`)}>Example action</Menu.Item><Menu.LinkItem href="/docs/overview/">Documentation home</Menu.LinkItem></Menu.Popup></Menu.Positioner></Menu.Portal></Menu.Root>)}</Menubar></Section></>;
}