import { useCallback, useState } from 'react';
import styled, { css } from 'styled-components';
import { defaultThemeProp, Flex, Menu, menuHelpers, useElement, useI18n } from '@pega/cosmos-react-core';
import MultiSelectInput from '@pega/cosmos-react-core/lib/components/ComboBox/MultiSelectInput/MultiSelectInput';
import { mockQuery } from './mockData';
import Popover from './Popover';
const StyledSelectionMenu = styled(Menu)(({ theme }) => {
    return css `
    margin-inline: calc(-2 * ${theme.base.spacing});
  `;
});
StyledSelectionMenu.defaultProps = defaultThemeProp;
const rootMenuItems = [
    { id: 'fields', primary: 'Fields', items: [] },
    { id: 'views', primary: 'Views', items: [] }
];
const SelectionMenu = ({ target, constraint, onCancel: onClose, onSubmit }) => {
    const t = useI18n();
    const [loading, setLoading] = useState(false);
    const [filterValue, setFilterValue] = useState('');
    const [inputEl, setInputEl] = useElement(null);
    const [menuItems, setMenuItems] = useState(() => {
        if (constraint?.types) {
            const constrainedTypes = [];
            if (constraint.types.includes('Field')) {
                constrainedTypes.push(rootMenuItems[0]);
            }
            if (constraint.types.includes('View')) {
                constrainedTypes.push(rootMenuItems[1]);
            }
            return constrainedTypes;
        }
        return rootMenuItems;
    });
    const [selected, setSelected] = useState(() => []);
    const onItemExpand = useCallback(async (id) => {
        const expandedItem = menuHelpers.getItem(menuItems, id);
        if (!expandedItem || (expandedItem.items && expandedItem.items.length > 0)) {
            return;
        }
        setLoading(true);
        const subItems = await mockQuery({
            type: id === 'fields' ? 'Field' : 'View',
            delay: 1000
        });
        const newMenuItems = menuHelpers.mapItem(menuItems, id, item => {
            return {
                ...item,
                items: subItems.map(subItem => ({
                    id: subItem.id,
                    primary: subItem.label,
                    selected: !!selected.find(s => s.id === subItem.id)
                }))
            };
        });
        setMenuItems(newMenuItems);
        setLoading(false);
    }, [menuItems, selected]);
    const onFilter = useCallback(async (e) => {
        const val = e.currentTarget.value;
        setFilterValue(val);
        if (val) {
            setLoading(true);
            setMenuItems([]);
            const matchedItems = await mockQuery({
                filter: val,
                delay: 1000
            });
            setMenuItems(matchedItems.map(matchedItem => {
                return {
                    id: matchedItem.id,
                    primary: matchedItem.label,
                    secondary: [matchedItem.subType ?? matchedItem.type],
                    selected: !!selected.find(s => s.id === matchedItem.id)
                };
            }));
            setLoading(false);
            return;
        }
        setMenuItems(rootMenuItems);
    }, []);
    const onItemClick = useCallback((id) => {
        setSelected(cur => {
            if (cur.find(s => s.id === id)) {
                return cur.filter(sel => sel.id !== id);
            }
            return [
                ...cur,
                { id, text: menuHelpers.getItem(menuItems, id).primary }
            ];
        });
        setMenuItems(cur => menuHelpers.toggleSelected(cur, id));
    }, [menuItems]);
    return (<Popover target={target} heading='Content selection' onCancel={onClose} onSubmit={() => {
            onSubmit(selected);
        }}>
      <Flex container={{ direction: 'column', gap: 2, pad: [1, 0] }}>
        <MultiSelectInput ref={setInputEl} placeholder={t('search_placeholder_default')} value={filterValue} selected={selected} onChange={onFilter} onRemove={onItemClick}/>
        <StyledSelectionMenu focusControlEl={inputEl ?? undefined} mode='multi-select' items={menuItems} scrollAt={10} loading={loading} onItemClick={onItemClick} onItemExpand={onItemExpand}/>
      </Flex>
    </Popover>);
};
export default SelectionMenu;
//# sourceMappingURL=SelectionMenu.jsx.map