import { useRef, useState } from 'react';
import { Button, Flex } from '@pega/cosmos-react-core';
import { RichTextEditor } from '@pega/cosmos-react-rte';
import { MentionButton } from '@pega/cosmos-react-social';
import { demoUsers } from './RichTextEditor.mocks';
export default {
    title: 'RTE/RichTextEditor',
    component: RichTextEditor
};
export const RichTextEditorMDDemo = (args) => {
    const [users, setUsers] = useState(demoUsers);
    const searchUsers = (event) => {
        if (event.trigger === '@') {
            setUsers(demoUsers.filter(user => {
                return user.primary.toLowerCase().includes(event.search.toLowerCase());
            }));
        }
    };
    return (<RichTextEditor searchTriggers={[{ trigger: '@', regex: '[a-zA-Z]*(?: [a-zA-Z]*)?' }]} onSearch={searchUsers} getSearchItemReplacement={(id) => {
            const item = demoUsers.find(({ id: itemId }) => itemId === id);
            if (!item)
                return undefined;
            return {
                markdown: `@${item.id}:${item.primary}:user:`,
                text: item.primary,
                component: MentionButton,
                props: {
                    id: item.id,
                    text: item.primary,
                    type: 'user'
                }
            };
        }} menu={users.length ? { items: users } : undefined} markdownOnly label={args.label} labelHidden={args.labelHidden} info={args.info} status={args.status} required={args.required} disabled={args.disabled} readOnly={args.readOnly} autoFocus/>);
};
RichTextEditorMDDemo.args = {
    label: 'Rich text editor',
    labelHidden: false,
    info: 'The markdown editor offers dynamic rendering of markdown syntax',
    status: undefined,
    required: false,
    disabled: false,
    readOnly: false
};
RichTextEditorMDDemo.argTypes = {
    label: { control: { type: 'text' } },
    labelHidden: { control: { type: 'boolean' } },
    info: { control: { type: 'text', label: 'Helper text' } },
    status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },
    required: { control: { type: 'boolean' } },
    disabled: { control: { type: 'boolean' } },
    readOnly: { control: { type: 'boolean' } }
};
export const RichTextEditorImperativeHandleDemo = () => {
    const rteRef = useRef(null);
    const [textContent, setTextContent] = useState('');
    return (<>
      <RichTextEditor ref={rteRef} type='html' toolbar={['headers', 'inline-styling', 'indentation', 'lists']} defaultValue='Hello, World! '/>
      <Flex container={{ gap: 1, pad: 1 }}>
        <Button data-testid='focusHandle' onClick={() => {
            rteRef.current?.focus();
        }}>
          Focus
        </Button>
        <Button data-testid='plainTextHandle' onClick={() => {
            setTextContent(rteRef.current?.getPlainText() || '');
        }}>
          Get plain text
        </Button>
        <Button data-testid='richTextHandle' onClick={() => {
            setTextContent(rteRef.current?.getRichText() || '');
        }}>
          Get rich text
        </Button>
        <Button data-testid='htmlHandle' onClick={() => {
            setTextContent(rteRef.current?.getHtml() || '');
        }}>
          Get HTML
        </Button>
        <Button data-testid='clearHandle' onClick={() => {
            rteRef.current?.clear();
        }}>
          Clear
        </Button>
        <Button data-testid='insertTextHandle' onClick={() => {
            rteRef.current?.insertText('Some text');
        }}>
          Insert text
        </Button>
        <Button data-testid='insertHTMLHandle' onClick={() => {
            rteRef.current?.insertHtml('Some text', true);
        }}>
          Insert HTML
        </Button>
        <Button data-testid='appendHTMLHandle' onClick={() => {
            rteRef.current?.insertHtml('Some text', false);
        }}>
          Append HTML
        </Button>
        <Button data-testid='insertEmptyHTMLHandle' onClick={() => {
            rteRef.current?.insertHtml('', true);
        }}>
          Insert empty HTML
        </Button>
      </Flex>
      <div data-testid='textRegion'>{textContent}</div>
    </>);
};
//# sourceMappingURL=RichTextEditor.stories.jsx.map