import { useReducer, useRef, useState, useEffect } from 'react';
import { Button, Checkbox, CheckboxGroup, Form, Grid, Input, RadioButton, RadioButtonGroup, Select, Option, TextArea, useToaster, usePrevious, DateTimeInput, NumberRangeInput } from '@pega/cosmos-react-core';
import { Editor as RichTextEditor } from '@pega/cosmos-react-rte';
import { FileInputDemo } from '../File/FileInput.stories';
import { FilterableSingleSelect as ComboboxFilterableStory } from '../ComboBox/ComboBox.stories';
const initFields = () => {
    const common = { value: undefined, status: undefined };
    return [
        {
            ...common,
            name: 'name',
            required: true,
            error: 'Please enter first and last name',
            validator() {
                if (!this.value)
                    return false;
                return /^[a-z]+\s[a-z]+$/i.test(this.value);
            }
        },
        {
            ...common,
            name: 'email',
            required: true,
            error: 'Enter a @pega.com address',
            validator() {
                if (!this.value)
                    return false;
                return /^\S+@pega\.com$/.test(this.value);
            }
        },
        {
            ...common,
            name: 'notes',
            required: true,
            help: 'See how fast you can type 20 characters…go',
            error: 'You need to tell us more than 20 characters',
            validator() {
                if (!this.value)
                    return false;
                return this.value.length >= 20;
            }
        }
    ];
};
const fieldReducer = (fields, { target, type }) => {
    return fields.map(field => {
        if (field.name === target.name) {
            field.value = target.value;
            if (type === 'blur' || field.status === 'error') {
                if ((field.required || field.value) && !field.validator()) {
                    field.status = 'error';
                    field.info = field.error;
                }
                else {
                    field.status = undefined;
                    field.info = field.help;
                }
            }
        }
        return field;
    });
};
export const FormContent = ({ cols, heading, description, showActions }) => {
    const editorRef = useRef(null);
    const [fields, setField] = useReducer(fieldReducer, undefined, initFields);
    const { push } = useToaster();
    const name = fields.find(field => field.name === 'name');
    const email = fields.find(field => field.name === 'email');
    const notes = fields.find(field => field.name === 'notes');
    if (!name || !email || !notes)
        return null;
    const canSubmit = fields.every(field => field.value && field.validator());
    const actions = (<>
      <Button name='Cancel' variant='secondary' onClick={() => {
            push({ content: 'Form cancelled!' });
        }}>
        Cancel
      </Button>
      <Button name='Submit' type='submit' variant='primary' disabled={!canSubmit}>
        Submit
      </Button>
    </>);
    const onImageAdded = (image, id) => {
        const src = URL.createObjectURL(image);
        editorRef.current?.appendImage({ src, alt: image.name }, id);
    };
    return (<Form actions={showActions ? actions : undefined} description={description} heading={heading} onSubmit={(e) => {
            e.preventDefault();
            push({ content: 'Form submitted!' });
        }} style={{ margin: 'auto', maxWidth: '37.5rem' }}>
      <Grid container={{ gap: 1, cols: `repeat(${cols}, minmax(0, 1fr))` }}>
        <Input name='name' label='Name' value={name.value} status={name.status} info='some help text here' onChange={(e) => setField({ ...e })} onBlur={(e) => setField({ ...e })} additionalInfo={{
            heading: 'Field info',
            content: 'Lorem ipsum dolor set amet.'
        }} required/>

        <Input name='email' value={email.value} type='email' label='Email' required={email.required} status={email.status} info='some help text here' onChange={(e) => setField({ ...e })} onBlur={(e) => setField({ ...e })} additionalInfo={{
            heading: 'Field info',
            content: 'Lorem ipsum dolor set amet.'
        }}/>

        <Grid item={{ colStartEnd: '1/-1' }}>
          <CheckboxGroup name='visited' label='Places you have worked' additionalInfo={{
            heading: 'Field info',
            content: 'Lorem ipsum dolor set amet.'
        }} required>
            {['Cambridge', 'Krakow', 'Hyderabad', 'Bangalore'].map(office => (<Checkbox key={office} label={office} onChange={(e) => setField({ ...e })}/>))}
          </CheckboxGroup>
        </Grid>

        <Grid item={{ colStartEnd: '1/-1' }}>
          <Checkbox additionalInfo={{
            heading: 'Field info',
            content: 'Lorem ipsum dolor set amet.'
        }} label='Check me, please' required/>
        </Grid>

        <Grid item={{ colStartEnd: '1/-1' }}>
          <RadioButtonGroup name='meetings' label='Do you enjoy early morning meetings?' additionalInfo={{
            heading: 'Field info',
            content: 'Lorem ipsum dolor set amet.'
        }} required>
            {['Yes', "No… no I don't"].map(option => (<RadioButton key={option} label={option} onChange={(e) => setField({ ...e })}/>))}
          </RadioButtonGroup>
        </Grid>

        <Select label='What would you like to eat?' info='FYI: options are limited' additionalInfo={{
            heading: 'Field info',
            content: 'Lorem ipsum dolor set amet.'
        }} required>
          <Option>choose meal…</Option>
          <Option>Pizza</Option>
          <Option>Sandwich</Option>
          <Option>Salad</Option>
        </Select>

        <DateTimeInput label='Preferred date' additionalInfo={{
            heading: 'Field info',
            content: 'Lorem ipsum dolor set amet.'
        }} required/>

        <Grid item={{ colStartEnd: '1/-1' }}>
          <TextArea name='notes' required={notes.required} label='Meeting notes' status={notes.status} info={notes.info || notes.help} onChange={(e) => setField({ ...e })} onBlur={(e) => setField({ ...e })} additionalInfo={{
            heading: 'Field info',
            content: 'Lorem ipsum dolor set amet.'
        }}/>
          SD
        </Grid>

        <Grid item={{ colStartEnd: '1/-1' }}>
          <RichTextEditor label='Detailed meeting notes' info='The rich text editor can be used in forms, comments, and documents' toolbar={[
            'inline-styling',
            'headers',
            'tables',
            'links',
            'images',
            'lists',
            'cut-copy-paste',
            'indentation'
        ]} onImageAdded={onImageAdded} ref={editorRef} additionalInfo={{
            heading: 'Field info',
            content: 'Lorem ipsum dolor set amet.'
        }} required/>
        </Grid>
        <Grid item={{ colStartEnd: '1/-1' }}>
          <FileInputDemo label='Meeting attachments'/>
        </Grid>

        <ComboboxFilterableStory label='Select a user'/>

        <NumberRangeInput label='Optimal temperature' info='What is the range of temperature you prefer?' additionalInfo={{
            heading: 'Field info',
            content: 'Lorem ipsum dolor set amet.'
        }} required onChange={() => { }}/>
      </Grid>
    </Form>);
};
export const ReadOnlyFormContent = ({ cols, heading, description, showActions }) => {
    const [value, setValue] = useState({ start: 1, end: '3' });
    const prev = usePrevious(value);
    useEffect(() => {
        if (prev !== value)
            setValue(value);
    }, [prev, value]);
    const [fields] = useReducer(fieldReducer, undefined, initFields);
    const { push } = useToaster();
    const name = fields.find(field => field.name === 'name');
    const email = fields.find(field => field.name === 'email');
    const notes = fields.find(field => field.name === 'notes');
    if (!name || !email || !notes)
        return null;
    const canSubmit = fields.every(field => field.value && field.validator());
    const actions = (<>
      <Button name='Cancel' variant='secondary' onClick={() => {
            push({ content: 'Form cancelled!' });
        }}>
        Cancel
      </Button>
      <Button name='Submit' type='submit' variant='primary' disabled={!canSubmit}>
        Submit
      </Button>
    </>);
    return (<Form actions={showActions ? actions : undefined} description={description} heading={heading} onSubmit={(e) => {
            e.preventDefault();
            push({ content: 'Form submitted!' });
        }} style={{ margin: 'auto', maxWidth: '37.5rem' }}>
      <Grid container={{ gap: 1, cols: `repeat(${cols}, minmax(0, 1fr))` }}>
        <Input readOnly name='name' label='Name' value='Test' required={false} status={name.status} additionalInfo={{
            heading: 'Field info',
            content: 'Lorem ipsum dolor set amet.'
        }}/>

        <Grid item={{ colStartEnd: '1/-1' }}>
          <CheckboxGroup name='places visited' label='Places you have worked' additionalInfo={{
            heading: 'Field info',
            content: 'Lorem ipsum dolor set amet.'
        }} readOnly required>
            <Checkbox key='Cambridge' label='Cambridge'/>
            <Checkbox key='Krakow' label='Krakow'/>
            <Checkbox key='Hyderabad' label='Hyderabad'/>
            <Checkbox key='Bangalore' label='Bangalore'/>
          </CheckboxGroup>
        </Grid>

        <Grid item={{ colStartEnd: '1/-1' }}>
          <RadioButtonGroup name='meetings' label='Do you really enjoy early morning meetings?' additionalInfo={{
            heading: 'Field info',
            content: 'Lorem ipsum dolor set amet.'
        }} required>
            <RadioButton key='Yes' label='Yes'/>
            <RadioButton key="No.. no I don't" label="No.. no I don't" readOnly/>
          </RadioButtonGroup>
        </Grid>

        <Grid item={{ colStartEnd: '1/-1' }}>
          <CheckboxGroup name='more places visited' label='More Places you have worked' additionalInfo={{
            heading: 'Field info',
            content: 'Lorem ipsum dolor set amet.'
        }} required>
            <Checkbox key='Cambridge' label='Cambridge' readOnly/>
            <Checkbox key='Krakow' label='Krakow'/>
            <Checkbox key='Hyderabad' label='Hyderabad'/>
            <Checkbox key='Bangalore' label='Bangalore'/>
          </CheckboxGroup>
        </Grid>

        <Grid item={{ colStartEnd: '1/-1' }}>
          <RadioButtonGroup name='meetings' label='Do you enjoy early morning meetings?' additionalInfo={{
            heading: 'Field info',
            content: 'Lorem ipsum dolor set amet.'
        }} readOnly allReadOnly required>
            <RadioButton key='Yes' label='Yes'/>
            <RadioButton key="No.. no I don't" label="No.. no I don't"/>
          </RadioButtonGroup>
        </Grid>

        <Select label='What would you like to eat?' info='' additionalInfo={{
            heading: 'Field info',
            content: 'Lorem ipsum dolor set amet.'
        }} readOnly>
          <Option>choose meal…</Option>
          <Option selected>Pizza</Option>
          <Option>Sandwich</Option>
          <Option>Salad</Option>
        </Select>

        <Grid item={{ colStartEnd: '1/-1' }}>
          <TextArea readOnly name='notes' required={false} label='Meeting notes' status={notes.status} info={notes.info || notes.help} value='Test copy' additionalInfo={{
            heading: 'Field info',
            content: 'Lorem ipsum dolor set amet.'
        }}/>
        </Grid>
      </Grid>
    </Form>);
};
//# sourceMappingURL=Form.mocks.jsx.map