import { useEffect, useState, useMemo, useRef } from 'react';
import { Status, Text } from '@pega/cosmos-react-core';
import { CasePreview, SearchResults } from '@pega/cosmos-react-work';
import { AppShellDemo } from '../../core/AppShell/AppShell.stories';
import { getInitialResults, initialFilters } from './SearchResults.mocks';
import { ColoredText } from './SearchResults.styles';
export default {
    title: 'Work/SearchResults',
    component: SearchResults,
    parameters: {
        layout: 'fullscreen'
    }
};
export const SearchResultsDemo = (args) => {
    const [preview, setPreview] = useState();
    const [previewTabId, setPreviewTabId] = useState();
    const initialResults = useMemo(() => getInitialResults(setPreview, setPreviewTabId), []);
    const [results, setResults] = useState(initialResults);
    const [filters, setFilters] = useState(initialFilters);
    const [search, setSearch] = useState('');
    const [limit, setLimit] = useState(2);
    const [searchLoading, setSearchLoading] = useState(false);
    const searchTimeoutRef = useRef();
    const getActiveFilters = () => {
        return filters.flatMap(group => {
            if (group.type === 'select') {
                return group.items.flatMap(item => {
                    if (item.checked) {
                        return {
                            id: item.id,
                            name: item.name,
                            groupName: group.name
                        };
                    }
                    return [];
                });
            }
            return [];
        });
    };
    const getResults = (searchStr, activeFilters) => {
        const filteredResults = initialResults.filter(result => {
            const statusFilterActive = activeFilters.findIndex(x => x.groupName === 'Status') !== -1;
            const lastUpdatedFilterActive = activeFilters.findIndex(x => x.groupName === 'Last updated') !== -1;
            let matchesStatusFilter = !statusFilterActive;
            let matchesLastUpdatedFilter = !lastUpdatedFilterActive;
            activeFilters.forEach(filter => {
                result.meta?.forEach(tag => {
                    if (tag) {
                        if (!matchesStatusFilter && filter.groupName === 'Status' && tag === filter.name) {
                            matchesStatusFilter = true;
                        }
                        if (!matchesLastUpdatedFilter &&
                            filter.groupName === 'Last updated' &&
                            typeof tag === 'string' &&
                            ((filter.name === 'Today' && Date.parse(tag) >= Date.parse('01/01/21')) ||
                                (filter.name === 'Yesterday' && Date.parse(tag) >= Date.parse('12/31/20')) ||
                                (filter.name === 'Last 7 days' && Date.parse(tag) >= Date.parse('12/25/20')) ||
                                (filter.name === 'Last 30 days' && Date.parse(tag) >= Date.parse('12/01/20')))) {
                            matchesLastUpdatedFilter = true;
                        }
                    }
                });
            });
            return matchesStatusFilter && matchesLastUpdatedFilter;
        });
        return filteredResults.filter(result => {
            return (result &&
                (result.description?.toLowerCase().includes(searchStr.toLowerCase()) ||
                    result.title.toLowerCase().includes(searchStr.toLowerCase()) ||
                    result.id.toLowerCase().includes(searchStr.toLowerCase())));
        });
    };
    useEffect(() => {
        const activeFilters = getActiveFilters();
        if (activeFilters.length > 0 || search !== '') {
            if (searchTimeoutRef.current)
                clearTimeout(searchTimeoutRef.current);
            setSearchLoading(true);
            searchTimeoutRef.current = setTimeout(() => {
                setResults(getResults(search, activeFilters));
                setSearchLoading(false);
            }, 1500);
        }
        else {
            setResults([]);
        }
        return () => {
            if (searchTimeoutRef.current)
                clearTimeout(searchTimeoutRef.current);
        };
    }, [filters]);
    const handleSearchSubmit = (value) => {
        if (searchTimeoutRef?.current)
            clearTimeout(searchTimeoutRef?.current);
        setSearchLoading(true);
        searchTimeoutRef.current = setTimeout(() => {
            setResults(getResults(value, getActiveFilters()));
            setSearchLoading(false);
        }, 1500);
    };
    const handleFilterChange = (changeEvent) => {
        setFilters(curr => {
            return curr.map(filter => {
                const newFilter = { ...filter };
                if (newFilter.name === changeEvent.name &&
                    changeEvent.type === 'select' &&
                    newFilter.type === 'select') {
                    newFilter.items = newFilter.items.map(item => {
                        const newItem = { ...item };
                        if (item.id === changeEvent.value.id)
                            newItem.checked = changeEvent.value.checked;
                        else if (newFilter.selectType === 'single-select')
                            newItem.checked = false;
                        return newItem;
                    });
                }
                return newFilter;
            });
        });
    };
    const clearAllFilters = () => {
        setFilters(curr => {
            return curr.map(filter => {
                if (filter.type === 'select') {
                    filter.items = filter.items.map(item => {
                        item.checked = false;
                        return item;
                    });
                }
                return filter;
            });
        });
    };
    const handleClearFilter = (filterName) => {
        setFilters(curr => {
            return curr.map(filter => {
                if (filter.name === filterName && filter.type === 'select') {
                    filter.items = filter.items.map(item => {
                        item.checked = false;
                        return item;
                    });
                }
                return filter;
            });
        });
    };
    const handleShowMore = () => {
        if (limit < results.length)
            setLimit(curr => curr + 2);
    };
    const renderForDisplay = (resultsToDisplay) => {
        return resultsToDisplay.map(result => {
            if (result.meta) {
                const metaValues = [...result.meta];
                const renderedMeta = metaValues.map(item => {
                    if (!Number.isNaN(Date.parse(item))) {
                        if (Date.parse(item) >= Date.parse('12/01/20') &&
                            Date.parse(item) < Date.parse('12/25/20'))
                            return 'Updated 1 month ago';
                        if (Date.parse(item) >= Date.parse('12/25/20') &&
                            Date.parse(item) < Date.parse('12/31/20'))
                            return 'Updated 1 week ago';
                        if (Date.parse(item) >= Date.parse('12/31/20') &&
                            Date.parse(item) < Date.parse('01/01/21'))
                            return 'Updated yesterday';
                        if (Date.parse(item) >= Date.parse('01/01/21') &&
                            Date.parse(item) < Date.parse('01/01/21 07:00:00'))
                            return 'Updated today';
                        return 'Updated just now';
                    }
                    switch (item) {
                        case 'Completed':
                            return <Status variant='success'>Completed</Status>;
                        case 'Ready':
                            return <Status variant='info'>Ready</Status>;
                        case 'Pending':
                            return <Status variant='pending'>Pending</Status>;
                        case 'Blocked':
                            return <Status variant='urgent'>Blocked</Status>;
                        case 'Low priority':
                            return <Text variant='secondary'>Low priority</Text>;
                        case 'Medium priority':
                            return (<Text as={ColoredText} colorVariant='warn' variant='secondary'>
                  Medium priority
                </Text>);
                        case 'High priority':
                            return (<Text as={ColoredText} colorVariant='urgent' variant='secondary'>
                  High priority
                </Text>);
                        default:
                            return item;
                    }
                });
                return { ...result, meta: renderedMeta };
            }
            return result;
        });
    };
    const searchResults = (<>
      <SearchResults results={limit < results.length
            ? renderForDisplay(results.slice(0, limit))
            : renderForDisplay(results)} searchInputProps={{
            value: search,
            onSearchChange: setSearch,
            onSearchSubmit: handleSearchSubmit,
            searchInputAriaLabel: 'Search'
        }} count={results.length} filters={filters} onFilterChange={handleFilterChange} onClearAllFilters={clearAllFilters} onClearFilter={handleClearFilter} onShowMore={limit < results.length ? handleShowMore : undefined} loading={searchLoading}/>

      <CasePreview open={!!preview} caseId={preview?.id || ''} heading={preview?.title || ''} tabs={{
            items: [],
            currentTabId: previewTabId || '',
            onClick: (id) => setPreviewTabId(id)
        }} followed summaryFields={{
            secondary: [
                {
                    name: 'Target Release',
                    value: '1.0.0'
                },
                {
                    name: 'Team',
                    value: 'Scrum Team A'
                },
                {
                    name: 'Description',
                    value: preview?.description,
                    variant: 'stacked'
                }
            ]
        }} onBeforeClose={() => {
            setPreview(undefined);
        }}/>
    </>);
    return args.withAppShell ? (<AppShellDemo appHeader main={searchResults} searchPage/>) : (searchResults);
};
SearchResultsDemo.args = {
    withAppShell: false
};
SearchResultsDemo.argTypes = {
    withAppShell: { control: { type: 'boolean' } }
};
//# sourceMappingURL=SearchResults.stories.jsx.map