import chunk from 'lodash/chunk';
import * as React from 'react';
import { CheckBox } from '../components/CheckBox';
import FormLayout, { FormRow } from '../components/FormLayout';
import { Tabs } from '../components/Tabs';
import { useAdaptable } from './AdaptableContext';
import { Flex } from '../components/Flex';
export const SpecialColumnSettingsWizardStep = (props) => {
    const adaptable = 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, { className: "twa:mt-2", autoFocus: false },
            React.createElement(Tabs.Tab, null, "Column Properties"),
            React.createElement(Tabs.Content, null,
                React.createElement(Flex, { flexDirection: "column" },
                    React.createElement(FormLayout, { className: "twa:w-full", columns: [
                            { name: 'first', size: '30%' },
                            { size: '30%', name: 'second' },
                            { size: '30%', name: 'third' },
                        ] },
                        React.createElement(FormRow, null,
                            React.createElement(CheckBox, { "data-name": "filterable", checked: Filterable, onChange: (Filterable) => onSettingsChange({ Filterable }), disabled: !adaptable.api.optionsApi.getFilterOptions().enableFilterOnSpecialColumns }, "Filterable"),
                            React.createElement(CheckBox, { "data-name": "resizable", checked: Resizable, onChange: (Resizable) => onSettingsChange({ Resizable }) }, "Resizable"),
                            React.createElement(CheckBox, { "data-name": "groupable", checked: Groupable, onChange: (Groupable) => onSettingsChange({ Groupable }) }, "Groupable")),
                        React.createElement(FormRow, null,
                            React.createElement(CheckBox, { "data-name": "sortable", checked: Sortable, onChange: (Sortable) => onSettingsChange({ Sortable }) }, "Sortable"),
                            React.createElement(CheckBox, { "data-name": "pivotable", checked: Pivotable, onChange: (Pivotable) => onSettingsChange({ Pivotable }) }, "Pivotable"),
                            React.createElement(CheckBox, { "data-name": "aggregatable", checked: Aggregatable, onChange: (Aggregatable) => onSettingsChange({ Aggregatable }) }, "Aggregatable")),
                        React.createElement(FormRow, null,
                            React.createElement(CheckBox, { "data-name": "suppres-smenu", checked: SuppressMenu, onChange: (SuppressMenu) => onSettingsChange({ SuppressMenu }) }, "Suppress Menu"),
                            React.createElement(CheckBox, { "data-name": "suppres-movable", checked: SuppressMovable, onChange: (SuppressMovable) => onSettingsChange({ SuppressMovable }) }, "Suppress Movable"),
                            React.createElement(CheckBox, { disabled: true, checked: props.isEditable }, "Editable")))))),
        Boolean(possibleColumnTypes?.length) && (React.createElement(Tabs, { className: "twa:mt-2", autoFocus: false },
            React.createElement(Tabs.Tab, null, "Column Types"),
            React.createElement(Tabs.Content, null,
                React.createElement(FormLayout, { columns: [{ name: 'first', size: '30%' }, { name: 'second' }] }, chunk(possibleColumnTypes ?? [], 2)?.map(([first, second]) => (React.createElement(FormRow, { key: first },
                    first && (React.createElement(CheckBox, { "data-name": first, onChange: (checked) => handleColumnTypeChange(first, checked), checked: props.settings?.ColumnTypes?.includes?.(first) }, first)),
                    second && (React.createElement(CheckBox, { "data-name": second, onChange: (checked) => handleColumnTypeChange(second, checked), checked: props.settings?.ColumnTypes?.includes?.(second) }, second)))))))))));
};
