import { useEffect, useRef, useState } from 'react';
import { action } from '@storybook/addon-actions';
import { registerIcon, createUID, HTML, Flex, Lightbox } from '@pega/cosmos-react-core';
import * as openIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/open.icon';
import * as starIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/star.icon';
import * as caretLeftIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-left.icon';
import { Article, ArticleFooter, ArticleRating } from '@pega/cosmos-react-work';
import { mockData } from '../../core/Lightbox/Lightbox.mocks';
import { ArticleMockData } from './Article.mocks';
registerIcon(openIcon, starIcon, caretLeftIcon);
export default {
    title: 'Work/Article',
    component: Article,
    subcomponents: { ArticleFooter },
    parameters: {
        layout: 'fullscreen'
    }
};
export const ArticleStory = (args) => {
    const [loading, setLoading] = useState(true);
    const [open, setOpen] = useState(false);
    const defaultLBIndex = useRef(0);
    const [likeCount, setLikeCount] = useState(ArticleMockData.fullArticleContent.feedback.likes);
    const [dislikeCount, setDislikeCount] = useState(ArticleMockData.fullArticleContent.feedback.disLikes);
    const [reaction, setReaction] = useState(ArticleMockData.fullArticleContent.feedback.reaction);
    const [commentVal, setCommentVal] = useState('');
    const [showThankYouMessage, setShowThankYouMessage] = useState(false);
    const lightBoxItems = mockData.slice(0, 4);
    const onBackToArticlesClick = (event) => {
        event.preventDefault();
    };
    useEffect(() => {
        setTimeout(() => {
            setLoading(false);
        }, 2000);
    }, []);
    const onReaction = (id, reactionParam) => {
        action('onReaction')(id);
        if (reactionParam === 'liked') {
            setReaction('liked');
            setLikeCount(prev => prev + 1);
            if (reaction === 'disliked') {
                setDislikeCount(prev => prev - 1);
            }
            return;
        }
        if (reactionParam === 'disliked') {
            setReaction('disliked');
            setDislikeCount(prev => prev + 1);
            if (reaction === 'liked') {
                setLikeCount(prev => prev - 1);
            }
        }
        if (reactionParam === undefined) {
            if (reaction === 'liked') {
                setLikeCount(prev => prev - 1);
            }
            else {
                setDislikeCount(prev => prev - 1);
            }
            setReaction(undefined);
        }
    };
    return (<div style={{
            maxWidth: '25rem'
        }}>
      <Article articleId={ArticleMockData.fullArticleContent.articleId} header={args.showHeader
            ? {
                title: 'Knowledge articles',
                icon: 'book-open'
            }
            : undefined} backNavigation={{
            title: args.backButtonText,
            onClick: onBackToArticlesClick
        }} primaryActions={args.showPrimaryActions
            ? [
                {
                    icon: 'star',
                    label: 'Follow',
                    id: createUID(),
                    onClick: id => {
                        action('Follow')(id);
                    }
                },
                {
                    icon: 'open',
                    label: 'Open',
                    id: createUID(),
                    onClick: id => {
                        action('Open')(id);
                    }
                }
            ]
            : undefined} secondaryActions={args.showSecondaryActions
            ? {
                items: [
                    {
                        text: 'Send in email',
                        id: 'action1',
                        onClick: action('Action')
                    },
                    {
                        text: 'Send in chat',
                        id: 'action2',
                        onClick: action('Action')
                    }
                ],
                contextualLabel: ArticleMockData.fullArticleContent.header
            }
            : undefined} content={<HTML content={ArticleMockData.fullArticleContent.content}/>} title={ArticleMockData.fullArticleContent.header} meta={{
            category: ArticleMockData.fullArticleContent.meta.category,
            publishedDate: ArticleMockData.fullArticleContent.meta.publishedDate
        }} feedback={{
            likes: (likeCount * 100) / (likeCount + dislikeCount),
            dislikes: (dislikeCount * 100) / (likeCount + dislikeCount),
            reaction,
            onReaction
        }} footer={args.showFooter
            ? {
                feedback: args.enableFeedback
                    ? {
                        question: 'Was this helpful?',
                        onReaction,
                        reaction,
                        comment: {
                            labelHidden: false,
                            placeholder: 'How can I improve...',
                            value: commentVal,
                            onChange: (e) => setCommentVal(e.target.value)
                        },
                        onSubmit: (response) => {
                            action('onClick')(`Response sent ${response.reaction} ${response.comment}`);
                            setCommentVal('');
                            setReaction(undefined);
                            setShowThankYouMessage(true);
                        },
                        showThankYouMessage
                    }
                    : undefined,
                tags: args.showTags
                    ? {
                        list: [
                            {
                                id: 'Retail banking',
                                tagName: '#Retail_banking'
                            },
                            {
                                id: 'Billing',
                                tagName: '#Billing'
                            },
                            {
                                id: '223444',
                                tagName: '#CSR_Skills'
                            },
                            {
                                id: '223446',
                                tagName: '#Premium_Customers'
                            },
                            {
                                id: '223447',
                                tagName: '#Rare_Customers'
                            },
                            {
                                id: '223448',
                                tagName: '#Finance_Customers'
                            }
                        ],
                        onTagClick: action('Tag clicked')
                    }
                    : undefined,
                relatedLinks: args.showRelatedLinks
                    ? [
                        { title: 'Retail banking for beginners', href: 'https://pega.com' },
                        { title: 'How to handle premium customers', href: 'https://pega.com' }
                    ]
                    : undefined,
                relatedArticles: args.showMoreLikeThis
                    ? [
                        {
                            title: 'What are the implications of change in billing cycle',
                            onClick: action('Related article'),
                            id: createUID()
                        },
                        {
                            title: 'What is the best billing cycle for premium customers',
                            onClick: action('Related article'),
                            id: createUID()
                        },
                        {
                            title: 'How to enable automatic bill payment',
                            onClick: action('Related article'),
                            id: createUID()
                        }
                    ]
                    : undefined,
                attachments: args.showAttachments
                    ? lightBoxItems.map((item, index) => {
                        return {
                            id: item.id,
                            name: item.name,
                            format: item.format,
                            onDownload: action('On Download'),
                            onPreview: () => {
                                defaultLBIndex.current = index;
                                setOpen(true);
                            }
                        };
                    })
                    : undefined
            }
            : undefined} loading={loading}/>
      {open && (<Lightbox items={lightBoxItems} defaultIndex={defaultLBIndex.current} cycle onAfterClose={() => {
                setOpen(false);
            }} onItemDownload={() => { }}/>)}
    </div>);
};
ArticleStory.args = {
    showHeader: true,
    backButtonText: 'Back to all articles',
    showPrimaryActions: true,
    showSecondaryActions: true,
    showFooter: true,
    enableFeedback: true,
    showTags: true,
    showRelatedLinks: true,
    showMoreLikeThis: true,
    showAttachments: true
};
ArticleStory.argTypes = {
    showHeader: { control: { type: 'boolean' } },
    backButtonText: { control: { type: 'text' } },
    showPrimaryActions: { control: { type: 'boolean' } },
    showSecondaryActions: { control: { type: 'boolean' } },
    showFooter: { control: { type: 'boolean' } },
    enableFeedback: { control: { type: 'boolean' } },
    showTags: { control: { type: 'boolean' } },
    showRelatedLinks: { control: { type: 'boolean' } },
    showMoreLikeThis: { control: { type: 'boolean' } },
    showAttachments: { control: { type: 'boolean' } }
};
export const ArticleRatingDemo = () => {
    const [likeCount, setLikeCount] = useState(5);
    const [dislikeCount, setDislikeCount] = useState(2);
    const [reaction, setReaction] = useState();
    const onReaction = reactionParam => {
        if (reactionParam === 'liked') {
            setReaction('liked');
            setLikeCount(prev => prev + 1);
            if (reaction === 'disliked') {
                setDislikeCount(prev => prev - 1);
            }
            return;
        }
        if (reactionParam === 'disliked') {
            setReaction('disliked');
            setDislikeCount(prev => prev + 1);
            if (reaction === 'liked') {
                setLikeCount(prev => prev - 1);
            }
        }
        if (reactionParam === undefined) {
            if (reaction === 'liked') {
                setLikeCount(prev => prev - 1);
            }
            else {
                setDislikeCount(prev => prev - 1);
            }
            setReaction(undefined);
        }
    };
    return (<Flex container={{ pad: [1, 1] }}>
      <ArticleRating likes={(likeCount * 100) / (likeCount + dislikeCount)} dislikes={(dislikeCount * 100) / (likeCount + dislikeCount)} onReaction={onReaction} reaction={reaction}/>
    </Flex>);
};
//# sourceMappingURL=Article.stories.jsx.map