"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.UIOptionsStatusbarForm = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const ModuleManager_1 = require("../../../../components/DragAndDropContext/ModuleManager");
const HelpBlock_1 = tslib_1.__importDefault(require("../../../../components/HelpBlock"));
const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
const Input_1 = tslib_1.__importDefault(require("../../../../components/Input"));
const SimpleButton_1 = tslib_1.__importDefault(require("../../../../components/SimpleButton"));
const DropdownButton_1 = tslib_1.__importDefault(require("../../../../components/DropdownButton"));
const FormBox_1 = require("../Components/FormBox");
const Flex_1 = require("../../../../components/Flex");
const UIOptionsStatusbarForm = (props) => {
    const allPanels = props.gridOptions?.statusBar?.statusPanels ?? [];
    const panelIdtoPanel = (panelsIds, align) => panelsIds.map((panelId) => {
        const previousItem = allPanels.find((panel) => panel.key === panelId || panel.statusPanel === panelId);
        if (previousItem) {
            return {
                ...previousItem,
                align,
            };
        }
        else {
            const newPanel = {
                statusPanel: panelId,
                align,
            };
            return newPanel;
        }
    });
    const leftPanels = allPanels.filter((panel) => !panel?.align || panel.align === 'left');
    const centerPanels = allPanels.filter((panel) => panel.align === 'center');
    const rightPanels = allPanels.filter((panel) => panel.align === 'right');
    const handleTabChange = (tabs) => {
        const leftPanels = panelIdtoPanel(tabs[0].Items, 'left');
        const centerPanels = panelIdtoPanel(tabs[1].Items, 'center');
        const rightPanels = panelIdtoPanel(tabs[2].Items, 'right');
        const newStatusbarPanels = [...leftPanels, ...centerPanels, ...rightPanels];
        props.onChange({
            ...props.gridOptions,
            statusBar: {
                ...props.gridOptions.statusBar,
                statusPanels: newStatusbarPanels,
            },
        });
    };
    const disabled = false;
    const panelToTabItemId = (panel) => panel.key ?? panel.statusPanel;
    const tabs = [
        {
            Name: 'Left',
            Items: leftPanels.map(panelToTabItemId),
        },
        {
            Name: 'Center',
            Items: centerPanels.map(panelToTabItemId),
        },
        {
            Name: 'Right',
            Items: rightPanels.map(panelToTabItemId),
        },
    ];
    const allOptions = [
        { Id: 'agTotalRowCountComponent', Title: 'Row Count' },
        { Id: 'agTotalAndFilteredRowCountComponent', Title: 'Totals and Filtered Row Count' },
        { Id: 'agFilteredRowCountComponent', Title: 'Filtered Row Count' },
        { Id: 'agSelectedRowCountComponent', Title: 'Selected Row Count' },
        { Id: 'agAggregationComponent', Title: 'Aggregation' },
    ];
    const availableItems = allOptions;
    const [adaptablePanelTitle, setAdaptablePanelTitle] = React.useState('');
    const [adaptablePanelAlign, setAdaptablePanelAlign] = React.useState('left');
    const isAdaptablePanelTitleAvailable = !allPanels.some((panel) => panel.key === adaptablePanelTitle);
    const alignOptions = [
        { onClick: () => setAdaptablePanelAlign('left'), value: 'left', label: 'Left' },
        { onClick: () => setAdaptablePanelAlign('center'), value: 'center', label: 'Center' },
        { onClick: () => setAdaptablePanelAlign('right'), value: 'right', label: 'Right' },
    ];
    const handleNewAdaptablePanel = () => {
        const newAdaptablePanel = {
            statusPanel: 'AdaptableStatusPanel',
            align: adaptablePanelAlign,
            key: adaptablePanelTitle,
        };
        const newStatusbarPanels = [...allPanels, newAdaptablePanel];
        setAdaptablePanelTitle('');
        setAdaptablePanelAlign('left');
        props.onChange({
            ...props.gridOptions,
            statusBar: {
                ...props.gridOptions.statusBar,
                statusPanels: newStatusbarPanels,
            },
        });
    };
    return (React.createElement(Flex_1.Box, null,
        React.createElement(HelpBlock_1.default, null, "Status Bar"),
        React.createElement(Flex_1.Box, { className: "twa:p-2" },
            React.createElement(FormBox_1.NocodeWizardFormBox, null,
                React.createElement(Flex_1.Box, { as: "b" }, "Create Adaptable Statusbar Panel"),
                React.createElement(FormLayout_1.default, { className: "twa:mt-2" },
                    React.createElement(FormLayout_1.FormRow, { label: "Panel Name" },
                        React.createElement(Input_1.default, { value: adaptablePanelTitle, placeholder: 'Adaptable Panel Name', onChange: (event) => setAdaptablePanelTitle(event.target.value) })),
                    React.createElement(FormLayout_1.FormRow, { label: "Align" },
                        React.createElement(DropdownButton_1.default, { columns: ['label'], items: alignOptions }, alignOptions.find((option) => option.value === adaptablePanelAlign)?.label)),
                    React.createElement(FormLayout_1.FormRow, { label: "" },
                        React.createElement(SimpleButton_1.default, { disabled: !isAdaptablePanelTitleAvailable, onClick: handleNewAdaptablePanel, icon: "plus", variant: "raised" }, "Add"),
                        !isAdaptablePanelTitleAvailable && (React.createElement(Flex_1.Box, { className: "twa:mt-2 twa:text-error" }, "Adaptable panel name must be unique."))))),
            React.createElement(ModuleManager_1.ModuleManager, { permittedActions: {
                    createTab: false,
                    dragAndDropTab: false,
                    deleteTab: false,
                    editTabName: false,
                }, onTabsChange: handleTabChange, disabled: disabled, tabs: tabs, availableItems: availableItems, tabsTitle: 'Status Bar Panels', unusedPanelTitle: "Ag Grid Status Bar Panels", dragItemText: "Drag into a Status Bar Panel below" }))));
};
exports.UIOptionsStatusbarForm = UIOptionsStatusbarForm;
