import * as React from 'react';
import { CheckBox } from '../../../../components/CheckBox';
import DropdownButton from '../../../../components/DropdownButton';
import FormLayout, { FormRow } from '../../../../components/FormLayout';
import HelpBlock from '../../../../components/HelpBlock';
import StringExtensions from '../../../../Utilities/Extensions/StringExtensions';
import { Box, Flex } from '../../../../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;
    });
};
export const UIOptionsSidebarForm = (props) => {
    const { gridOptions, onChange } = props;
    const sideBar = prepareSidebarDef(gridOptions.sideBar);
    const renderSidebarCheckbox = (sidebarName) => {
        return (React.createElement(CheckBox, { className: "twa:mr-3", key: sidebarName, checked: isSidebarChecked(sideBar, sidebarName), onChange: (check) => handleToolpanelsChange(sidebarName, check) }, StringExtensions.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(Box, null,
        React.createElement(HelpBlock, null, "Tool Panels"),
        React.createElement(Box, { className: "twa:m-2" },
            React.createElement(Flex, { className: "twa:mb-2" }, ALL_SIDEBAR_OPTIONS.map(renderSidebarCheckbox)),
            React.createElement(FormLayout, { columns: [{ name: 'label' }, { name: 'children' }] },
                React.createElement(FormRow, { label: "Position" },
                    React.createElement(DropdownButton, { columns: ['label'], items: [
                            { label: 'Left', onClick: () => handleSidebarPositionChange('left') },
                            { label: 'Right', onClick: () => handleSidebarPositionChange('right') },
                        ] }, sidebarPosition === 'left' ? 'Left' : 'Right'))))));
};
