'use client';
import { useState } from 'react';
import { Dialog } from '@fayegram-ai/faye-ui/overlays/dialog';
import { AlertDialog } from '@fayegram-ai/faye-ui/overlays/alert-dialog';
import { Modal } from '@fayegram-ai/faye-ui/overlays/modal';
import { SwipeDrawer } from '@fayegram-ai/faye-ui/overlays/swipe-drawer';
import { Drawer } from '@fayegram-ai/faye-ui/overlays/drawer';
import { ThemeScope } from '@fayegram-ai/faye-ui/provider/provider';
import { Button } from '@fayegram-ai/faye-ui/controls/button';
import { TextField } from '@fayegram-ai/faye-ui/controls/text-field';
import { Inline, Stack } from '@fayegram-ai/faye-ui/layout/layout';
import { Section, Result } from '../example';
export default function Dialogs() {
    const [snapPoint, setSnapPoint] = useState<string | number | null>('180px');
    const [modal, setModal] = useState(false), [removed, setRemoved] = useState(false);
    return <><Section title="Composed dialog"><Dialog.Root><Dialog.Trigger render={<Button />}>Open dialog</Dialog.Trigger><Dialog.Portal keepMounted><Dialog.Backdrop /><Dialog.Popup><Stack gap="4"><Dialog.Title>Workspace details</Dialog.Title><Dialog.Description>Focus remains in the dialog until it closes.</Dialog.Description><TextField label="Name" defaultValue="Northstar"/><Dialog.Close render={<Button />}>Done</Dialog.Close></Stack></Dialog.Popup></Dialog.Portal></Dialog.Root></Section><Section title="Scrollable dialog body"><Dialog.Root><Dialog.Trigger render={<Button />}>Open long dialog</Dialog.Trigger><Dialog.Portal><Dialog.Backdrop /><Dialog.Viewport data-testid="long-dialog-viewport"><Dialog.Popup><Dialog.Header><Dialog.Title data-testid="long-dialog-title">Review every section</Dialog.Title><Dialog.Description>The body scrolls independently while the title and action stay in view.</Dialog.Description></Dialog.Header><Dialog.Body data-testid="long-dialog-body"><TextField label="Reviewer" defaultValue="Design systems"/>{Array.from({ length: 24 }, (_, index) => <p key={index}>Section {index + 1}: Content remains in reading order. Review this item before continuing.</p>)}</Dialog.Body><Dialog.Actions><Dialog.Close render={<Button />} data-testid="long-dialog-close">Finish review</Dialog.Close></Dialog.Actions></Dialog.Popup></Dialog.Viewport></Dialog.Portal></Dialog.Root></Section><Section title="Nested scheme and portal inheritance"><ThemeScope scheme="dark" data-testid="dark-dialog-scope" style={{ padding: '1rem', background: 'var(--faye-ui-color-surface)', color: 'var(--faye-ui-color-text)' }}><Dialog.Root><Dialog.Trigger render={<Button />}>Open dark-scope dialog</Dialog.Trigger><Dialog.Portal><Dialog.Backdrop /><Dialog.Popup data-testid="dark-dialog-popup"><Dialog.Title>Still dark inside the portal</Dialog.Title><Dialog.Description>The portal carries the originating visual scope.</Dialog.Description><Dialog.Close render={<Button />}>Close scoped dialog</Dialog.Close></Dialog.Popup></Dialog.Portal></Dialog.Root></ThemeScope></Section><Section title="Alert dialog and convenience modal"><Inline wrap><AlertDialog.Root><AlertDialog.Trigger render={<Button tone="danger"/>}>Remove local draft</AlertDialog.Trigger><AlertDialog.Portal><AlertDialog.Backdrop /><AlertDialog.Popup><Stack gap="4"><AlertDialog.Title>Remove this example draft?</AlertDialog.Title><AlertDialog.Description>This only changes state in the preview.</AlertDialog.Description><Inline><AlertDialog.Close render={<Button />}>Cancel</AlertDialog.Close><AlertDialog.Close render={<Button tone="danger" variant="solid"/>} onClick={() => setRemoved(true)}>Remove draft</AlertDialog.Close></Inline></Stack></AlertDialog.Popup></AlertDialog.Portal></AlertDialog.Root><Button onClick={() => setModal(true)}>Open modal</Button></Inline><Modal open={modal} onOpenChange={setModal} title="A composed modal" description="A convenience API over Dialog." footer={<Button onClick={() => setModal(false)}>Save and close</Button>}><TextField label="Project title" defaultValue="A quiet interface"/></Modal><Result>{removed ? 'Draft removed locally.' : 'Draft retained.'}</Result></Section><Section title="Drawers"><Inline wrap>{(['start', 'end', 'top', 'bottom'] as const).map(edge => <Drawer.Root key={edge}><Drawer.Trigger render={<Button />}>Open {edge} drawer</Drawer.Trigger><Drawer.Portal><Drawer.Backdrop /><Drawer.Popup edge={edge}><Drawer.Header><Drawer.Title>{edge} drawer</Drawer.Title><Drawer.Close aria-label={`Close ${edge} drawer`}/><Drawer.Description>Logical edges follow text direction.</Drawer.Description></Drawer.Header><Drawer.Body><TextField label="Drawer details" defaultValue="Room for a longer form"/></Drawer.Body></Drawer.Popup></Drawer.Portal></Drawer.Root>)}</Inline></Section><Section title="Gesture and snap-point drawer"><SwipeDrawer.Root swipeDirection="down" snapPoints={['180px', 1]} snapPoint={snapPoint} onSnapPointChange={setSnapPoint}><SwipeDrawer.Trigger render={<Button />}>Open swipe drawer</SwipeDrawer.Trigger><SwipeDrawer.Portal><SwipeDrawer.Backdrop /><SwipeDrawer.Viewport><SwipeDrawer.Popup><SwipeDrawer.Content><Stack gap="4"><SwipeDrawer.Header><SwipeDrawer.Title>Move between snap points</SwipeDrawer.Title><SwipeDrawer.Close aria-label="Close swipe drawer"/><SwipeDrawer.Description>Use the button or drag vertically to resize. The close icon stays in the title row.</SwipeDrawer.Description></SwipeDrawer.Header><Inline><Button onClick={() => setSnapPoint(snapPoint === 1 ? '180px' : 1)}>{snapPoint === 1 ? 'Collapse drawer' : 'Expand drawer'}</Button></Inline><TextField label="Drawer note" defaultValue="A small, useful surface"/></Stack></SwipeDrawer.Content></SwipeDrawer.Popup></SwipeDrawer.Viewport></SwipeDrawer.Portal></SwipeDrawer.Root></Section><CoordinatedDrawers/></>;
}

