var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import React, { useMemo, useState, useEffect } from 'react';
import { makeStyles, Typography, Popper, useTheme } from '@material-ui/core';
import { InquiryControlList } from './InquiryControlList';
import { FluentSearchField } from '../../UI/inputs/textField/FluentSearchField';
import { FluentButton } from '../../UI/inputs/buttons/FluentButton';
import { FluentTextFieldAutoComplete } from '../../UI/inputs/textField/FluentTextFieldAutoComplete';
const useStyles = makeStyles((theme) => ({
    root: {},
    upperWrapper: {
        paddingLeft: theme.spacing(1),
        paddingRight: theme.spacing(1)
    },
    button: {
        textTransform: 'none',
        textDecorationLine: 'underline',
        padding: 0,
        height: theme.spacing(3),
        '&:hover': {
            backgroundColor: 'rgba(0, 0, 0, 0)'
        }
    },
    searchRow: {
        display: 'inline-flex',
        width: '100%'
    },
    searchField: {
        width: '100%'
    },
    entitySelect: {},
    inputPropRoot: { height: theme.spacing(4), borderRadius: 0 },
    inputPropInput: { marginTop: theme.spacing(-1.75) },
    formControl: {
        '& .MuiFormControl-marginDense': {
            marginTop: 7
        },
        width: theme.spacing(9)
    },
    formLabelRoot: {
        marginTop: -7
    }
}));
const AutoCompletePopper = (props) => {
    return (React.createElement(Popper, Object.assign({}, props, { style: { maxWidth: 'fit-content' }, placement: "bottom-start" })));
};
export const InquiryNodeControls = (props) => {
    const { children, remove, expandAll, collapseAll, moveToTop, clearAll, switchTreeViewMode, treeViewMode, changeSideBarView, showSearch = true, showControls = true, hiddenControls = [], classes: classProps, entityList, entityValue, setEntityValue, clearSearchStr, setClearSearchStr, isPreloadedTree, treeLoading } = props, otherProps = __rest(props, ["children", "remove", "expandAll", "collapseAll", "moveToTop", "clearAll", "switchTreeViewMode", "treeViewMode", "changeSideBarView", "showSearch", "showControls", "hiddenControls", "classes", "entityList", "entityValue", "setEntityValue", "clearSearchStr", "setClearSearchStr", "isPreloadedTree", "treeLoading"]);
    const classes = useStyles(props);
    const [searchValue, setSearchValue] = useState('');
    const theme = useTheme();
    const handleEntityChange = (value) => {
        setEntityValue(value);
    };
    const handleOnChange = (event) => {
        setSearchValue(event.target.value);
    };
    const updatedEntityList = useMemo(() => {
        if (!entityList) {
            return [];
        }
        const list = [...entityList];
        list.unshift({ value: '', label: 'All' });
        return list;
    }, [entityList]);
    useEffect(() => {
        if (clearSearchStr) {
            setSearchValue('');
            setClearSearchStr(false);
        }
    }, [clearSearchStr, setClearSearchStr]);
    return (React.createElement(React.Fragment, null, React.createElement("div", { className: classes.upperWrapper }, showSearch && !isPreloadedTree && (React.createElement("div", { className: classes.searchRow }, React.createElement("div", { className: classes.searchField }, React.createElement(FluentSearchField, Object.assign({ id: "udpRecord-InquiryNodeControls-Search", udprecordid: "udpRecord-InquiryNodeControls-Search", value: searchValue, onChange: handleOnChange }, otherProps))), !!!hiddenControls.length && (React.createElement("div", { className: classes.entitySelect }, React.createElement(FluentTextFieldAutoComplete, { id: "udpRecord-InquiryNodeControls-DropDown", udprecordid: "udpRecord-InquiryNodeControls-DropDown", variant: "filled", margin: "normal", size: "small", fullWidth: true, disableClearable: true, customPopper: AutoCompletePopper, inputProps: { disableUnderline: true }, classes: classes, options: updatedEntityList, optionKey: "label", value: entityValue || updatedEntityList[0], onChange: handleEntityChange }))))), React.createElement("div", { style: {
            display: 'flex',
            justifyContent: showControls ? 'space-between' : 'end',
            height: !!(hiddenControls === null || hiddenControls === void 0 ? void 0 : hiddenControls.length) && theme.spacing(3)
        } }, showControls && (React.createElement(InquiryControlList, { remove: remove, expandAll: expandAll, collapseAll: collapseAll, moveToTop: moveToTop, clearAll: clearAll, switchTreeViewMode: switchTreeViewMode, treeViewMode: treeViewMode, hiddenControls: hiddenControls, classes: classProps })), !!!hiddenControls.length && changeSideBarView && !treeLoading && (React.createElement(FluentButton, { id: "udpRecord-InquiryNodeControls-AdvSearch", udprecordid: "udpRecord-InquiryNodeControls-AdvSearch", onClick: () => changeSideBarView(1), className: classes.button }, React.createElement(Typography, { variant: "caption" }, "Adv. Search"))))), showControls && (React.createElement("div", { style: {
            // margin: !!!hiddenControls.length ? '0px 8px 4px' : '8px 8px 4px',
            marginBottom: !!!hiddenControls.length ? 0 : 8
        } })), React.createElement("div", { className: classes.root }, children)));
};
//# sourceMappingURL=InquiryNodeControls.js.map