import * as React from 'react';
import SimpleButton from '../../../../components/SimpleButton';
import { Tabs } from '../../../../components/Tabs';
import { Tag } from '../../../../components/Tag';
import { getLayoutSortViewItems } from '../../../../Strategy/Utilities/Layout/getLayoutSortViewItems';
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';
export const SortSectionSummary = () => {
    const { data: layout } = useOnePageAdaptableWizardContext();
    const adaptable = useAdaptable();
    const sortViewItems = getLayoutSortViewItems(layout, adaptable.api);
    return (React.createElement(Box, null, sortViewItems.values.length ? (sortViewItems.values.map((value) => (React.createElement(Tag, { key: value, className: "twa:mb-1 twa:mr-1" }, value)))) : (React.createElement(Tag, null, "No Sorts"))));
};
const ColumnRow = (props) => {
    const SortOrder = (props.layout?.ColumnSorts ?? []).find((sort) => sort.ColumnId === props.column.columnId)?.SortOrder;
    const icon = SortOrder === 'Asc' ? 'sort-asc' : 'sort-desc';
    return (React.createElement(Box, null,
        props.column.friendlyName,
        SortOrder && (React.createElement(SimpleButton, { className: "twa:ml-2", onClick: () => props.onSortChange(props.column.columnId, SortOrder === 'Asc' ? 'Desc' : 'Asc'), variant: "raised", icon: icon }))));
};
export const SortSection = (props) => {
    const adaptable = useAdaptable();
    const { data: layout } = useOnePageAdaptableWizardContext();
    const allSortableColumns = adaptable.api.columnApi.getSortableColumns();
    const sortedSortColumns = React.useMemo(() => {
        return ArrayExtensions.sortArrayWithOrder(allSortableColumns.map((col) => col.columnId), (layout.ColumnSorts ?? []).map((sort) => sort.ColumnId), { sortUnorderedItems: false }).map((colId) => adaptable.api.columnApi.getColumnWithColumnId(colId));
    }, [layout, allSortableColumns]);
    const handleColumnsSelectionChange = React.useCallback((columnIds) => {
        props.onChange({
            ...layout,
            ColumnSorts: (columnIds || []).map((columnId) => {
                const SortOrder = layout.ColumnSorts?.find((sort) => sort.ColumnId === columnId)?.SortOrder ?? 'Asc';
                return {
                    ColumnId: columnId,
                    SortOrder: SortOrder,
                };
            }),
        });
    }, [layout]);
    const handleSortChange = React.useCallback((columnId, SortOrder) => {
        props.onChange({
            ...layout,
            ColumnSorts: layout.ColumnSorts?.map((sort) => {
                if (sort.ColumnId === columnId) {
                    return {
                        ...sort,
                        SortOrder: SortOrder,
                    };
                }
                return sort;
            }),
        });
    }, [layout]);
    return (React.createElement(Tabs, { className: "twa:h-full" },
        React.createElement(Tabs.Tab, null, "Column Sorts"),
        React.createElement(Tabs.Content, null,
            React.createElement(ValueSelector, { showFilterInput: true, filter: columnFilter, toIdentifier: (option) => `${option.columnId}`, toLabel: (option) => option.friendlyName ?? option.columnId, toListLabel: (column) => (React.createElement(ColumnRow, { onSortChange: handleSortChange, layout: layout, column: column })), options: sortedSortColumns, value: (layout.ColumnSorts ?? []).map((sort) => sort.ColumnId), allowReorder: () => true, onChange: handleColumnsSelectionChange }))));
};
