import * as React from 'react';
import FormLayout from '../../../../components/FormLayout';
import { columnFilter } from './Utilities';
import { ColumnGroupTag } from '../../../Components/ColumnGroupTag';
import { RadioGroup } from '../../../../components/Radio';
import { Tabs } from '../../../../components/Tabs';
import { Tag } from '../../../../components/Tag';
import { useAdaptable } from '../../../AdaptableContext';
import { ValueSelector } from '../../../Components/ValueSelector';
import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
import ArrayExtensions from '../../../../Utilities/Extensions/ArrayExtensions';
import { normalizeLayout } from '../../../../Api/Implementation/LayoutHelpers';
import { TypeRadio } from '../../../Wizard/TypeRadio';
import { Box, Flex } from '../../../../components/Flex';
export const RowGroupingSectionSummary = () => {
    const adaptable = useAdaptable();
    const { data: layout } = useOnePageAdaptableWizardContext();
    if (adaptable.api.gridApi.isTreeDataGrid()) {
        return (React.createElement(Flex, { flexDirection: "row" },
            React.createElement(Tag, null, "Row Grouping is not available in Tree Grids")));
    }
    return (React.createElement(Flex, { flexDirection: "row" }, layout.RowGroupedColumns?.length ? (layout.RowGroupedColumns.map((columnId) => {
        return (React.createElement(Box, { key: columnId, className: "twa:mb-2 twa:mr-2" },
            React.createElement(Tag, null, adaptable.api.columnApi.getFriendlyNameForColumnId(columnId))));
    })) : (React.createElement(Tag, null, "No Row Grouping"))));
};
export const RowGroupBehaviorSection = (props) => {
    const { layout, onChange } = props;
    return (React.createElement(FormLayout, null,
        React.createElement(RadioGroup, { orientation: "vertical", value: layout.RowGroupValues?.RowGroupDefaultBehavior ?? 'always-collapsed', onRadioChange: (RowGroupDefaultBehavior) => {
                const newLayout = {
                    ...layout,
                    RowGroupValues: {
                        RowGroupDefaultBehavior,
                    },
                };
                if (newLayout.RowGroupValues.RowGroupDefaultBehavior === 'collapsed' ||
                    newLayout.RowGroupValues.RowGroupDefaultBehavior === 'expanded') {
                    newLayout.RowGroupValues.ExceptionGroupKeys = [];
                }
                onChange(newLayout);
            } },
            React.createElement(TypeRadio, { value: "always-collapsed", text: "All Collapsed", description: "Layout opens with all Grouped Rows always collapsed" }),
            React.createElement(TypeRadio, { value: "always-expanded", text: "All Expanded", description: "Layout opens with all Grouped Rows always expanded" }),
            React.createElement(TypeRadio, { value: "expanded", text: "Mostly Expanded", description: "Layout opens with all Grouped rows expanded, other than those collapsed when Layout last displayed" }),
            React.createElement(TypeRadio, { value: "collapsed", text: "Mostly Collapsed", description: "Layout opens with all Grouped rows collapsed, other than those expanded when Layout last displayed" }))));
};
export const RowGroupingSection = (props) => {
    const adaptable = useAdaptable();
    if (adaptable.api.gridApi.isTreeDataGrid()) {
        return (React.createElement(Flex, { flexDirection: "row" },
            React.createElement(Tag, null, "Row Grouping is not available in Tree Grids")));
    }
    const { data: layout } = useOnePageAdaptableWizardContext();
    const rowGroupsText = 'Row Group ' + adaptable.api.internalApi.getCorrectEnglishVariant('Behaviour');
    const allGroupableColumns = adaptable.api.columnApi.getGroupableColumns();
    const sortedGroupableColumns = React.useMemo(() => {
        return ArrayExtensions.sortArrayWithOrder(allGroupableColumns.map((col) => col.columnId), layout.RowGroupedColumns ?? [], { sortUnorderedItems: false }).map((colId) => adaptable.api.columnApi.getColumnWithColumnId(colId));
    }, [layout, allGroupableColumns]);
    const onChange = (layout) => {
        props.onChange(normalizeLayout(layout));
    };
    const handleColumnsChange = (columnIds) => {
        const newLayout = {
            ...layout,
            RowGroupedColumns: columnIds,
        };
        if (!newLayout.RowGroupValues) {
            newLayout.RowGroupValues = {
                RowGroupDefaultBehavior: 'always-collapsed',
            };
        }
        onChange(newLayout);
    };
    return (React.createElement(Box, { className: "twa:h-full" },
        React.createElement(Tabs, null,
            React.createElement(Tabs.Tab, null, "Group Display Type"),
            React.createElement(Tabs.Content, null,
                React.createElement(FormLayout, null,
                    React.createElement(RadioGroup, { orientation: "vertical", value: layout.RowGroupDisplayType ?? 'single', onRadioChange: (RowGroupDisplayType) => {
                            let newLayout = {
                                ...layout,
                                RowGroupDisplayType,
                            };
                            if (RowGroupDisplayType === 'single') {
                                newLayout.TableColumns = (newLayout.TableColumns || []).filter((colId) => !adaptable.api.columnApi.isAutoRowGroupColumnForMulti(colId));
                            }
                            else {
                                newLayout.TableColumns = (newLayout.TableColumns || []).filter((colId) => !adaptable.api.columnApi.isAutoRowGroupColumnForSingle(colId));
                            }
                            onChange(newLayout);
                        } },
                        React.createElement(TypeRadio, { value: "single", text: "Single Column", description: "All Row Grouped Columns display in one hierarchical Column" }),
                        React.createElement(TypeRadio, { value: "multi", text: "Multiple Columns", description: "Each Row Grouped Columns displays in its own, separate, Column" }))))),
        React.createElement(Tabs, { className: "twa:mt-2" },
            React.createElement(Tabs.Tab, null, "Row Grouped Columns"),
            React.createElement(Tabs.Tab, null, rowGroupsText),
            React.createElement(Tabs.Content, null,
                React.createElement(ValueSelector, { showFilterInput: true, filter: columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, toListLabel: (option) => (React.createElement(Flex, { alignItems: "center" },
                        option.friendlyName ?? option.columnId,
                        React.createElement(ColumnGroupTag, { column: option }))), options: sortedGroupableColumns, value: layout.RowGroupedColumns ?? [], allowReorder: true, onChange: handleColumnsChange })),
            React.createElement(Tabs.Content, null,
                React.createElement(RowGroupBehaviorSection, { layout: layout, onChange: onChange })))));
};
