import { useRef, useState } from 'react';
import { Flex, Link } from '@pega/cosmos-react-core';
import { HashtagButtonConfig, MentionButtonConfig } from '@pega/cosmos-react-social';
import { RichTextViewer, RichTextEditor, getXMLAttributes } from '@pega/cosmos-react-rte';
import { demoUsers } from './RichTextEditor.mocks';
export default {
    title: 'RTE/RichTextViewer',
    component: RichTextViewer,
    args: {
        content: undefined
    },
    argTypes: {
        content: { control: { type: 'text' }, table: { disable: true } }
    }
};
export const RichTextViewerDemo = (args) => {
    const editorRef = useRef(null);
    const [content, setContent] = useState('[]');
    return (<Flex container={{ direction: 'column', gap: 2 }}>
      <RichTextEditor ref={editorRef} toolbar={[
            'inline-styling',
            'headers',
            'tables',
            'links',
            'lists',
            'cut-copy-paste',
            'indentation'
        ]} onChange={() => setContent(editorRef.current?.getRichText() || '')}/>

      <RichTextViewer content={args.content || content} type='richtext'/>
    </Flex>);
};
export const RichTextViewerHTMLDemo = (args) => {
    const editorRef = useRef(null);
    const [content, setContent] = useState('');
    return (<Flex container={{ direction: 'column', gap: 2 }}>
      <RichTextEditor ref={editorRef} toolbar={[
            'inline-styling',
            'headers',
            'tables',
            'links',
            'lists',
            'cut-copy-paste',
            'indentation'
        ]} onChange={() => setContent(editorRef.current?.getHtml() || '')}/>

      <RichTextViewer content={args.content || content} type='html' interactionRenderers={args.interactionRenderers
            ? [
                {
                    regexPattern: /A custom pattern/g,
                    type: 'custom'
                }
            ]
            : undefined}/>
    </Flex>);
};
RichTextViewerHTMLDemo.args = {
    interactionRenderers: false
};
RichTextViewerHTMLDemo.argTypes = {
    interactionRenderers: { control: { type: 'boolean' } }
};
export const RichTextViewerHTMLOverflowDemo = () => {
    const editorRef = useRef(null);
    const [content, setContent] = useState(() => "<p style='background-color: green; width: 110%; height: 100px;'>hi</p>");
    return (<Flex container={{ direction: 'column', gap: 2 }}>
      <RichTextEditor ref={editorRef} toolbar={[
            'inline-styling',
            'headers',
            'tables',
            'links',
            'lists',
            'cut-copy-paste',
            'indentation'
        ]} defaultValue={content} onChange={() => setContent(editorRef.current?.getHtml() || '')}/>

      <RichTextViewer content={content} type='html'/>
    </Flex>);
};
export const RichTextViewerMDDemo = (args) => {
    const LinkComponent = ({ token }) => {
        return (<Link href={token.href} previewable>
        {token.text}
      </Link>);
    };
    const editorRef = useRef(null);
    const [content, setContent] = useState('');
    const [users, setUsers] = useState(demoUsers);
    const searchUsers = (event) => {
        if (event.trigger === '@') {
            setUsers(demoUsers.filter(user => {
                return user.primary.toLowerCase().includes(event.search.toLowerCase());
            }));
        }
    };
    const getSearchAttributes = (xmlElement, searchResult) => {
        if (xmlElement === 'pega-mention') {
            const attributes = getXMLAttributes(searchResult);
            if (!attributes)
                return;
            return {
                markdown: searchResult,
                component: MentionButtonConfig.component,
                props: attributes,
                text: attributes.text
            };
        }
    };
    return (<Flex container={{ direction: 'column', gap: 2 }}>
      <RichTextEditor markdownOnly ref={editorRef} searchTriggers={[
            { trigger: '@', regex: String.raw `(?:\S+(?:[^\n\S][^@#\s]\S*)*[^\n\S]?|)` },
            { trigger: '#', regex: String.raw `[^\s,]*` }
        ]} getSearchItemReplacement={(id) => {
            const item = users.find(({ id: itemId }) => itemId === id);
            if (!item)
                return undefined;
            return {
                markdown: MentionButtonConfig.inject({
                    id: item.id,
                    type: 'user',
                    text: item.primary
                }),
                component: MentionButtonConfig.component,
                props: {
                    id: item.id,
                    text: item.primary,
                    type: 'user',
                    tabIndex: -1
                },
                text: item.primary
            };
        }} searchRenderers={[
            {
                type: MentionButtonConfig.type,
                xmlElement: MentionButtonConfig.xmlElement,
                regexPattern: MentionButtonConfig.regexPattern,
                getSearchAttributes
            },
            {
                type: HashtagButtonConfig.type,
                xmlElement: HashtagButtonConfig.xmlElement,
                regexPattern: HashtagButtonConfig.regexPattern,
                getSearchAttributes
            }
        ]} onSearch={searchUsers} menu={users.length ? { items: users } : undefined} defaultValue={"# Try writing some of your own markdown and see how it renders!\n\nYou can interact with mentions such as <pega-mention id='deans' text='Seth DeAngelo' type='user'/>\n\nThere is built in support for <pega-tag tag='tags'/> as well!\n\nComponent renderings can also be conditionally overwritten: [Link](https://www.google.com) -- [Link with preview](https://www.pega.com)"} onChange={() => setContent(editorRef.current?.getPlainText() || '')}/>

      <RichTextViewer content={args.content || content} type='markdown' interactionRenderers={[MentionButtonConfig, HashtagButtonConfig]} markdownMap={{
            link: (linkToken) => {
                if (linkToken.href?.includes('www.pega.com'))
                    return LinkComponent;
            }
        }}/>
    </Flex>);
};
//# sourceMappingURL=RichTextViewer.stories.jsx.map