import { useMemo, useState } from 'react';
import { action } from '@storybook/addon-actions';
import { HTML, Card, menuHelpers } from '@pega/cosmos-react-core';
import { ArticleBuddy } from '@pega/cosmos-react-work';
import { ArticleBuddyMockData } from './ArticleList.mocks';
export default {
    title: 'Work/ArticleList',
    component: ArticleBuddy
};
export const ArticleBuddyDemo = (args) => {
    const [searchVal, setSearchVal] = useState('');
    const [commentVal, setCommentVal] = useState('');
    const [loading, setLoading] = useState(false);
    const [searchResult, setSearchResult] = useState();
    const [reaction, setReaction] = useState(undefined);
    const [showThankYouMessage, setShowThankYouMessage] = useState(false);
    const [items, setItems] = useState(() => Array.from({ length: 10 }, (_, i) => {
        return {
            id: `${i + 1}`,
            primary: `Buddy ${i + 1}`,
            selected: false
        };
    }));
    const [buddyInfo, setBuddyInfo] = useState('');
    const updateBuddyArticles = (mockBuddyArticle) => {
        const actionItems = {
            items: [
                { id: '1', text: 'Share' },
                { id: '2', text: 'Copy' }
            ]
        };
        return {
            title: mockBuddyArticle?.title,
            content: mockBuddyArticle?.content,
            references: mockBuddyArticle?.references,
            disclaimer: mockBuddyArticle?.disclaimer,
            actions: actionItems
        };
    };
    const fetchSearchResult = () => {
        return new Promise(resolve => {
            setTimeout(() => {
                resolve({
                    data: updateBuddyArticles(ArticleBuddyMockData)
                });
            }, 1000);
        });
    };
    const getResults = async () => {
        setLoading(true);
        const res = await fetchSearchResult();
        setSearchResult(res.data);
        setLoading(false);
    };
    const queryParams = {
        label: 'Ask buddy',
        placeholder: 'Ask your question here...',
        value: searchVal,
        onChange: (e) => setSearchVal(e.target.value),
        labelHidden: true
    };
    const commentParams = {
        placeholder: 'How can I improve...',
        value: commentVal,
        onChange: (e) => setCommentVal(e.target.value),
        labelHidden: false
    };
    const onReaction = (feedback) => {
        setReaction(feedback);
    };
    const feedbackProps = {
        question: 'Was this helpful?',
        reaction,
        onReaction,
        comment: commentParams,
        onSubmit: (response) => {
            action('onClick')(`Response sent ${response.reaction} ${response.comment}`);
            setCommentVal('');
            setReaction(undefined);
            setShowThankYouMessage(true);
        },
        showThankYouMessage
    };
    const handleMenuItemClick = (id) => {
        setItems(cur => menuHelpers.toggleSelected(cur, id, 'single-select'));
        setBuddyInfo(`Buddy ${id}`);
    };
    const itemsToRender = useMemo(() => {
        return menuHelpers.mapTree(items, item => {
            return {
                ...item,
                visual: undefined,
                secondary: undefined
            };
        });
    }, [items]);
    const buttonText = useMemo(() => {
        const selected = menuHelpers.getSelected(items)[0];
        return selected ? selected.primary : 'Select buddy';
    }, [items]);
    const buddyListProps = {
        text: buttonText,
        variant: 'text',
        menu: {
            items: itemsToRender,
            onItemClick: handleMenuItemClick
        },
        contextualLabel: buttonText === 'Select buddy' ? buttonText : `Selected buddy: ${buttonText}`
    };
    const onClickRelatedQuestions = (item) => {
        setSearchVal(item.name);
        getResults();
    };
    const relatedQuestions = {
        title: 'Related questions',
        items: [
            { id: '1', name: 'How to file complaint?', onClick: onClickRelatedQuestions },
            {
                id: '2',
                name: 'How to view profile?',
                onClick: onClickRelatedQuestions
            },
            {
                id: '3',
                name: 'How to subscribe bill payment every month?',
                onClick: onClickRelatedQuestions
            }
        ]
    };
    return (<Card>
      <ArticleBuddy query={queryParams} onSubmit={getResults} buddyOptions={{
            list: buddyListProps,
            ...(buttonText !== 'Select buddy' && {
                buddyInfo: {
                    title: buddyInfo,
                    description: 'This buddy will provide assistance for customer service related queries.'
                }
            })
        }} onClear={() => {
            setSearchVal('');
        }} loading={loading} response={{
            title: searchResult?.title,
            actions: args.showActions ? searchResult?.actions : undefined,
            content: !args.showError && searchResult?.content ? (<HTML content={ArticleBuddyMockData.content}/>) : undefined,
            disclaimer: args.showDisclaimer ? ArticleBuddyMockData?.disclaimer : undefined,
            references: args.showReferences ? searchResult?.references : undefined,
            feedback: args.showFeedback ? feedbackProps : undefined,
            error: args.showError,
            relatedQuestions: searchResult ? relatedQuestions : undefined
        }}/>
    </Card>);
};
ArticleBuddyDemo.args = {
    showDisclaimer: true,
    showActions: true,
    showReferences: true,
    showError: false,
    showFeedback: true
};
ArticleBuddyDemo.argTypes = {
    showDisclaimer: { control: { type: 'boolean' } },
    showActions: { control: { type: 'boolean' } },
    showReferences: { control: { type: 'boolean' } },
    showError: { control: { type: 'boolean' } },
    showFeedback: { control: { type: 'boolean' } }
};
//# sourceMappingURL=ArticleBuddy.stories.jsx.map