Select and autocomplete

'use client';
import { useId, useState } from 'react';
import { Select, SelectField } from '@fayegram-ai/faye-ui/controls/select';
import { Combobox } from '@fayegram-ai/faye-ui/controls/combobox';
import { Autocomplete } from '@fayegram-ai/faye-ui/controls/autocomplete';
import { Section, Result } from '../example';
import { Choice } from '../choice';
import { FieldLayout } from '@fayegram-ai/faye-ui/controls/field-layout';
import { NativeSelect } from '@fayegram-ai/faye-ui/controls/native-select';
import { Grid, QueryContainer, Stack } from '@fayegram-ai/faye-ui/layout/layout';
import { Button } from '@fayegram-ai/faye-ui/controls/button';
import './pickers.css';
const cities = ['Amsterdam', 'Berlin', 'Copenhagen', 'Lisbon', 'Oslo', 'Stockholm'];
export default function Pickers() {
    const id = useId(), [city, setCity] = useState<string | null>('Oslo'), [query, setQuery] = useState('');
    const [pickerMode, setPickerMode] = useState('adaptive');
    const [saved, setSaved] = useState('No selection submitted');
    return <><QueryContainer name="picker-example"><Section title="Adaptive and native selection" note="Adaptive uses the native system picker when the primary pointer is coarse. Desktop keeps the themed popup.">
        <Choice label="Picker behavior" value={pickerMode} onValueChange={setPickerMode} options={[{value:'adaptive',label:'Native on mobile'},{value:'custom',label:'Always themed popup'},{value:'native',label:'Always native picker'}]}/>
        <form onSubmit={event=>{event.preventDefault();setSaved(String(new FormData(event.currentTarget).get('destination')))}}>
            <Stack gap="3"><FieldLayout label="Choose a destination" description="Your value is retained when picker behavior changes.">{attrs=><SelectField {...attrs} items={cities.map(value=>({value,label:value}))} name="destination" defaultValue="Oslo" nativeOnMobile={pickerMode==='adaptive'} native={pickerMode==='native'}/>}</FieldLayout>
                <Grid columns={2} gap="3" className="picker-form-actions"><Button type="submit" aria-label="Confirm destination">Confirm</Button><Button type="reset" aria-label="Reset destination">Reset</Button></Grid>
                <Result>{saved}</Result>
            </Stack>
        </form>
        <Grid columns={3} gap="4" className="picker-variant-grid" aria-label="Native and themed variants">
            {(['outline','filled','plain'] as const).map(variant=><Grid key={variant} gap="3" className="picker-variant-pair" data-picker-variant={variant}>
                <FieldLayout label={`Native ${variant}`}>{attrs=><NativeSelect {...attrs} aria-label={`Native ${variant}`} variant={variant} defaultValue="Oslo">{cities.map(value=><option key={value}>{value}</option>)}</NativeSelect>}</FieldLayout>
                <FieldLayout label={`Themed ${variant}`}>{attrs=><SelectField {...attrs} aria-label={`Themed ${variant}`} items={cities.map(value=>({value,label:value}))} variant={variant} defaultValue="Oslo"/>}</FieldLayout>
            </Grid>)}
        </Grid>
    </Section></QueryContainer><Section title="Select"><label id={`${id}-select-label`}>Access level</label><Select.Root defaultValue="member" items={{ member: 'Member', viewer: 'Viewer', owner: 'Owner' }}><Select.Trigger aria-labelledby={`${id}-select-label`}><Select.Value /><Select.Icon/></Select.Trigger><Select.Portal><Select.Positioner><Select.Popup><Select.List><Select.Group><Select.GroupLabel>Access roles</Select.GroupLabel>{['member', 'viewer', 'owner'].map(value => <Select.Item key={value} value={value}><Select.ItemText>{value[0]?.toUpperCase()}{value.slice(1)}</Select.ItemText><Select.ItemIndicator/></Select.Item>)}</Select.Group></Select.List></Select.Popup></Select.Positioner></Select.Portal></Select.Root></Section><Section title="Searchable selection"><Combobox.Root items={cities} value={city} onValueChange={setCity}><label htmlFor={`${id}-city`}>Office city</label><Combobox.InputGroup><Combobox.Input id={`${id}-city`} placeholder="Find a city"/><Combobox.Clear aria-label="Clear city"/><Combobox.Trigger aria-label="Show cities"><Combobox.Icon/></Combobox.Trigger></Combobox.InputGroup><Combobox.Portal><Combobox.Positioner><Combobox.Popup><Combobox.Empty>No matching cities</Combobox.Empty><Combobox.List>{(item: string) => <Combobox.Item key={item} value={item}>{item}<Combobox.ItemIndicator/></Combobox.Item>}</Combobox.List></Combobox.Popup></Combobox.Positioner></Combobox.Portal></Combobox.Root><Result>City: {city ?? 'none'}</Result></Section><Section title="Free-form autocomplete"><label htmlFor={`${id}-autocomplete`}>Destination</label><Autocomplete.Root items={cities} value={query} onValueChange={setQuery}><Autocomplete.Input id={`${id}-autocomplete`} placeholder="Choose a suggestion or enter another city"/><Autocomplete.Portal><Autocomplete.Positioner><Autocomplete.Popup><Autocomplete.Empty>No suggestions; you can keep your text.</Autocomplete.Empty><Autocomplete.List>{(item: string) => <Autocomplete.Item key={item} value={item}>{item}</Autocomplete.Item>}</Autocomplete.List></Autocomplete.Popup></Autocomplete.Positioner></Autocomplete.Portal><span>Current suggestion: <Autocomplete.Value/></span></Autocomplete.Root><Result>Destination: {query || 'empty'}</Result></Section><Section title="Autocomplete with dropdown actions"><label htmlFor={`${id}-actions`}>Destination with actions</label><Autocomplete.Root items={cities} defaultValue="Oslo"><Autocomplete.InputGroup><Autocomplete.Input id={`${id}-actions`}/><Autocomplete.Clear aria-label="Clear destination"/><Autocomplete.Trigger aria-label="Show destinations"><Autocomplete.Icon/></Autocomplete.Trigger></Autocomplete.InputGroup><Autocomplete.Portal><Autocomplete.Positioner><Autocomplete.Popup><Autocomplete.Empty>No suggestions</Autocomplete.Empty><Autocomplete.List>{(item: string) => <Autocomplete.Item key={item} value={item}>{item}</Autocomplete.Item>}</Autocomplete.List></Autocomplete.Popup></Autocomplete.Positioner></Autocomplete.Portal></Autocomplete.Root></Section><Section title="Multiple offices with removable chips"><Combobox.Root multiple items={cities} defaultValue={['Oslo']}><Combobox.Label render={<label htmlFor={`${id}-multiple`}/>}>Multiple offices</Combobox.Label><Combobox.Chips><Combobox.Value>{(values: string[]) => values.map(value => <Combobox.Chip key={value}>{value}<Combobox.ChipRemove aria-label={`Remove ${value}`}/></Combobox.Chip>)}</Combobox.Value><Combobox.Input id={`${id}-multiple`} placeholder="Add an office"/></Combobox.Chips><Combobox.Portal><Combobox.Positioner><Combobox.Popup><Combobox.List><Combobox.Collection>{(item: string) => <Combobox.Item key={item} value={item}>{item}<Combobox.ItemIndicator/></Combobox.Item>}</Combobox.Collection></Combobox.List><Combobox.Empty>No matching offices</Combobox.Empty></Combobox.Popup></Combobox.Positioner></Combobox.Portal></Combobox.Root></Section><GroupedPickers/></>;
}

