"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.RowGroupingSection = exports.RowGroupingSectionSummary = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const rebass_1 = require("rebass");
const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
const Utilities_1 = require("./Utilities");
const Tabs_1 = require("../../../../components/Tabs");
const Tag_1 = require("../../../../components/Tag");
const AdaptableContext_1 = require("../../../AdaptableContext");
const ValueSelector_1 = require("../../../Components/ValueSelector");
const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../../Utilities/Extensions/ArrayExtensions"));
const RowGroupingSectionSummary = () => {
    var _a;
    const adaptable = (0, AdaptableContext_1.useAdaptable)();
    const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
    return (React.createElement(rebass_1.Box, null, ((_a = layout.RowSummaries) === null || _a === void 0 ? void 0 : _a.length) ? (layout === null || layout === void 0 ? void 0 : layout.RowSummaries.map((rowSummary, index) => {
        var _a;
        const columns = Object.entries((_a = rowSummary.ColumnsMap) !== null && _a !== void 0 ? _a : {})
            .map(([columnId, expression]) => {
            if (columnId === 'Source' || columnId === 'Uuid') {
                return '';
            }
            return `${expression}(${adaptable.api.columnApi.getFriendlyNameForColumnId(columnId)})`;
        })
            .filter(Boolean)
            .join(', ');
        return (React.createElement(rebass_1.Box, { mb: 2 },
            React.createElement(Tag_1.Tag, { key: index },
                rowSummary.Position,
                " ",
                columns)));
    })) : (React.createElement(Tag_1.Tag, null, "No Row Summaries"))));
};
exports.RowGroupingSectionSummary = RowGroupingSectionSummary;
const RowGroupingSection = (props) => {
    var _a, _b, _c;
    const adaptable = (0, AdaptableContext_1.useAdaptable)();
    const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
    const allGroupableColumns = adaptable.api.columnApi.getGroupableColumns();
    const sortedGroupableColumns = React.useMemo(() => {
        var _a;
        return ArrayExtensions_1.default.sortArrayWithOrder(allGroupableColumns.map((col) => col.columnId), (_a = layout.RowGroupedColumns) !== null && _a !== void 0 ? _a : [], { sortUnorderedItems: false }).map((colId) => adaptable.api.columnApi.getColumnWithColumnId(colId));
    }, [layout, allGroupableColumns]);
    const handleColumnsChange = (columnIds) => {
        props.onChange(Object.assign(Object.assign({}, layout), { RowGroupedColumns: columnIds }));
    };
    return (React.createElement(Tabs_1.Tabs, { style: { height: '100%' } },
        React.createElement(Tabs_1.Tabs.Tab, null, "Group Rows"),
        ((_a = layout.ExpandedRowGroupValues) === null || _a === void 0 ? void 0 : _a.length) && React.createElement(Tabs_1.Tabs.Tab, null, "Expanded Rows"),
        React.createElement(Tabs_1.Tabs.Content, null,
            React.createElement(ValueSelector_1.ValueSelector, { showFilterInput: true, showSelectedOnlyPosition: "top", filter: Utilities_1.columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => { var _a; return (_a = option.friendlyName) !== null && _a !== void 0 ? _a : option.columnId; }, options: sortedGroupableColumns, value: (_b = layout.RowGroupedColumns) !== null && _b !== void 0 ? _b : [], allowReorder: true, xSelectedLabel: () => {
                    return `Selected Columns:`;
                }, onChange: handleColumnsChange })),
        ((_c = layout.ExpandedRowGroupValues) === null || _c === void 0 ? void 0 : _c.length) && (React.createElement(Tabs_1.Tabs.Content, null,
            React.createElement(rebass_1.Box, { backgroundColor: "var(--ab-color-defaultbackground)" },
                React.createElement(FormLayout_1.default, { p: 2 },
                    React.createElement(FormLayout_1.FormRow, { label: "Values" }, layout.ExpandedRowGroupValues.map((value, index) => (React.createElement(Tag_1.Tag, { mb: 2, mr: 2, key: index }, value))))))))));
};
exports.RowGroupingSection = RowGroupingSection;
