import React, { useMemo } from 'react';
import { makeStyles } from '@material-ui/core';
import { IconButtonWithTooltip } from '../../UI/inputs/buttons/IconButtonWithToolTip';
import { EraseToolIcon, ChevronUnfold10Icon, UploadIcon, SkypeMinusIcon, ChevronFold10Icon, ViewListTreeIcon, BulletedTreeListIcon } from '@fluentui/react-icons';
import clsx from 'clsx';
import { TreeViewModeEnums } from '../../enums/unitySystemEnums.ts';
const useStyles = makeStyles((theme) => ({
    root: {
        display: 'flex',
        justifyContent: 'space-between'
        // width: 170
    },
    icon: {
        margin: theme.spacing(0.5),
        borderRadius: 2,
        width: theme.spacing(1),
        height: theme.spacing(1)
    }
}));
export const InquiryControlList = ({ remove, expandAll, collapseAll, moveToTop, clearAll, switchTreeViewMode, treeViewMode, hiddenControls = [], classes: classProps }) => {
    const classes = useStyles();
    const { inquiryControlListRoot } = classProps || {};
    const controlList = useMemo(() => {
        return [
            {
                id: 'clearAll',
                label: 'Clear All',
                icon: SkypeMinusIcon,
                clickFunction: clearAll
            },
            {
                id: 'remove',
                label: 'Remove',
                icon: EraseToolIcon,
                clickFunction: remove
            },
            {
                id: 'collapseAll',
                label: 'Collapse All',
                icon: ChevronFold10Icon,
                clickFunction: collapseAll
            },
            {
                id: 'expandAll',
                label: 'Expand All',
                icon: ChevronUnfold10Icon,
                clickFunction: expandAll
            },
            {
                id: 'moveToTop',
                label: 'Move To Top',
                icon: UploadIcon,
                clickFunction: moveToTop
            },
            {
                id: 'switchTreeViewMode',
                label: treeViewMode === TreeViewModeEnums.Compact
                    ? 'Classic View'
                    : 'Compact View',
                icon: treeViewMode === TreeViewModeEnums.Compact
                    ? ViewListTreeIcon
                    : BulletedTreeListIcon,
                clickFunction: switchTreeViewMode
            }
        ];
    }, [
        remove,
        expandAll,
        moveToTop,
        clearAll,
        collapseAll,
        treeViewMode,
        switchTreeViewMode
    ]);
    const filteredControlList = useMemo(() => {
        if (!controlList) {
            return [];
        }
        return controlList.filter((control) => !hiddenControls.includes(control.id));
    }, [controlList, hiddenControls]);
    const ButtonItem = ({ title, icon, clickFunction }) => {
        return (React.createElement(IconButtonWithTooltip, { id: `udpRecord-InquiryControlList-${title.replace(/\s+/g, '')}`, udprecordid: `udpRecord-InquiryControlList-${title.replace(/\s+/g, '')}`, title: title, className: classes.icon, size: "medium", onClick: clickFunction, icon: icon }));
    };
    return (React.createElement("div", { className: clsx(classes.root, inquiryControlListRoot) }, filteredControlList.map((item) => {
        return (React.createElement(ButtonItem, { title: item.label, icon: item.icon, clickFunction: item.clickFunction }));
    })));
};
//# sourceMappingURL=InquiryControlList.js.map