const destinationGroups = [{label:'Northern Europe',items:['Copenhagen','Oslo','Stockholm']},{label:'City breaks',items:['Amsterdam','Berlin','Lisbon']}];
function GroupedPickers() {
    const id=useId();
    return <>
        <Section title="Grouped destinations">
            <label htmlFor={`${id}-grouped-city`}>Choose a grouped destination</label>
            <Combobox.Root items={destinationGroups}>
                <Combobox.InputGroup><Combobox.Input id={`${id}-grouped-city`} placeholder="Search destinations"/><Combobox.Trigger aria-label="Show grouped destinations"/></Combobox.InputGroup>
                <Combobox.Portal><Combobox.Positioner><Combobox.Popup><Combobox.List>{(group:typeof destinationGroups[number])=><Combobox.Group key={group.label} items={group.items}><Combobox.GroupLabel>{group.label}</Combobox.GroupLabel><Combobox.Collection>{(item:string)=><Combobox.Item key={item} value={item}>{item}<Combobox.ItemIndicator/></Combobox.Item>}</Combobox.Collection></Combobox.Group>}</Combobox.List><Combobox.Empty>No matching destinations.</Combobox.Empty></Combobox.Popup></Combobox.Positioner></Combobox.Portal>
            </Combobox.Root>
            <label htmlFor={`${id}-grouped-suggestion`}>Suggest a grouped destination</label>
            <Autocomplete.Root items={destinationGroups}>
                <Autocomplete.Input id={`${id}-grouped-suggestion`} placeholder="Type to see grouped suggestions"/>
                <Autocomplete.Portal><Autocomplete.Positioner><Autocomplete.Popup><Autocomplete.List>{(group:typeof destinationGroups[number])=><Autocomplete.Group key={group.label} items={group.items}><Autocomplete.GroupLabel>{group.label}</Autocomplete.GroupLabel><Autocomplete.Collection>{(item:string)=><Autocomplete.Item key={item} value={item}>{item}</Autocomplete.Item>}</Autocomplete.Collection></Autocomplete.Group>}</Autocomplete.List><Autocomplete.Empty>No suggestions; your text is retained.</Autocomplete.Empty></Autocomplete.Popup></Autocomplete.Positioner></Autocomplete.Portal>
            </Autocomplete.Root>
        </Section>
        <Section title="Scrollable selection">
            <Select.Root defaultValue="Destination 1" items={Array.from({length:30},(_,i)=>({value:`Destination ${i+1}`,label:`Destination ${i+1}`}))}>
                <Select.Trigger aria-label="Destination from a long list"><Select.Value/><Select.Icon/></Select.Trigger>
                <Select.Portal><Select.Positioner><Select.Popup><Select.ScrollUpArrow/><Select.List>{Array.from({length:30},(_,i)=><Select.Item key={i} value={`Destination ${i+1}`}><Select.ItemText>Destination {i+1}</Select.ItemText><Select.ItemIndicator/></Select.Item>)}</Select.List><Select.ScrollDownArrow/></Select.Popup></Select.Positioner></Select.Portal>
            </Select.Root>
        </Section>
    </>;
}