import { useRef, useState, useCallback } from 'react';
import { action } from '@storybook/addon-actions';
import { Button, Card, CardContent, CardFooter, Flex, TextArea, useAutoResize, useConsolidatedRef, useI18n } from '@pega/cosmos-react-core';
import { DynamicContentEditor } from '@pega/cosmos-react-rte';
import FieldSelector from './FieldSelector';
export default {
    title: 'RTE/DynamicContentEditor',
    component: DynamicContentEditor
};
export const DynamicContentEditorDemo = (args) => {
    const [html, setHtml] = useState('<p>Hi <pega-reference role="button" contenteditable="false" data-rule-type="field" data-rule-id="CustomerName" data-rule-namespace="XCompass">CustomerName</pega-reference><p>please check this <a href="https://google.com">link</a></p></p>');
    const rteRef = useRef(null);
    const fieldItems = [
        {
            id: 'CustomerName',
            primary: 'CustomerName',
            namespace: 'XCompass',
            items: [
                {
                    id: 'Locale',
                    primary: 'Locale',
                    namespace: 'XCompass'
                },
                {
                    id: 'Response Type',
                    primary: 'Response Type',
                    items: [
                        {
                            id: 'B',
                            label: 'B',
                            items: [{ id: 'Reply to', primary: 'Reply to' }]
                        },
                        { id: 'Forward to', primary: 'Forward to' }
                    ]
                }
            ]
        },
        { id: 'Address', primary: 'Address', namespace: 'PegaPlatform' },
        { id: 'Locality', primary: 'Locality', namespace: 'PegaPlatform' },
        { id: 'Country', primary: 'Country', namespace: 'XCompass' },
        { id: 'Region', primary: 'Region', namespace: 'PegaPlatform' },
        { id: 'Occupation', primary: 'Occupation', namespace: 'PegaPlatform' },
        { id: 'City', primary: 'City' },
        { id: 'Colony', primary: 'Colony' },
        { id: 'Lastname', primary: 'Lastname' },
        { id: 'Preference', primary: 'Preference' },
        { id: 'Currency', primary: 'Currency' },
        { id: 'Iconname', primary: 'Iconname' }
    ];
    const onImageAdded = (image, id) => {
        const src = URL.createObjectURL(image);
        rteRef.current?.appendImage({ src, alt: image.name }, id);
    };
    const [textAreaRef, resizeTextArea] = useAutoResize(undefined, 100);
    const ref = useRef(null);
    const consolidatedRef = useConsolidatedRef(textAreaRef, ref);
    const handleShowHtml = () => {
        resizeTextArea();
        setHtml(rteRef.current?.getHtml() || '');
    };
    const t = useI18n();
    const [selectedField, setSelectedField] = useState({
        id: '',
        text: ''
    });
    const updateSelection = (selectedItem) => {
        setSelectedField(selectedItem);
    };
    const onSubmit = useCallback((insertField) => {
        insertField(selectedField);
    }, [selectedField]);
    const dynamicContentPicker = (<Flex container={{
            gap: 2,
            direction: 'column'
        }}>
      <FieldSelector itemList={[
            { id: 'CustomerName', text: 'CustomerName', namespace: 'XCompass' },
            { id: 'Address', text: 'Address', namespace: 'PegaPlatform' },
            { id: 'Locality', text: 'Locality', namespace: 'PegaPlatform' },
            { id: 'Country', text: 'Country', namespace: 'XCompass' },
            { id: 'Region', text: 'Region', namespace: 'PegaPlatform' },
            { id: 'Occupation', text: 'Occupation', namespace: 'PegaPlatform' }
        ]} key={selectedField?.id} label='Field' updateSelection={updateSelection} placeholder={t('select')} defaultSelection={selectedField}/>
    </Flex>);
    const onActiveFieldChange = (field) => setSelectedField(field);
    return (<Flex container={{ direction: 'column', gap: 2 }}>
      <Card>
        <CardContent>
          <TextArea value={html} onChange={e => setHtml(e.target.value)} autoResize ref={consolidatedRef}/>
        </CardContent>
        <CardFooter>
          <Button onClick={() => rteRef.current?.insertHtml(html.trim(), true)}>
            Overwrite RTE with new HTML
          </Button>
        </CardFooter>
      </Card>
      <DynamicContentEditor defaultValue={args.defaultValue || html} onImageAdded={onImageAdded} ref={rteRef} label='Dynamic content editor' toolbar={['inline-styling', 'lists', 'indentation', 'links', 'images']} form={args.form || { onSubmit, dynamicContentPicker }} onActiveFieldChange={args.onActiveFieldChange || onActiveFieldChange} fieldItems={args.fieldItems || fieldItems} onBlur={action('Editor onBlur')}/>
      <Flex container={{ gap: 1 }}>
        <Button onClick={() => handleShowHtml()}>Show HTML</Button>
      </Flex>
    </Flex>);
};
//# sourceMappingURL=DynamicContentEditor.stories.jsx.map