import * as React from 'react';
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 { columnFilter } from './Utilities';
import ArrayExtensions from '../../../../Utilities/Extensions/ArrayExtensions';
import { Box } from '../../../../components/Flex';
import { CheckBox } from '../../../../components/CheckBox';
export const PivotColumnsSectionSummary = () => {
    const adaptable = useAdaptable();
    const { data: layout } = useOnePageAdaptableWizardContext();
    return (React.createElement(Box, { className: "twa:p-2 twa:rounded-standard twa:bg-defaultbackground" }, layout.PivotColumns?.length ? (layout.PivotColumns.map((columnId) => (React.createElement(Tag, { className: "twa:mr-1", key: columnId }, adaptable.api.columnApi.getFriendlyNameForColumnId(columnId))))) : (React.createElement(Tag, null, "No Pivot Columns Defined"))));
};
export const PivotColumnsSection = (props) => {
    const adaptable = useAdaptable();
    const { data: layout } = useOnePageAdaptableWizardContext();
    const allPivotColumns = adaptable.api.columnApi.getPivotableColumns();
    const sortedPivotColumns = React.useMemo(() => {
        return ArrayExtensions.sortArrayWithOrder(allPivotColumns.map((col) => col.columnId), layout.PivotColumns ?? [], { sortUnorderedItems: false }).map((colId) => adaptable.api.columnApi.getColumnWithColumnId(colId));
    }, [layout, allPivotColumns]);
    const handleColumnsChange = (columnIds) => {
        props.onChange({
            ...layout,
            PivotColumns: columnIds,
        });
    };
    return (React.createElement(Tabs, { className: "twa:h-full" },
        React.createElement(Tabs.Tab, null, "Pivot Columns"),
        React.createElement(Tabs.Content, null,
            React.createElement(Box, { className: "twa:mb-3 twa:px-2" },
                React.createElement(CheckBox, { checked: !!layout.PivotResultColumnsOrder, onChange: (checked) => {
                        props.onChange({
                            ...layout,
                            PivotResultColumnsOrder: checked,
                        });
                    } }, "Persist Order of Pivot Result Columns")),
            React.createElement(ValueSelector, { showFilterInput: true, filter: columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, options: sortedPivotColumns, value: layout.PivotColumns ?? [], allowReorder: true, onChange: handleColumnsChange }))));
};
