'use client';
import { useState } from 'react';
import { ThemeScope, useAccessibilityPreferences, useVisualScope } from '@fayegram-ai/faye-ui/provider/provider';
import { AccessibilityPreferences, type AccessibilityPreferencesValue } from '@fayegram-ai/faye-ui/patterns/accessibility-preferences';
import { InteractionHint } from '@fayegram-ai/faye-ui/overlays/interaction-hint';
import { Dialog } from '@fayegram-ai/faye-ui/overlays/dialog';
import { Button } from '@fayegram-ai/faye-ui/controls/button';
import { Input } from '@fayegram-ai/faye-ui/controls/input';
import { ControlLabel } from '@fayegram-ai/faye-ui/controls/field-layout';
import { Field } from '@fayegram-ai/faye-ui/controls/field';
import { Radio } from '@fayegram-ai/faye-ui/controls/radio';
import { RadioGroup } from '@fayegram-ai/faye-ui/controls/radio-group';
import { Slider } from '@fayegram-ai/faye-ui/controls/slider';
import { Rating } from '@fayegram-ai/faye-ui/controls/rating';
import { Text } from '@fayegram-ai/faye-ui/core/text';
import { Inline, Stack } from '@fayegram-ai/faye-ui/layout/layout';
import { Section } from '../example';

const responsiveAction = { maxInlineSize: '100%', whiteSpace: 'normal' } as const;

function Controls() {
    const preferences = useAccessibilityPreferences();
    return <Stack gap="4">
        <Text as="p" size="sm" tone="muted">Use Tab to explore. Optional hints follow the focused control; labels and form help stay visible.</Text>
        <Inline wrap><InteractionHint content="Press Enter or Space to activate this action."><Button style={responsiveAction} data-testid="assistance-action">Save a place</Button></InteractionHint><InteractionHint content="This action cannot currently be used."><Button style={responsiveAction} disabled>Unavailable action</Button></InteractionHint><Button style={responsiveAction}>Next action</Button></Inline>
        <Field.Root><Field.Label>Collection name</Field.Label><InteractionHint content="Type a name, then press Tab to continue."><Input defaultValue="Weekend ideas" data-testid="assistance-input"/></InteractionHint><Field.Description>This name is visible only in this preview.</Field.Description></Field.Root>
        <RadioGroup defaultValue="weekly" aria-label="Update frequency"><ControlLabel label="Weekly updates">{attrs => <Radio.Root {...attrs} value="weekly"><Radio.Indicator/></Radio.Root>}</ControlLabel><ControlLabel label="Monthly updates">{attrs => <Radio.Root {...attrs} value="monthly"><Radio.Indicator/></Radio.Root>}</ControlLabel></RadioGroup>
        <InteractionHint content="Use arrow keys to adjust; Home and End jump to either limit."><Slider.Root defaultValue={40} aria-label="Preview volume"><Text as="p" size="sm">Preview volume</Text><Slider.Control><Slider.Track><Slider.Indicator/><Slider.Thumb aria-label="Preview volume"/></Slider.Track></Slider.Control><Slider.Value/></Slider.Root></InteractionHint>
        <Rating label="Preview rating" defaultValue={3} clearable/>
        <Dialog.Root><Dialog.Trigger render={<Button style={responsiveAction}/>}>Open assistance dialog</Dialog.Trigger><Dialog.Portal><Dialog.Backdrop/><Dialog.Popup><Dialog.Header><Dialog.Title>Keep your collection</Dialog.Title><Dialog.Close aria-label="Close assistance dialog"/></Dialog.Header><Dialog.Body><Text as="p">The dialog uses the same accessibility preferences.</Text><InteractionHint content="Press Enter to keep this collection."><Button style={responsiveAction} data-testid="assistance-dialog-action">Keep collection</Button></InteractionHint></Dialog.Body></Dialog.Popup></Dialog.Portal></Dialog.Root>
        <Text as="p" size="sm" data-testid="assistance-status">Focus: {preferences.focus}; hints: {preferences.hints}; contrast: {preferences.contrast}.</Text>
    </Stack>;
}
export default function AccessibilityExample() {
    const inherited = useAccessibilityPreferences(), scope = useVisualScope();
    const [override, setValue] = useState<AccessibilityPreferencesValue>();
    const value = override ?? { ...inherited, motion: scope.motion };
    const { motion, ...accessibility } = value;
    return <ThemeScope accessibility={accessibility} motion={motion} data-testid="assistance-preview"><Section title="Adaptive accessibility preferences"><AccessibilityPreferences value={value} onValueChange={setValue}/></Section><Section title="Focus guidance and floating hints"><Controls/></Section><Section title="A local automatic scope"><ThemeScope accessibility={{ focus: 'auto', hints: 'auto', contrast: 'system' }} data-testid="assistance-automatic"><InteractionHint content="This hint follows keyboard navigation."><Button style={responsiveAction} data-testid="assistance-automatic-action">Automatic guidance</Button></InteractionHint></ThemeScope></Section></ThemeScope>;
}