import { useMemo, useState, useCallback, useRef } from 'react';
import { EmptyState, Flex, Icon, icons, streamlineIcons, registerIcon, Progress, SearchInput, Text, useItemIntersection, useTheme, ThemeOverride } from '@pega/cosmos-react-core';
import * as pegasusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/pegasus.icon';
import { createCustomIcon, iconNameSelectOptions, iconSizeArgTypes, iconSizeArgs } from './Icon.mocks';
import { StyledIconList, StyledIconListItem, StyledProgressContainer } from './Icon.styles';
export default {
    title: 'Core/Icon',
    component: Icon
};
registerIcon(pegasusIcon);
export const StaticIcon = (args) => {
    return (<Icon style={args.demoSizeOverride ? { height: '5rem', width: '5rem' } : undefined} set='streamline' name={args.name ?? 'pegasus'} aria-label='Informative label' size={args.size}/>);
};
StaticIcon.args = { ...iconSizeArgs, name: 'pegasus' };
StaticIcon.argTypes = {
    ...iconSizeArgTypes,
    name: {
        control: { type: 'select' },
        options: iconNameSelectOptions
    }
};
export const CustomIcon = (args) => {
    const theme = useTheme();
    createCustomIcon(theme);
    return (<Icon style={args.demoSizeOverride ? { height: '5rem', width: '5rem' } : undefined} name='custom-pega' aria-label='Custom icon' size={args.size}/>);
};
CustomIcon.args = iconSizeArgs;
CustomIcon.argTypes = iconSizeArgTypes;
export const DynamicIcon = (args) => {
    return (<Icon style={args.demoSizeOverride ? { height: '5rem', width: '5rem' } : undefined} name='pega' size={args.size}/>);
};
DynamicIcon.args = iconSizeArgs;
DynamicIcon.argTypes = iconSizeArgTypes;
export const IconList = (args) => {
    const pageSize = 50;
    const [search, setSearch] = useState('');
    const totalMatches = useRef(0);
    const [currentPageIndex, setCurrentPageIndex] = useState(0);
    const ulRef = useRef(null);
    const iconList = args.set === 'budicon' ? icons : streamlineIcons;
    const listContent = useMemo(() => {
        const matches = search ? iconList.filter(icon => icon.includes(search)) : iconList;
        const totalItemsToRender = (1 + currentPageIndex) * pageSize;
        totalMatches.current = matches.length;
        if (matches.length === 0) {
            return <EmptyState forwardedAs='li'/>;
        }
        return matches.slice(0, totalItemsToRender).map(icon => (<Flex key={icon} container={{
                direction: 'column',
                justify: 'center',
                alignItems: 'center',
                alignContent: 'center'
            }} as={StyledIconListItem}>
        <Icon style={{ height: '3rem', width: '3rem' }} name={icon}/>
        <p style={{ textAlign: 'center' }}>{icon}</p>
      </Flex>));
    }, [iconList, search, currentPageIndex]);
    const itemsShown = Math.min(totalMatches.current, (1 + currentPageIndex) * pageSize);
    const itemsToLoadMore = totalMatches.current - itemsShown;
    useItemIntersection(ulRef, itemsShown, () => {
        setCurrentPageIndex(prev => 1 + prev);
    }, ':scope > li');
    const onSearchChange = useCallback((value) => {
        setSearch(value);
        setCurrentPageIndex(0);
        ulRef?.current?.scrollIntoView();
    }, []);
    return (<ThemeOverride theme={{ base: { 'icon-set': args.set } }}>
      <Flex container={{ direction: 'column', gap: 1 }} style={{ height: 'calc(100vh - 2rem)' }}>
        <SearchInput value={search} onSearchChange={onSearchChange}/>
        {itemsShown > 0 && <Text variant='secondary'>{totalMatches.current} results</Text>}
        <Flex container={{ wrap: 'wrap', alignContent: 'start' }} as={StyledIconList} ref={ulRef}>
          {listContent}
          {itemsToLoadMore > 0 && (<StyledProgressContainer>
              <Progress placement='local'/>
            </StyledProgressContainer>)}
        </Flex>
      </Flex>
    </ThemeOverride>);
};
IconList.args = {
    set: 'budicon'
};
IconList.argTypes = {
    set: {
        options: ['budicon', 'streamline'],
        control: { type: 'radio' }
    }
};
export const ShapedIcon = (args) => {
    return (<Icon name={args.name || 'gear'} set='streamline' aria-label='Configuration' foreground='#6C5700' background='#F4C500' shape={args.shape} size={args.size}/>);
};
ShapedIcon.args = {
    shape: 'square',
    size: 'l',
    name: 'gear'
};
ShapedIcon.argTypes = {
    shape: {
        options: ['square', 'circle'],
        control: { type: 'radio' }
    },
    size: {
        options: ['s', 'm', 'l', 'font-size'],
        control: { type: 'radio' }
    },
    name: {
        control: { type: 'select' },
        options: iconNameSelectOptions
    }
};
//# sourceMappingURL=Icon.stories.jsx.map