'use client';
import { ArrowUpRight } from '@lucide/icons';
import { Icon } from '@fayegram-ai/faye-ui/core/icon';
import { useState } from 'react';
import { InputGroup, InputAdornment } from '@fayegram-ai/faye-ui/controls/input-group';
import { Input, Textarea } from '@fayegram-ai/faye-ui/controls/input';
import { AutosizeTextarea } from '@fayegram-ai/faye-ui/controls/autosize-textarea';
import { TextField } from '@fayegram-ai/faye-ui/controls/text-field';
import { NativeSelect } from '@fayegram-ai/faye-ui/controls/native-select';
import { Field } from '@fayegram-ai/faye-ui/controls/field';
import { FieldLayout } from '@fayegram-ai/faye-ui/controls/field-layout';
import { Fieldset } from '@fayegram-ai/faye-ui/controls/fieldset';
import { Form } from '@fayegram-ai/faye-ui/controls/form';
import { Button } from '@fayegram-ai/faye-ui/controls/button';
import { Stack, Inline } from '@fayegram-ai/faye-ui/layout/layout';
import { Section, Result } from '../example';
import AdvancedFields from './advanced-fields';
export default function Fields() {
    const [result, setResult] = useState('Submit to inspect native FormData.');
    return <><Section title="Native submission and validation"><Form onSubmit={e => { e.preventDefault(); setResult(JSON.stringify(Object.fromEntries(new FormData(e.currentTarget)), null, 2)); }}><Stack gap="4"><TextField label="Workspace name" name="workspace" required defaultValue="Northstar" description="A persistent label, not a placeholder."/><Fieldset.Root aria-describedby="contact-example-description"><Fieldset.Legend>Contact details</Fieldset.Legend><p id="contact-example-description">Collected only in this local example.</p><Field.Root name="email"><Field.Label>Email</Field.Label><Field.Control render={<Input />} type="email" required placeholder="name@example.com"/><Field.Description>Use a valid email format.</Field.Description><Field.Error match="valueMissing">An email address is required.</Field.Error><Field.Error match="typeMismatch">Enter a valid email address.</Field.Error><Field.Validity>{state => state.validity?.valid === true ? <small>Email format accepted.</small> : null}</Field.Validity></Field.Root></Fieldset.Root><label className="docs-field">Role<NativeSelect name="role" defaultValue="member"><option value="member">Member</option><option value="viewer">Viewer</option></NativeSelect></label><Inline><Button type="submit" variant="solid" tone="accent">Inspect values</Button><Button type="reset">Reset form</Button></Inline><Result>{result}</Result></Stack></Form></Section><Section title="Text areas and states"><Stack gap="4"><InputGroup><InputAdornment>https://</InputAdornment><Input aria-label="Website hostname" placeholder="example.com"/><InputAdornment position="end"><Icon icon={ArrowUpRight} size="sm"/></InputAdornment></InputGroup><FieldLayout label="Summary" description="Shared label and hint anatomy.">{attrs => <Textarea {...attrs} defaultValue="A short project description."/>}</FieldLayout><label className="docs-field">Expanding notes<AutosizeTextarea aria-label="Expanding notes" minRows={2} maxRows={7} placeholder="Add several lines…"/></label><TextField label="Invalid field" defaultValue="Taken" error="This name is already in use."/><TextField label="Read-only field" value="Immutable identifier" readOnly/><TextField label="Disabled field" disabled defaultValue="Unavailable"/></Stack></Section><Section title="Advanced field composition"><AdvancedFields/></Section></>;
}