import * as React from 'react';
import { Tabs } from '../../../components/Tabs';
import { Tag } from '../../../components/Tag';
import { NewColumnSelector } from '../../Components/ColumnSelector';
import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
import { Box, Flex } from '../../../components/Flex';
import FormLayout, { FormRow } from '../../../components/FormLayout';
import Input from '../../../components/Input';
export const renderCustomSortColumn = (data) => {
    const { api } = useOnePageAdaptableWizardContext();
    return (React.createElement(Box, { className: "twa:text-2 twa:py-2 twa:pr-2" },
        React.createElement(Tag, { className: "twa:mr-2" },
            "Name: ",
            data.Name),
        React.createElement(Tag, null,
            "Column: ",
            api.columnApi.getFriendlyNameForColumnId(data.ColumnId))));
};
export const isValidCustomSortColumn = (data, allCustomSorts) => {
    if (!data.Name) {
        return 'A name is required.';
    }
    if (allCustomSorts.some((customSort) => customSort.Name === data.Name && customSort.Uuid !== data.Uuid)) {
        return 'A Custom Sort with this name already exists.';
    }
    if (!data.ColumnId) {
        return 'Please select a column for the Custom Sort.';
    }
    return true;
};
export const CustomSortColumnWizardSection = (props) => {
    const { data, api } = useOnePageAdaptableWizardContext();
    const sortableCols = React.useMemo(() => {
        const sortableColumns = api.columnApi.getSortableColumns();
        const nonComparerSortableColumns = sortableColumns.filter((c) => {
            return api.customSortApi.internalApi.columnHasCustomSortComparer(c.columnId);
        });
        const customSorts = api.customSortApi.getCustomSorts();
        const columnSortComparers = api.optionsApi.getCustomSortOptions().customSortComparers || [];
        const usedColumnIds = [
            ...customSorts.map((customSort) => customSort.ColumnId),
            ...columnSortComparers.map((comparer) => api.columnScopeApi.getColumnIdsInScope(comparer.scope)),
        ];
        // filter out used colum ids, but include the current one
        return sortableColumns.filter((column) => {
            if (api.customSortApi.internalApi.columnHasCustomSortComparer(column.columnId)) {
                return false;
            }
            if (!props.isNew && column.columnId === data?.ColumnId) {
                return true;
            }
            return usedColumnIds.every((usedColumnId) => {
                return column.columnId !== usedColumnId;
            });
        });
    }, []);
    const onNameChange = (event) => {
        props.onChange({
            ...data,
            Name: event.target.value,
        });
    };
    return (React.createElement(Flex, { flexDirection: "column", style: { height: '100%' } },
        React.createElement(Tabs, { className: "twa:mb-3" },
            React.createElement(Tabs.Tab, null, "Settings"),
            React.createElement(Tabs.Content, null,
                React.createElement(Flex, { flexDirection: "row" },
                    React.createElement(FormLayout, { className: "twa:max-w-[300px] twa:w-full" },
                        React.createElement(FormRow, { label: "Name" },
                            React.createElement(Input, { className: "twa:w-full", "data-name": "custom-sort-name", onChange: onNameChange, value: data?.Name ?? '' })))))),
        React.createElement(Tabs, { style: { flex: 1, minHeight: 0 } },
            React.createElement(Tabs.Tab, null, "Column"),
            React.createElement(Tabs.Content, null,
                React.createElement(NewColumnSelector, { availableColumns: sortableCols, selected: data.ColumnId ? [data.ColumnId] : [], singleSelect: true, onChange: (ids) => {
                        props.onChange({
                            ...data,
                            SortedValues: [],
                            ColumnId: ids[0],
                        });
                    }, allowReorder: false })))));
};