function CoordinatedDrawers() {
    return <Section title="Coordinated drawers and swipe activation" note="The visible buttons provide keyboard and pointer alternatives to swiping. Virtual-keyboard behavior still needs real-device qualification.">
        <SwipeDrawer.Provider>
            <div className="docs-drawer-stage"><SwipeDrawer.IndentBackground className="docs-drawer-stage-background"/><SwipeDrawer.Indent className="docs-drawer-stage-content">
                <SwipeDrawer.Root><SwipeDrawer.VirtualKeyboardProvider>
                    <SwipeDrawer.Trigger render={<Button/>}>Open collection drawer</SwipeDrawer.Trigger>
                    <SwipeDrawer.SwipeArea className="docs-drawer-swipe-area" aria-label="Swipe up to open collection drawer"><span aria-hidden="true">Swipe up from here</span></SwipeDrawer.SwipeArea>
                    <SwipeDrawer.Portal><SwipeDrawer.Backdrop/><SwipeDrawer.Viewport><SwipeDrawer.Popup><SwipeDrawer.Content><Stack gap="4">
                        <SwipeDrawer.Header><SwipeDrawer.Title>Collection details</SwipeDrawer.Title><SwipeDrawer.Close aria-label="Close collection drawer"/><SwipeDrawer.Description>Edit a local draft or open its sharing options.</SwipeDrawer.Description></SwipeDrawer.Header>
                        <TextField label="Collection drawer title" defaultValue="Weekend places"/>
                        <SwipeDrawer.Root><Inline><SwipeDrawer.Trigger render={<Button/>}>Open sharing drawer</SwipeDrawer.Trigger></Inline><SwipeDrawer.Portal><SwipeDrawer.Backdrop/><SwipeDrawer.Viewport><SwipeDrawer.Popup><SwipeDrawer.Content><Stack gap="4"><SwipeDrawer.Header><SwipeDrawer.Title>Sharing options</SwipeDrawer.Title><SwipeDrawer.Close aria-label="Close sharing drawer"/></SwipeDrawer.Header><TextField label="Sharing note" placeholder="Add a note"/></Stack></SwipeDrawer.Content></SwipeDrawer.Popup></SwipeDrawer.Viewport></SwipeDrawer.Portal></SwipeDrawer.Root>
                    </Stack></SwipeDrawer.Content></SwipeDrawer.Popup></SwipeDrawer.Viewport></SwipeDrawer.Portal>
                </SwipeDrawer.VirtualKeyboardProvider></SwipeDrawer.Root>
            </SwipeDrawer.Indent></div>
        </SwipeDrawer.Provider>
    </Section>;
}