import { createDocumentation, createComponent } from "../../../../globals/documentation/story";
import docs from "./pn-chat-message-docs.json";
const { argTypes, textContent } = createDocumentation(docs);
/** Write a short introduction */
const meta = {
    title: 'Components/Widgets/Chat message',
    parameters: {
        actions: {},
        docs: {
            description: {
                story: textContent,
            },
        },
    },
    args: {},
    argTypes,
};
export default meta;
function createStory(messageCustomerSegment) {
    const container = document.createElement('div');
    container.style.display = 'flex';
    container.style.flexDirection = 'column';
    container.style.gap = '1rem';
    const createBotMessage = (message) => {
        const component = createComponent('pn-chat-message', {
            'customerSegment': messageCustomerSegment,
            'category': message.category,
            'role': 'log',
            'aria-live': 'polite',
        });
        const content = document.createElement('div');
        content.textContent = message.content;
        component.appendChild(content);
        return component;
    };
    const createUserMessage = (message) => {
        const component = createComponent('pn-chat-message', {
            'customerSegment': messageCustomerSegment,
            'category': message.category,
            'class': message.class,
            'role': 'log',
            'aria-live': 'polite',
        });
        const content = document.createElement('div');
        content.textContent = message.content;
        component.appendChild(content);
        return component;
    };
    const createAgentMessage = (message) => {
        const component = createComponent('pn-chat-message', {
            'customerSegment': messageCustomerSegment,
            'category': message.category,
            'role': 'log',
            'aria-live': 'polite',
            'agent-name': message.agentName,
        });
        const content = document.createElement('div');
        content.textContent = message.content;
        component.appendChild(content);
        return component;
    };
    const createButtonMessage = (message) => {
        const component = createComponent('pn-chat-message', {
            customerSegment: messageCustomerSegment,
            category: message.category,
        });
        const button = createComponent('pn-button', {
            class: message.class,
            role: 'button',
        });
        button.textContent = message.content;
        button.addEventListener('keydown', e => {
            console.log(e, 'button pressed');
        });
        component.appendChild(button);
        return component;
    };
    const createLinkMessage = (message) => {
        const component = createComponent('pn-chat-message', {
            customerSegment: messageCustomerSegment,
            category: message.category,
        });
        const link = document.createElement('a');
        link.href = message.href;
        link.setAttribute('role', 'link');
        link.setAttribute('aria-label', message.content);
        link.setAttribute('rel', 'noopener noreferrer');
        const span = document.createElement('span');
        span.className = 'content';
        span.textContent = message.content;
        link.appendChild(span);
        const icon = createComponent('pn-icon', {
            'color': 'blue700',
            'aria-hidden': 'true',
            'role': 'presentation',
        });
        link.appendChild(icon);
        component.appendChild(link);
        return component;
    };
    const createCardMessage = (message) => {
        const component = createComponent('pn-chat-message', {
            'customerSegment': messageCustomerSegment,
            'category': message.category,
            'data-card': '',
            'role': 'article',
        });
        const heading = document.createElement('h2');
        heading.className = 'card-heading';
        heading.textContent = message.heading;
        component.appendChild(heading);
        const paragraph = document.createElement('p');
        paragraph.textContent = message.content;
        component.appendChild(paragraph);
        if (message.buttons) {
            const ctaContainer = document.createElement('div');
            ctaContainer.classList.add('cta');
            message.buttons.forEach(button => {
                const btnElement = createComponent('pn-button', {
                    'href': button.href,
                    'class': button.class,
                    'appearance': button.appearance,
                    'variant': button.variant,
                    'small': button.small,
                    'role': 'button',
                    'aria-label': button.content,
                });
                btnElement.textContent = button.content;
                btnElement.addEventListener('keydown', e => {
                    console.log(e, 'button pressed');
                });
                ctaContainer.appendChild(btnElement);
            });
            component.appendChild(ctaContainer);
        }
        return component;
    };
    const messages = [
        createBotMessage({
            messageId: "1234567890",
            customerSegment: messageCustomerSegment,
            category: 'Bot',
            content: 'This is a bot (base) message',
        }),
        createUserMessage({
            messageId: "1234567890",
            customerSegment: messageCustomerSegment,
            category: 'User',
            content: 'This is a user message',
            class: 'user',
        }),
        createButtonMessage({
            messageId: "1234567890",
            customerSegment: messageCustomerSegment,
            category: 'Button',
            content: 'Click me',
            class: 'primary-button',
            props: '',
        }),
        createLinkMessage({
            messageId: "1234567890",
            customerSegment: messageCustomerSegment,
            category: 'Link',
            content: 'Visit our website',
            href: 'https://example.com'
        }),
        createAgentMessage({
            messageId: "1234567890",
            customerSegment: messageCustomerSegment,
            category: 'Agent',
            content: 'This is a agent message',
            agentName: 'PN'
        }),
        createCardMessage({
            messageId: "1234567890",
            customerSegment: messageCustomerSegment,
            category: 'Card',
            heading: 'Card Title',
            content: 'This is a card message with some content.',
            buttons: [
                {
                    content: 'Primary Action',
                    href: '#',
                    class: 'read-more',
                    appearance: '',
                    variant: '',
                    small: true,
                },
                {
                    content: 'Secondary Action',
                    href: 'https://example.com',
                    class: 'read-more',
                    appearance: 'light',
                    variant: 'outlined',
                    small: true,
                },
            ],
        }),
    ];
    messages.forEach(message => {
        container.appendChild(message);
    });
    return container;
}
export const ChatMessageExample = {
    name: 'All message types (Private)',
    render: () => {
        const customerSegment = 'Private';
        return createStory(customerSegment);
    },
};
export const ChatMessageExample2 = {
    name: 'All message types (Business)',
    render: () => {
        const customerSegment = 'Business';
        return createStory(customerSegment);
    },
};
//# sourceMappingURL=pn-chat-message.stories.js.map
