'use client';
import { useState } from 'react';
import { Folder, Activity, Plus, X } from '@lucide/icons';
import { Icon } from '@fayegram-ai/faye-ui/core/icon';
import { AppShell } from '@fayegram-ai/faye-ui/patterns/shell';
import { PageHeader, EmptyState, FormSection, FilterBar } from '@fayegram-ai/faye-ui/patterns/content';
import { AppBar, BottomNavigation } from '@fayegram-ai/faye-ui/patterns/application-navigation';
import { SearchField } from '@fayegram-ai/faye-ui/patterns/search-field';
import { CommandPalette } from '@fayegram-ai/faye-ui/patterns/command-palette';
import { TransferList } from '@fayegram-ai/faye-ui/patterns/transfer-list';
import { FloatingAction, FloatingActions } from '@fayegram-ai/faye-ui/patterns/floating-actions';
import { Button } from '@fayegram-ai/faye-ui/controls/button';
import { TextField } from '@fayegram-ai/faye-ui/controls/text-field';
import { Stack } from '@fayegram-ai/faye-ui/layout/layout';
import { Section, Result } from '../example';
export default function Patterns() {
    const [query, setQuery] = useState(''), [command, setCommand] = useState(false), [result, setResult] = useState('No command selected'), [chosen, setChosen] = useState<string[]>(['design']), [dock, setDock] = useState(false), [action, setAction] = useState(false);
    const [projects, setProjects] = useState<string[]>([]);
    const create = () => { setProjects(all => [...all, `Draft project ${all.length + 1}`]); setQuery(''); setResult('Draft created in the workspace above'); };
    const matches = projects.filter(project => project.toLowerCase().includes(query.toLowerCase()));
    return <><Section title="Application shell"><AppShell height="content" sidebar={<nav aria-label="Preview navigation"><a href="#workspace-preview">Workspace</a></nav>} header={<AppBar>Example workspace</AppBar>} mainAs="section" mainId="workspace-preview" mainLabel="Workspace example"><Stack gap="4"><PageHeader headingLevel={3} title="Projects" description="Application patterns compose the same primitives." actions={<Button onClick={() => setCommand(true)}>Commands</Button>}/><FilterBar><SearchField label="Filter example projects" placeholder="Find a project" value={query} onChange={e => setQuery(e.target.value)}/><Button onClick={() => setQuery('')}>Clear</Button></FilterBar>{matches.length ? <><ul aria-label="Example projects">{matches.map(project => <li key={project}>{project}</li>)}</ul><Button onClick={create}>Create draft</Button></> : <EmptyState title={projects.length ? 'No matching projects' : 'No projects in this example'} description={projects.length ? 'Clear the filter or create another draft.' : 'Create a draft to begin.'} action={<Button onClick={create}>Create draft</Button>}/>}</Stack></AppShell><BottomNavigation current="projects" items={[{ key: 'projects', label: 'Projects', icon: <Icon icon={Folder}/>, href: '#workspace-preview' }, { key: 'activity', label: 'Activity', icon: <Icon icon={Activity}/>, href: '/docs/display/' }]}/></Section><Section title="Form section and transfer pattern"><FormSection title="Project settings" description="Preferences remain application-owned."><TextField label="Team" defaultValue="Design systems"/></FormSection><TransferList showSelectAll items={[{ id: 'design', label: 'Design' }, { id: 'engineering', label: 'Engineering' }, { id: 'research', label: 'Research' }]} value={chosen} onValueChange={setChosen}/><Result>Selected: {chosen.join(', ')}</Result></Section><Section title="Command palette and optional action docks"><Button onClick={() => setCommand(true)}>Open commands</Button><CommandPalette open={command} onOpenChange={setCommand} commands={[{ id: 'create', label: 'Create project', keywords: ['new'] }, { id: 'archive', label: 'Archive latest project', disabled: projects.length === 0 }, { id: 'publish', label: 'Publish', disabled: true }]} onSelect={item => { if (item.id === 'create') create(); else if (item.id === 'archive') { setProjects(all => all.slice(0, -1)); setResult('Latest project archived'); } }}/><Button onClick={() => { setDock(v => !v); setAction(false); }}>Toggle action menu dock</Button><Button onClick={() => { setAction(v => !v); setDock(false); }}>Toggle single floating action</Button>{dock && <FloatingActions label="Quick actions" items={[{ id: 'create', label: <><Icon icon={Plus}/>Create a draft</>, onSelect: create }, { id: 'close', label: <><Icon icon={X}/>Hide dock</>, onSelect: () => setDock(false) }]}/>} {action && <FloatingAction onClick={() => { create(); setAction(false); }}><Icon icon={Plus}/>Create draft</FloatingAction>}<Result>{result}</Result></Section></>;
}