"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SpecialColumnSettingsWizardStep = void 0;
const tslib_1 = require("tslib");
const chunk_1 = tslib_1.__importDefault(require("lodash/chunk"));
const React = tslib_1.__importStar(require("react"));
const rebass_1 = require("rebass");
const CheckBox_1 = require("../components/CheckBox");
const FormLayout_1 = tslib_1.__importStar(require("../components/FormLayout"));
const Tabs_1 = require("../components/Tabs");
const AdaptableContext_1 = require("./AdaptableContext");
const SpecialColumnSettingsWizardStep = (props) => {
    const adaptable = (0, AdaptableContext_1.useAdaptable)();
    const possibleColumnTypes = adaptable.api.columnApi.getColumnTypes() ?? [];
    const { Filterable, Resizable, Groupable, Sortable, Pivotable, Aggregatable, SuppressMenu, SuppressMovable, } = props.settings ?? {};
    const handleColumnTypeChange = (columnType, checked) => {
        const columnTypes = props.settings?.ColumnTypes ?? [];
        if (checked) {
            props.onChange({
                ...props.settings,
                ColumnTypes: [...columnTypes, columnType],
            });
        }
        else {
            props.onChange({
                ...props.settings,
                ColumnTypes: columnTypes?.filter?.((item) => item !== columnType),
            });
        }
    };
    const onSettingsChange = (values) => {
        props.onChange({
            ...props.settings,
            ...values,
        });
    };
    return (React.createElement(React.Fragment, null,
        React.createElement(Tabs_1.Tabs, { marginTop: 2, autoFocus: false },
            React.createElement(Tabs_1.Tabs.Tab, null, "Column Properties"),
            React.createElement(Tabs_1.Tabs.Content, null,
                React.createElement(rebass_1.Flex, { flexDirection: "column" },
                    React.createElement(FormLayout_1.default, { style: { width: '100%' }, columns: [
                            { name: 'first', size: '30%' },
                            { size: '30%', name: 'second' },
                            { size: '30%', name: 'third' },
                        ] },
                        React.createElement(FormLayout_1.FormRow, null,
                            React.createElement(CheckBox_1.CheckBox, { "data-name": "filterable", checked: Filterable, onChange: (Filterable) => onSettingsChange({ Filterable }), disabled: !adaptable.api.optionsApi.getFilterOptions().enableFilterOnSpecialColumns }, "Filterable"),
                            React.createElement(CheckBox_1.CheckBox, { "data-name": "resizable", checked: Resizable, onChange: (Resizable) => onSettingsChange({ Resizable }) }, "Resizable"),
                            React.createElement(CheckBox_1.CheckBox, { "data-name": "groupable", checked: Groupable, onChange: (Groupable) => onSettingsChange({ Groupable }) }, "Groupable")),
                        React.createElement(FormLayout_1.FormRow, null,
                            React.createElement(CheckBox_1.CheckBox, { "data-name": "sortable", checked: Sortable, onChange: (Sortable) => onSettingsChange({ Sortable }) }, "Sortable"),
                            React.createElement(CheckBox_1.CheckBox, { "data-name": "pivotable", checked: Pivotable, onChange: (Pivotable) => onSettingsChange({ Pivotable }) }, "Pivotable"),
                            React.createElement(CheckBox_1.CheckBox, { "data-name": "aggregatable", checked: Aggregatable, onChange: (Aggregatable) => onSettingsChange({ Aggregatable }) }, "Aggregatable")),
                        React.createElement(FormLayout_1.FormRow, null,
                            React.createElement(CheckBox_1.CheckBox, { "data-name": "suppres-smenu", checked: SuppressMenu, onChange: (SuppressMenu) => onSettingsChange({ SuppressMenu }) }, "Suppress Menu"),
                            React.createElement(CheckBox_1.CheckBox, { "data-name": "suppres-movable", checked: SuppressMovable, onChange: (SuppressMovable) => onSettingsChange({ SuppressMovable }) }, "Suppress Movable"),
                            React.createElement(CheckBox_1.CheckBox, { disabled: true, checked: props.isEditable }, "Editable")))))),
        Boolean(possibleColumnTypes?.length) && (React.createElement(Tabs_1.Tabs, { marginTop: 2, autoFocus: false },
            React.createElement(Tabs_1.Tabs.Tab, null, "Column Types"),
            React.createElement(Tabs_1.Tabs.Content, null,
                React.createElement(FormLayout_1.default, { columns: [{ name: 'first', size: '30%' }, { name: 'second' }] }, (0, chunk_1.default)(possibleColumnTypes ?? [], 2)?.map(([first, second]) => (React.createElement(FormLayout_1.FormRow, { key: first },
                    first && (React.createElement(CheckBox_1.CheckBox, { "data-name": first, onChange: (checked) => handleColumnTypeChange(first, checked), checked: props.settings?.ColumnTypes?.includes?.(first) }, first)),
                    second && (React.createElement(CheckBox_1.CheckBox, { "data-name": second, onChange: (checked) => handleColumnTypeChange(second, checked), checked: props.settings?.ColumnTypes?.includes?.(second) }, second)))))))))));
};
exports.SpecialColumnSettingsWizardStep = SpecialColumnSettingsWizardStep;
