"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.StyledColumnWizardColumnSection = exports.isValidStyledColumnColumn = exports.renderStyledColumnColumnSummary = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const Tabs_1 = require("../../../components/Tabs");
const Tag_1 = require("../../../components/Tag");
const ColumnSelector_1 = require("../../Components/ColumnSelector");
const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
const Flex_1 = require("../../../components/Flex");
const renderStyledColumnColumnSummary = (data) => {
    const { api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
    return (React.createElement(Flex_1.Box, { className: "twa:pr-2 twa:py-2" },
        "Styled Column column:",
        ' ',
        React.createElement(Tag_1.Tag, null, data.ColumnId
            ? api.columnApi.getFriendlyNameForColumnId(data.ColumnId)
            : 'No Column Selected')));
};
exports.renderStyledColumnColumnSummary = renderStyledColumnColumnSummary;
const isValidStyledColumnColumn = (data) => {
    if (!data.ColumnId) {
        return 'Please select a column for the Styled Column.';
    }
    return true;
};
exports.isValidStyledColumnColumn = isValidStyledColumnColumn;
const StyledColumnWizardColumnSection = (props) => {
    const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
    const sortableCols = React.useMemo(() => {
        let sortableColumns = [];
        if (data.SparklineStyle) {
            sortableColumns = api.columnApi.getNumericArrayColumns();
        }
        else if (data.BadgeStyle) {
            sortableColumns = [
                ...api.columnApi.getNumericColumns(),
                ...api.columnApi.getTextColumns(),
                ...api.columnApi.getTextArrayColumns(),
                ...api.columnApi.getNumberArrayColumns(),
            ];
        }
        else {
            sortableColumns = api.columnApi.getNumericColumns();
        }
        const styledColumns = api.styledColumnApi.getStyledColumns();
        const usedColumnIds = styledColumns
            .map((styledColumn) => {
            // filter out current styled column columnID
            if (styledColumn.Uuid === data.Uuid) {
                return null;
            }
            return styledColumn.ColumnId;
        })
            .filter(Boolean);
        return sortableColumns.filter((column) => {
            return usedColumnIds.every((usedColumnId) => {
                return column.columnId !== usedColumnId;
            });
        });
    }, [data]);
    const handleColumnsChange = (columnIds) => {
        const columnId = columnIds[0];
        const emptyRanges = api.columnScopeApi.createCellColorRangesForScope({
            ColumnIds: [columnId],
        });
        const newStyledColumn = {
            ...data,
            ColumnId: columnId,
        };
        if (newStyledColumn.PercentBarStyle) {
            newStyledColumn.PercentBarStyle = {
                ...newStyledColumn.PercentBarStyle,
                CellRanges: emptyRanges,
            };
        }
        if (newStyledColumn.GradientStyle) {
            newStyledColumn.GradientStyle = {
                ...newStyledColumn.GradientStyle,
                CellRanges: emptyRanges,
            };
        }
        props.onChange(newStyledColumn);
    };
    return (React.createElement(Tabs_1.Tabs, { style: { height: '100%' } },
        React.createElement(Tabs_1.Tabs.Tab, null, "Column"),
        React.createElement(Tabs_1.Tabs.Content, null,
            React.createElement(ColumnSelector_1.NewColumnSelector, { availableColumns: sortableCols, selected: data.ColumnId ? [data.ColumnId] : [], singleSelect: true, onChange: handleColumnsChange, allowReorder: false }))));
};
exports.StyledColumnWizardColumnSection = StyledColumnWizardColumnSection;
