'use client';
import { useRef, useState } from 'react';
import { Popover } from '@fayegram-ai/faye-ui/overlays/popover';
import { Tooltip } from '@fayegram-ai/faye-ui/overlays/tooltip';
import { PreviewCard } from '@fayegram-ai/faye-ui/overlays/preview-card';
import { Portal } from '@fayegram-ai/faye-ui/overlays/portal';
import { Backdrop } from '@fayegram-ai/faye-ui/overlays/backdrop';
import { Popper } from '@fayegram-ai/faye-ui/overlays/popper';
import { ClickAwayListener } from '@fayegram-ai/faye-ui/hooks/click-away';
import { Button } from '@fayegram-ai/faye-ui/controls/button';
import { Inline, Stack } from '@fayegram-ai/faye-ui/layout/layout';
import { PortalTheme } from '@fayegram-ai/faye-ui/provider/provider';
import { Section, Result } from '../example';
import { Choice } from '../choice';
export default function Floating() {
    const [open, setOpen] = useState(false), [anchor, setAnchor] = useState<HTMLElement | null>(null), [portal, setPortal] = useState(false), [away, setAway] = useState(0);
    const [side, setSide] = useState<'top' | 'bottom' | 'left' | 'right'>('bottom');
    const portalTarget = useRef<HTMLDivElement>(null);
    return <><Section title="Cursor-following tooltip"><Tooltip.Root trackCursorAxis="both"><Tooltip.Trigger delay={0} render={<Button/>}>Follow the pointer</Tooltip.Trigger><Tooltip.Portal><Tooltip.Positioner><Tooltip.Popup>Position follows the pointer while the description stays associated.</Tooltip.Popup></Tooltip.Positioner></Tooltip.Portal></Tooltip.Root></Section><Section title="Popover, tooltip and preview card"><Inline wrap><Choice label="Floating panel side" value={side} onValueChange={value => setSide(value as typeof side)} options={['top','bottom','left','right'].map(value=>({value,label:value}))}/></Inline><Inline wrap><Popover.Root><Popover.Trigger render={<Button />}>View details</Popover.Trigger><Popover.Portal><Popover.Positioner side={side}><Popover.Popup><Popover.Arrow/><Stack gap="3"><Popover.Title>Workspace visibility</Popover.Title><Popover.Description>People with access can view these resources.</Popover.Description><Popover.Close render={<Button />}>Understood</Popover.Close></Stack></Popover.Popup></Popover.Positioner></Popover.Portal></Popover.Root><Tooltip.Provider><Tooltip.Root><Tooltip.Trigger render={<Button aria-label="Show keyboard shortcut"/>}>Shortcut</Tooltip.Trigger><Tooltip.Portal><Tooltip.Positioner side={side}><Tooltip.Popup><Tooltip.Arrow/>Use Ctrl or Command K to search docs.</Tooltip.Popup></Tooltip.Positioner></Tooltip.Portal></Tooltip.Root></Tooltip.Provider><PreviewCard.Root><PreviewCard.Trigger href="/docs/theming/">Preview theming</PreviewCard.Trigger><PreviewCard.Portal><PreviewCard.Positioner side={side}><PreviewCard.Popup><PreviewCard.Arrow/><strong>Theme system</strong><p>Typed tokens, schemes, density and scoped component profiles.</p></PreviewCard.Popup></PreviewCard.Positioner></PreviewCard.Portal></PreviewCard.Root></Inline></Section><Section title="Positioning without modal behavior" note="Popper only positions content. Applications provide semantics and dismissal where appropriate."><Button ref={setAnchor} aria-expanded={open} aria-controls="position-example" onClick={() => setOpen(value => !value)}>Toggle anchored note</Button><Popper open={open} anchor={anchor}><div id="position-example" role="status" className="docs-layout-cell">Anchored to the button, collision-aware.</div></Popper><ClickAwayListener onClickAway={() => setAway(n => n + 1)}><div className="docs-layout-cell">Click inside, then outside this region.</div></ClickAwayListener><Result>Outside pointer events: {away}</Result></Section><Section title="Explicit portal and backdrop primitives" note="This decorative backdrop preview does not create a modal or lock focus."><Button onClick={() => setPortal(p => !p)}>Toggle portal content</Button><div ref={portalTarget} style={{ minHeight: '6rem', position: 'relative', isolation: 'isolate' }} className="docs-layout-cell"><Backdrop style={{ position: 'absolute', zIndex: -1 }}/><span>Portal destination</span></div>{portal && portalTarget.current && <Portal container={portalTarget.current}><PortalTheme><div role="status">Rendered into an explicit container.</div></PortalTheme></Portal>}</Section></>;
}