import { useCallback, useEffect, useMemo, useState } from 'react';
import { action } from '@storybook/addon-actions';
import { createUID, menuHelpers, registerIcon, escapeRegExp, HTML, Flex, Button, Count } from '@pega/cosmos-react-core';
import * as thumbsUpSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-up-solid.icon';
import * as thumbsDownSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-down-solid.icon';
import * as bookOpen from '@pega/cosmos-react-core/lib/components/Icon/icons/book-open.icon';
import { ArticleList, ArticleSummary, ArticleListFilter } from '@pega/cosmos-react-work';
import { ArticleMockData } from '../Article/Article.mocks';
import { suggestedMock, followedMock, searchMock, ArticleBuddyMockData, searchSemanticArticles, semanticFilterOptions, BuddyListMockData } from './ArticleList.mocks';
export default {
    title: 'Work/ArticleList',
    component: ArticleList,
    subcomponents: { ArticleSummary, ArticleListFilter },
    parameters: {
        layout: 'fullscreen'
    }
};
registerIcon(thumbsUpSolidIcon, thumbsDownSolidIcon, bookOpen);
export const ArticleListDemo = (args) => {
    const [searchVal, setSearchVal] = useState('');
    const [activeTab, setActiveTab] = useState('Suggested');
    const [loading, setLoading] = useState(false);
    const [categoryList, setCategoryList] = useState([]);
    const [sortBy, setSortBy] = useState([]);
    const [articles, setArticles] = useState([]);
    const [aiArticles, setAiArticles] = useState();
    const [quickFilters, setQuickFilters] = useState([]);
    const [loadingMore, isSetLoadMore] = useState(false);
    const [hasMore, setHasMore] = useState(true);
    const [filterCategoryValue, setFilterCategoryValue] = useState('');
    const [buddyContent, setBuddyContent] = useState();
    const [buddyLoader, setBuddyLoader] = useState(false);
    const [commentVal, setCommentVal] = useState('');
    const [buddyReaction, setBuddyReaction] = useState(undefined);
    const [showThankYouMessage, setShowThankYouMessage] = useState(false);
    const [listResult, setListResult] = useState();
    const [fullList, setFullList] = useState();
    const [showMore, setShowMore] = useState(false);
    const [activeArticleByTab, setActiveArticleByTab] = useState({});
    const [semanticFilterList, setSemanticFilterList] = useState(semanticFilterOptions);
    const [initialMessage, setInitialMessage] = useState(true);
    const selectedSortByOption = useMemo(() => menuHelpers.getSelected(sortBy)[0], [sortBy]);
    const selectSortByOption = useCallback((id) => {
        setSortBy(cur => menuHelpers.selectItem(cur, id, 'single-select'));
    }, []);
    const selectedCategory = useMemo(() => {
        return menuHelpers.getSelected(categoryList).map(item => ({ text: item.primary, id: item.id }));
    }, [categoryList]);
    const categoryListToRender = useMemo(() => {
        return menuHelpers.mapTree(categoryList, item => ({
            ...item,
            selected: !!item.selected
        }));
    }, [categoryList]);
    const toggleItem = (id) => {
        setCategoryList(cur => menuHelpers.toggleSelected(cur, id, 'multi-select'));
    };
    const onReaction = (articleId, reaction) => {
        setArticles(prevArticles => {
            const itemIndex = prevArticles.findIndex(article => article?.articleId === articleId);
            const updatedData = [...prevArticles];
            if (itemIndex !== -1) {
                const currentItemFeedback = updatedData[itemIndex].feedback;
                if (currentItemFeedback) {
                    const likeValue = currentItemFeedback?.likes || 0;
                    const dislikeValue = currentItemFeedback?.dislikes || 0;
                    if (!reaction) {
                        if (currentItemFeedback.reaction === 'liked') {
                            currentItemFeedback.likes = likeValue - 1;
                        }
                        else {
                            currentItemFeedback.dislikes = dislikeValue - 1;
                        }
                        currentItemFeedback.reaction = undefined;
                    }
                    if (reaction === 'liked') {
                        if (currentItemFeedback?.reaction === 'disliked') {
                            currentItemFeedback.dislikes = dislikeValue - 1;
                        }
                        currentItemFeedback.likes = likeValue + 1;
                        currentItemFeedback.reaction = 'liked';
                    }
                    if (reaction === 'disliked') {
                        if (currentItemFeedback.reaction === 'liked') {
                            currentItemFeedback.likes = likeValue - 1;
                        }
                        currentItemFeedback.dislikes = dislikeValue + 1;
                        currentItemFeedback.reaction = 'disliked';
                    }
                }
            }
            return updatedData;
        });
    };
    const openArticle = (id, tab, title, isBuddy = false) => {
        let article = {
            backNavigation: {
                title: 'Back to list',
                onClick: () => {
                    setActiveArticleByTab(prev => {
                        return { ...prev, [activeTab]: undefined };
                    });
                }
            },
            title,
            content: <HTML content={ArticleBuddyMockData.content}/>,
            references: buddyContent?.references,
            disclaimer: ArticleBuddyMockData.disclaimer
        };
        if (!isBuddy) {
            article = {
                articleId: id,
                backNavigation: {
                    title: 'Back to list',
                    onClick: () => {
                        setActiveArticleByTab(prev => {
                            return { ...prev, [activeTab]: undefined };
                        });
                    }
                },
                primaryActions: [
                    {
                        icon: 'star',
                        label: 'Follow',
                        id: createUID(),
                        onClick: articleId => {
                            action('Follow')(articleId);
                        }
                    },
                    {
                        icon: 'open',
                        label: 'Open',
                        id: createUID(),
                        onClick: articleId => {
                            action('Open')(articleId);
                        }
                    }
                ],
                secondaryActions: {
                    items: [
                        {
                            text: 'Send in email',
                            id: 'action1',
                            onClick: action('Action')
                        },
                        {
                            text: 'Send in chat',
                            id: 'action2',
                            onClick: action('Action')
                        }
                    ]
                },
                content: <HTML content={ArticleMockData.fullArticleContent.content}/>,
                title,
                meta: {
                    category: ArticleMockData.fullArticleContent.meta.category,
                    publishedDate: ArticleMockData.fullArticleContent.meta.publishedDate
                },
                footer: {
                    tags: {
                        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')
                    },
                    relatedLinks: [
                        { title: 'Retail banking for beginners', href: 'https://pega.com' },
                        { title: 'How to handle premium customers', href: 'https://pega.com' }
                    ],
                    relatedArticles: [
                        {
                            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()
                        }
                    ]
                },
                loading: false
            };
        }
        setActiveArticleByTab(prev => {
            return { ...prev, [tab]: article };
        });
    };
    const updateArticles = (mockArticles) => {
        const data = Object.values(mockArticles);
        return data.map(({ isLiked = false, isFollowed = false, articleId = '', title, href, abstract, meta, feedback, quickFilters: quickFilterTags }) => {
            const actionObj = [{ id: '1', text: 'Edit' }];
            if (isLiked) {
                actionObj.push({ id: '3', text: 'Dislike' });
            }
            else {
                actionObj.push({ id: '3', text: 'Like' });
            }
            if (isFollowed) {
                actionObj.push({ id: '4', text: 'Unfollow' });
            }
            else {
                actionObj.push({ id: '4', text: 'Follow' });
            }
            return {
                articleId,
                href,
                title,
                abstract,
                onTitleClick: () => {
                    action('onTitleClick')(articleId);
                    openArticle(articleId, activeTab, title);
                },
                actions: { items: actionObj, contextualLabel: title },
                meta,
                feedback,
                quickFilters: args.showQuickFilters && quickFilterTags?.length
                    ? quickFilterTags?.map(obj => {
                        return obj;
                    })
                    : []
            };
        });
    };
    const fetchArticleContent = activeTabName => {
        return new Promise(resolve => {
            let activeTabContent = null;
            if (!activeTabName || activeTabName === 'Search')
                activeTabContent = { ...searchMock };
            else if (activeTabName === 'Suggested')
                activeTabContent = { ...suggestedMock };
            else if (activeTabName === 'Followed')
                activeTabContent = { ...followedMock };
            setTimeout(() => {
                if (activeTabContent) {
                    resolve({
                        articles: updateArticles(activeTabContent.articles),
                        aiSuggestedArticles: activeTabContent.aiSuggestions ?? undefined,
                        category: activeTabContent.category || [],
                        sortBy: activeTabContent.sortBy || []
                    });
                }
            }, 500);
        });
    };
    searchMock.articles = searchMock.articles.map(article => {
        return {
            ...article,
            feedback: {
                ...article.feedback,
                id: article.articleId,
                onReaction
            }
        };
    });
    suggestedMock.articles = suggestedMock.articles.map(article => {
        return {
            ...article,
            feedback: {
                ...article.feedback,
                id: article.articleId,
                onReaction
            }
        };
    });
    followedMock.articles = followedMock.articles.map(article => {
        return {
            ...article,
            feedback: {
                ...article.feedback,
                id: article.articleId,
                onReaction
            }
        };
    });
    const updateBuddyArticles = (mockBuddyArticle) => {
        const actionItems = {
            items: [
                { id: '1', text: 'Share' },
                { id: '2', text: 'Copy as URL' }
            ]
        };
        return {
            title: mockBuddyArticle?.title,
            content: mockBuddyArticle?.content,
            references: mockBuddyArticle?.references,
            disclaimer: mockBuddyArticle?.disclaimer,
            actions: actionItems
        };
    };
    const fetchBuddySearchResult = () => {
        return new Promise(resolve => {
            setTimeout(() => {
                resolve({
                    data: updateBuddyArticles(ArticleBuddyMockData)
                });
            }, 1000);
        });
    };
    const getBuddyResults = async () => {
        setBuddyLoader(true);
        const res = await fetchBuddySearchResult();
        setBuddyContent(res.data);
        setBuddyLoader(false);
    };
    const buddyQuery = {
        label: 'Ask Bubby',
        placeholder: 'Ask your question here...',
        value: searchVal,
        onChange: (e) => setSearchVal(e.target.value),
        labelHidden: true
    };
    const feedbackParams = {
        comment: {
            labelHidden: true,
            placeholder: 'How can I improve...',
            value: commentVal,
            onChange: (e) => setCommentVal(e.target.value)
        },
        question: args.enableSemanticSearch ? 'Was this search helpful?' : 'Was this helpful?',
        reaction: buddyReaction,
        onReaction: (reaction) => {
            setBuddyReaction(reaction);
        },
        onSubmit: (response) => {
            action('onClick')(`action ${response.reaction} ${response.comment}`);
            setCommentVal('');
            setBuddyReaction(undefined);
            setShowThankYouMessage(true);
        },
        showThankYouMessage
    };
    const handleTabChange = (id) => {
        setArticles([]);
        setCategoryList([]);
        setLoading(true);
        fetchArticleContent(id).then(res => {
            setArticles(res.articles);
            setAiArticles(args.enableAISuggestions ? res.aiSuggestedArticles : undefined);
            setCategoryList(res.category);
            setSortBy(res.sortBy);
            setLoading(false);
        });
        setActiveTab(id);
        setSearchVal('');
        if (id !== 'Search') {
            setQuickFilters([]);
        }
    };
    useEffect(() => {
        setLoading(true);
        fetchArticleContent(activeTab).then(res => {
            setLoading(false);
            setArticles(res.articles);
            setAiArticles(args.enableAISuggestions ? res.aiSuggestedArticles : undefined);
        });
    }, [activeTab, args.enableAISuggestions]);
    const filterRegex = useMemo(() => escapeRegExp(filterCategoryValue), [filterCategoryValue]);
    const categoryProps = {
        label: 'Category',
        placeholder: 'Select categories',
        onChange: e => {
            setFilterCategoryValue(e.target.value);
        },
        value: filterCategoryValue,
        mode: 'multi-select',
        selected: {
            items: selectedCategory
        },
        menu: {
            items: filterCategoryValue
                ? menuHelpers.flatten(categoryList).filter(({ primary }) => {
                    return filterRegex.toLowerCase().includes(primary.toLowerCase());
                })
                : categoryListToRender,
            onItemClick: toggleItem
        }
    };
    const sortByProps = {
        label: 'Sort by',
        placeholder: 'Select sort by',
        selected: selectedSortByOption
            ? {
                items: {
                    id: selectedSortByOption.id,
                    text: selectedSortByOption.primary
                }
            }
            : undefined,
        menu: {
            items: sortBy,
            onItemClick: selectSortByOption
        }
    };
    const [searchFilter, setSearchFilter] = useState(['Buddy 1- taking care of customer operations', 'Buddy 2', 'Buddy 3'].map(name => ({
        id: name,
        primary: name
    })));
    const selectedFilter = useMemo(() => {
        const selected = menuHelpers.getSelected(searchFilter)[0];
        return selected ? selected.primary : 'Select buddy';
    }, [searchFilter]);
    const itemsToRender = useMemo(() => {
        return menuHelpers.mapTree(searchFilter, item => {
            return {
                ...item
            };
        });
    }, [searchFilter]);
    const searchOptions = {
        placeholder: 'Search article',
        value: searchVal,
        onSearchChange: (val) => {
            setSearchVal(val);
        },
        onSearchSubmit: (val) => {
            setInitialMessage(false);
            return val;
        },
        searchFilter: {
            text: selectedFilter,
            variant: 'text',
            menu: {
                items: itemsToRender,
                mode: 'single-select',
                onItemClick: (id) => {
                    setSearchFilter(cur => menuHelpers.toggleSelected(cur, id, 'single-select'));
                }
            }
        },
        filterInfo: selectedFilter !== 'Select buddy'
            ? {
                title: selectedFilter,
                description: 'This gives information on filter selected'
            }
            : undefined
    };
    const actionOptions = [
        {
            id: '1',
            text: 'Action 1',
            onClick: (id) => action('onClick')(`action ${id}`)
        },
        {
            id: '2',
            text: 'Action 2',
            onClick: (id) => action('onClick')(`action ${id}`)
        },
        {
            id: '3',
            text: 'Action 3',
            onClick: (id) => action('onClick')(`action ${id}`)
        }
    ];
    const suggestNewArticleAction = {
        id: 'Suggest action',
        text: 'Suggest action',
        onClick: (id) => action('onClick')(id),
        icon: 'plus'
    };
    let actions;
    if (args.showAction) {
        if (args.isSuggestArticleAction) {
            actions = { items: [suggestNewArticleAction] };
        }
        else {
            actions = { items: actionOptions };
        }
    }
    const handleClearClick = () => {
        setQuickFilters([]);
        setSearchVal('');
        setCategoryList(curr => {
            return curr?.map(categoryListItem => {
                return {
                    ...categoryListItem,
                    selected: false
                };
            });
        });
        setSortBy(curr => {
            return curr?.map(sortByListItem => {
                return {
                    ...sortByListItem,
                    selected: false
                };
            });
        });
    };
    let timeoutId;
    const stopTimeout = () => {
        clearTimeout(timeoutId);
    };
    const onLoadMore = useCallback(() => {
        if (!loading && !loadingMore && activeTab) {
            isSetLoadMore(true);
            setLoading(false);
            timeoutId = setTimeout(() => {
                isSetLoadMore(false);
                setLoading(false);
                setHasMore(true);
                setArticles(prevArticles => [
                    ...prevArticles,
                    {
                        articleId: createUID(),
                        title: 'Last article alert!!!',
                        href: 'design.pega.com',
                        abstract: 'Last article alert. This is the last article , hence the last index to be noted. This will be appended at the end of the list',
                        meta: {
                            category: 'Retail',
                            publishedDate: '2023-04-06'
                        },
                        feedback: {
                            articleId: createUID(),
                            likes: 20,
                            dislikes: 80,
                            liked: true,
                            disliked: false,
                            onReaction: () => { }
                        },
                        isFollowed: false,
                        isLiked: true,
                        quickFilters: [
                            { id: '1', name: 'insurance' },
                            { id: '2', name: 'policy' }
                        ]
                    }
                ]);
            }, 3000);
        }
    }, [loading, loadingMore, activeTab]);
    useEffect(() => {
        return () => stopTimeout();
    }, []);
    const onQuickFilterClick = (quickFilterParam) => {
        handleTabChange('Search');
        setQuickFilters([...quickFilters, quickFilterParam]);
        setSemanticFilterList(cur => menuHelpers.toggleSelected(cur, quickFilterParam.id, 'multi-select'));
    };
    const updateSematicResults = searchSemanticArticles.map(article => ({
        ...article,
        onQuickFilterClick
    }));
    const sematicFilterItems = useMemo(() => {
        return menuHelpers.mapTree(semanticFilterList, item => {
            let selectable = false;
            if (!item.items) {
                selectable = true;
            }
            return {
                ...item,
                visual: undefined,
                count: item.items ? item.items.length : undefined,
                secondary: undefined,
                selected: selectable ? !!item.selected : undefined,
                tooltip: undefined
            };
        });
    }, [semanticFilterList]);
    const selections = useMemo(() => menuHelpers.getSelected(semanticFilterList), [semanticFilterList]);
    const semanticFilterProps = {
        id: 'sematic-filter',
        listId: 'sematic-filter-list',
        items: sematicFilterItems,
        mode: 'multi-select',
        role: 'listbox',
        emptyText: 'No items found.',
        onItemClick: (selectedItemId) => {
            if (selectedItemId)
                setSemanticFilterList(cur => menuHelpers.toggleSelected(cur, selectedItemId, 'multi-select'));
        },
        footer: (<Flex container={{ justify: 'between' }}>
        <Button onClick={() => {
                action('clear');
            }}>
          Clear
        </Button>

        <Button variant='primary' onClick={() => {
                handleTabChange('Search');
                const filters = selections.map(item => {
                    return {
                        id: item.id,
                        name: item.primary
                    };
                });
                setQuickFilters(filters);
            }}>
          Add
          <>&nbsp; {selections && selections.length > 0 && <Count>{selections.length}</Count>}</>
        </Button>
      </Flex>)
    };
    const searchCommonProps = {
        count: args.showCount ? searchMock.count : undefined,
        searchInput: searchOptions,
        category: categoryProps,
        sortBy: sortByProps,
        onClearClick: handleClearClick,
        quickFilters,
        handleQuickFilterRemove: (id) => {
            setQuickFilters(quickFilters.filter(item => item.id !== id));
            if (activeTab === 'Search' && args.enableSemanticSearch) {
                setSemanticFilterList(cur => menuHelpers.toggleSelected(cur, id, 'multi-select'));
            }
        },
        showResults: args.showResults
    };
    const onClickRelatedQuestions = (item) => {
        setSearchVal(item.name);
        getBuddyResults();
    };
    const relatedQuestions = {
        title: activeTab === 'Search' ? 'Related searches' : '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
            }
        ]
    };
    const semanticSearchProps = {
        ...searchCommonProps,
        semanticSearch: true,
        semanticFilter: semanticFilterProps,
        articles: updateSematicResults,
        feedback: feedbackParams,
        error: false,
        initialMessage,
        activeArticle: activeArticleByTab.Search,
        relatedQuestions
    };
    const nonSemanticSearch = {
        ...searchCommonProps,
        articles: articles.map(article => {
            if (!article.feedback ||
                article.feedback.likes === undefined ||
                article.feedback.dislikes === undefined) {
                return article;
            }
            const likesValue = (article.feedback?.likes ?? 0 * 100) / article.feedback.likes + article.feedback.dislikes;
            const disLikeValue = (article.feedback.dislikes ?? 0 * 100) / article.feedback.likes + article.feedback.dislikes;
            return {
                ...article,
                feedback: {
                    ...article.feedback,
                    likes: likesValue,
                    dislikes: disLikeValue
                }
            };
        }),
        activeArticle: activeArticleByTab.Search
    };
    const onNotRelevant = (id) => {
        setListResult(prev => ({
            ...prev,
            detected: prev?.detected?.filter(item => item.id !== id)
        }));
    };
    const updateBuddyList = (mockBuddyList) => {
        const updatedAutoAnsweredList = mockBuddyList?.autoAnswered
            ? mockBuddyList?.autoAnswered.map(item => ({
                ...item,
                onTitleClick: (id) => {
                    action('onTitleClick')(id);
                    openArticle(id, activeTab, item.query, true);
                }
            }))
            : [];
        const updateDetectedList = mockBuddyList?.detected
            ? mockBuddyList?.detected.map(item => ({
                ...item,
                actions: {
                    items: [
                        {
                            id: '1',
                            text: 'Edit',
                            onClick: () => {
                                action('onEdit');
                            }
                        },
                        {
                            id: '2',
                            text: 'Not relevant',
                            onClick: () => {
                                onNotRelevant(item.id);
                            }
                        }
                    ]
                },
                onTitleClick: (id) => {
                    action('onTitleClick')(id);
                    handleTabChange('Buddy');
                    setSearchVal(item.query);
                }
            }))
            : [];
        return {
            autoAnswered: updatedAutoAnsweredList,
            detected: updateDetectedList,
            pastQuestions: mockBuddyList?.pastQuestions,
            notRelevantQuestions: mockBuddyList?.notRelevantQuestions
        };
    };
    const fetchListResult = () => {
        return new Promise(resolve => {
            setTimeout(() => {
                resolve({
                    data: updateBuddyList(BuddyListMockData)
                });
            }, 1000);
        });
    };
    const loadInitial = (autoAnsweredList, detectedList, pastQuestionsList, notRelevantList) => {
        const limit = 3;
        const result = {};
        if (autoAnsweredList?.length >= limit) {
            result.autoAnswered = autoAnsweredList.slice(0, limit);
        }
        else {
            result.autoAnswered = autoAnsweredList;
            const remainingSpace = limit - (autoAnsweredList?.length || 0);
            if (detectedList && detectedList?.length >= remainingSpace) {
                result.detected = detectedList.slice(0, remainingSpace);
            }
            else {
                result.detected = detectedList;
            }
        }
        if (pastQuestionsList && notRelevantList) {
            action('more content to show');
        }
        return result;
    };
    const getBuddyList = async () => {
        setLoading(true);
        const res = await fetchListResult();
        setFullList(res.data);
        setListResult(loadInitial(res?.data?.autoAnswered ?? [], res?.data?.detected ?? [], res?.data?.pastQuestions ?? [], res?.data?.notRelevantQuestions ?? []));
        setLoading(false);
    };
    useEffect(() => {
        if (args.enableVoiceAISuggestions) {
            getBuddyList();
        }
    }, [args.enableVoiceAISuggestions]);
    useEffect(() => {
        if (showMore) {
            setListResult(fullList);
        }
        else {
            setListResult(loadInitial(listResult?.autoAnswered ?? [], listResult?.detected ?? [], listResult?.pastQuestions ?? [], listResult?.notRelevantQuestions ?? []));
        }
    }, [showMore]);
    return (<div style={{
            width: '25rem',
            margin: ' 0 0.2rem 0'
        }}>
      <ArticleList header={args.showHeader
            ? {
                title: 'Knowledge articles',
                icon: args.showHeaderIcon ? 'polaris-solid' : '',
                actions
            }
            : undefined} activeTab={activeTab} onTabClick={handleTabChange} skeletonize={false} suggested={{
            count: args.showCount ? suggestedMock.count : undefined,
            articles: args.enableVoiceAISuggestions
                ? {
                    ...listResult,
                    showMore,
                    onShowMoreToggle: () => {
                        setShowMore(!showMore);
                    }
                }
                : articles.map(article => {
                    if (!article.feedback ||
                        article.feedback.likes === undefined ||
                        article.feedback.dislikes === undefined) {
                        return article;
                    }
                    const likesValue = (article.feedback?.likes ?? 0 * 100) / article.feedback.likes +
                        article.feedback.dislikes;
                    const disLikeValue = (article.feedback.dislikes ?? 0 * 100) / article.feedback.likes +
                        article.feedback.dislikes;
                    return {
                        ...article,
                        feedback: {
                            ...article.feedback,
                            likes: likesValue,
                            dislikes: disLikeValue
                        }
                    };
                }),
            aiSuggestedArticles: args.enableVoiceAISuggestions ? undefined : aiArticles,
            activeArticle: activeArticleByTab.Suggested
        }} followed={{
            count: args.showCount ? followedMock.count : undefined,
            articles: articles.map(article => {
                if (!article.feedback ||
                    article.feedback.likes === undefined ||
                    article.feedback.dislikes === undefined) {
                    return article;
                }
                const likesValue = (article.feedback?.likes ?? 0 * 100) / article.feedback.likes +
                    article.feedback.dislikes;
                const disLikeValue = (article.feedback.dislikes ?? 0 * 100) / article.feedback.likes +
                    article.feedback.dislikes;
                return {
                    ...article,
                    feedback: {
                        ...article.feedback,
                        likes: likesValue,
                        dislikes: disLikeValue
                    }
                };
            }),
            searchInput: searchOptions,
            category: categoryProps,
            sortBy: sortByProps,
            onClearClick: handleClearClick,
            showResults: args.showResults,
            activeArticle: activeArticleByTab.Followed
        }} search={args.enableSemanticSearch ? semanticSearchProps : nonSemanticSearch} buddy={{
            title: 'Ask buddy',
            content: {
                query: buddyQuery,
                onSubmit: getBuddyResults,
                onClear: () => {
                    setSearchVal('');
                },
                loading: buddyLoader,
                response: {
                    title: buddyContent?.title ?? '',
                    actions: buddyContent?.actions,
                    content: buddyContent?.content ? (<HTML content={ArticleBuddyMockData.content}/>) : (buddyContent?.content),
                    references: buddyContent?.references,
                    feedback: feedbackParams,
                    disclaimer: ArticleBuddyMockData.disclaimer,
                    relatedQuestions: buddyContent ? relatedQuestions : undefined
                }
            }
        }} onQuickFilterClick={(quickFilterParam) => {
            handleTabChange('Search');
            setQuickFilters([...quickFilters, quickFilterParam]);
        }} loading={loading} loadingMore={loadingMore} onLoadMore={args.showLoadMore && hasMore ? onLoadMore : undefined}/>
    </div>);
};
ArticleListDemo.args = {
    isSuggestArticleAction: true,
    showAction: true,
    showHeader: true,
    showHeaderIcon: true,
    showQuickFilters: true,
    showCount: true,
    showResults: true,
    showLoadMore: false,
    enableAISuggestions: true,
    enableSemanticSearch: true,
    enableVoiceAISuggestions: true
};
ArticleListDemo.argTypes = {
    isSuggestArticleAction: { control: { type: 'boolean' } },
    showAction: { control: { type: 'boolean' } },
    showHeader: { control: { type: 'boolean' } },
    showHeaderIcon: { control: { type: 'boolean' } },
    showQuickFilters: { control: { type: 'boolean' } },
    showCount: { control: { type: 'boolean' } },
    showResults: { control: { type: 'boolean' } },
    showLoadMore: { control: { type: 'boolean' } },
    enableAISuggestions: { control: { type: 'boolean' } },
    enableSemanticSearch: { control: { type: 'boolean' } },
    enableVoiceAISuggestions: { control: { type: 'boolean' } }
};
//# sourceMappingURL=ArticleList.stories.jsx.map