"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.UIOptionsSidebarForm = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const CheckBox_1 = require("../../../../components/CheckBox");
const DropdownButton_1 = tslib_1.__importDefault(require("../../../../components/DropdownButton"));
const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
const HelpBlock_1 = tslib_1.__importDefault(require("../../../../components/HelpBlock"));
const StringExtensions_1 = tslib_1.__importDefault(require("../../../../Utilities/Extensions/StringExtensions"));
const Flex_1 = require("../../../../components/Flex");
const ALL_SIDEBAR_OPTIONS = ['columns', 'filters', 'adaptable'];
const prepareSidebarDef = (sideBar) => {
    sideBar = sideBar;
    if (typeof sideBar === 'boolean') {
        sideBar = {
            toolPanels: ALL_SIDEBAR_OPTIONS,
        };
    }
    if (typeof sideBar === 'string') {
        sideBar = {
            toolPanels: [sideBar],
        };
    }
    if (Array.isArray(sideBar)) {
        sideBar = {
            toolPanels: sideBar,
        };
    }
    return sideBar ?? { toolPanels: [] };
};
const isSidebarChecked = (sideBar, panelName) => {
    return (sideBar?.toolPanels ?? []).some((panel) => {
        const panelId = typeof panel === 'string' ? panel : panel.id;
        return panelId === panelName;
    });
};
const UIOptionsSidebarForm = (props) => {
    const { gridOptions, onChange } = props;
    const sideBar = prepareSidebarDef(gridOptions.sideBar);
    const renderSidebarCheckbox = (sidebarName) => {
        return (React.createElement(CheckBox_1.CheckBox, { className: "twa:mr-3", key: sidebarName, checked: isSidebarChecked(sideBar, sidebarName), onChange: (check) => handleToolpanelsChange(sidebarName, check) }, StringExtensions_1.default.Humanize(sidebarName)));
    };
    const handleToolpanelsChange = (panelName, check) => {
        let newPanels = sideBar?.toolPanels ?? [];
        if (check) {
            newPanels = [...newPanels, panelName];
        }
        else {
            newPanels = newPanels.filter((panel) => {
                const panelId = typeof panel === 'string' ? panel : panel.id;
                return panelId !== panelName;
            });
        }
        let hiddenByDefault = sideBar.hiddenByDefault ?? false;
        if (newPanels.length === 0) {
            hiddenByDefault = true;
        }
        const newGridOptions = {
            ...gridOptions,
            sideBar: {
                ...sideBar,
                toolPanels: newPanels,
                hiddenByDefault,
            },
        };
        props.onChange(newGridOptions);
    };
    let sidebarPosition = sideBar?.position ?? 'right';
    const handleSidebarPositionChange = (position) => {
        const newGridOptions = {
            ...gridOptions,
            sideBar: {
                ...sideBar,
                position,
            },
        };
        props.onChange(newGridOptions);
    };
    return (React.createElement(Flex_1.Box, null,
        React.createElement(HelpBlock_1.default, null, "Tool Panels"),
        React.createElement(Flex_1.Box, { className: "twa:m-2" },
            React.createElement(Flex_1.Flex, { className: "twa:mb-2" }, ALL_SIDEBAR_OPTIONS.map(renderSidebarCheckbox)),
            React.createElement(FormLayout_1.default, { columns: [{ name: 'label' }, { name: 'children' }] },
                React.createElement(FormLayout_1.FormRow, { label: "Position" },
                    React.createElement(DropdownButton_1.default, { columns: ['label'], items: [
                            { label: 'Left', onClick: () => handleSidebarPositionChange('left') },
                            { label: 'Right', onClick: () => handleSidebarPositionChange('right') },
                        ] }, sidebarPosition === 'left' ? 'Left' : 'Right'))))));
};
exports.UIOptionsSidebarForm = UIOptionsSidebarForm;
