'use client';
import { Check, Minus } from '@lucide/icons';
import { Icon } from '@fayegram-ai/faye-ui/core/icon';
import { useState } from 'react';
import { Checkbox } from '@fayegram-ai/faye-ui/controls/checkbox';
import { CheckboxGroup } from '@fayegram-ai/faye-ui/controls/checkbox-group';
import { Radio } from '@fayegram-ai/faye-ui/controls/radio';
import { RadioGroup } from '@fayegram-ai/faye-ui/controls/radio-group';
import { Switch } from '@fayegram-ai/faye-ui/controls/switch';
import { ControlLabel } from '@fayegram-ai/faye-ui/controls/field-layout';
import { ThemeScope } from '@fayegram-ai/faye-ui/provider/provider';
import { Stack, Inline } from '@fayegram-ai/faye-ui/layout/layout';
import { Section, Result } from '../example';
export default function Selection() {
    const [channels, setChannels] = useState<string[]>(['email']), [frequency, setFrequency] = useState('weekly'), [enabled, setEnabled] = useState(true);
    return <><Section title="Checkbox groups"><CheckboxGroup value={channels} onValueChange={setChannels} aria-label="Notification channels"><Stack gap="3">{['email', 'inbox', 'mobile'].map(value => <ControlLabel key={value} label={value}>{attrs => <Checkbox.Root {...attrs} value={value}><Checkbox.Indicator><Icon icon={Check} size="xs"/></Checkbox.Indicator></Checkbox.Root>}</ControlLabel>)}</Stack></CheckboxGroup><Inline wrap gap="5"><ControlLabel label="Mixed state">{attrs => <Checkbox.Root {...attrs} indeterminate><Checkbox.Indicator><Icon icon={Minus} size="xs"/></Checkbox.Indicator></Checkbox.Root>}</ControlLabel><ControlLabel label="Disabled" disabled>{attrs => <Checkbox.Root {...attrs} defaultChecked><Checkbox.Indicator><Icon icon={Check} size="xs"/></Checkbox.Indicator></Checkbox.Root>}</ControlLabel></Inline><Result>Channels: {channels.join(', ') || 'none'}</Result></Section>
    <Section title="Mutually exclusive options"><RadioGroup value={frequency} onValueChange={value => setFrequency(String(value))} aria-label="Digest frequency"><Stack gap="3">{['daily', 'weekly', 'never'].map(value => <ControlLabel key={value} label={value} description={value === 'weekly' ? 'A weekly selection of places and stories, picked for you.' : undefined}>{attrs => <Radio.Root {...attrs} value={value}><Radio.Indicator/></Radio.Root>}</ControlLabel>)}</Stack></RadioGroup><Result>Frequency: {frequency}</Result></Section>
    <Section title="Immediate state changes"><ControlLabel label="Enable notifications" description="Hear about new places without losing your current view.">{attrs => <Switch.Root {...attrs} checked={enabled} onCheckedChange={setEnabled}><Switch.Thumb/></Switch.Root>}</ControlLabel><Result>Notifications {enabled ? 'enabled' : 'disabled'}</Result><ThemeScope direction="ltr"><ControlLabel label="Nested left-to-right switch">{attrs => <Switch.Root {...attrs} defaultChecked variants={{size: 'sm'}}><Switch.Thumb/></Switch.Root>}</ControlLabel></ThemeScope></Section></>;
}