import * as React from 'react';
import { Box, Flex, Text } from 'rebass';
import FormLayout, { FormRow } from '../../../components/FormLayout';
import { CheckBox } from '../../../components/CheckBox';
import { Tabs } from '../../../components/Tabs';
import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
import { Tag } from '../../../components/Tag';
import { ToggleGroup } from '../../../components/Toggle/ToggleGroup';
import { Toggle } from '../../../components/Toggle/Toggle';
export const renderFormatColumnSettingsSummary = (data) => {
    return (React.createElement(Box, { padding: 2 },
        React.createElement(Text, null,
            "Cell alignment ",
            React.createElement(Tag, null, data.CellAlignment ?? 'default')),
        React.createElement(Text, { mt: 3 },
            "Data Rows ",
            React.createElement(Tag, null, data.RowScope?.ExcludeDataRows ? 'no' : 'yes')),
        ' ',
        React.createElement(Text, { mt: 3 },
            "Group Rows ",
            React.createElement(Tag, null, data.RowScope?.ExcludeGroupRows ? 'no' : 'yes')),
        React.createElement(Text, { mt: 3 },
            "Summary Rows ",
            React.createElement(Tag, null, data.RowScope?.ExcludeSummaryRows ? 'no' : 'yes'))));
};
export const FormatColumnSettingsWizardSection = (props) => {
    const { data } = useOnePageAdaptableWizardContext();
    const onCellAlignmentSelectChanged = (CellAlignment) => {
        const newData = { ...data, CellAlignment };
        if (CellAlignment === null) {
            delete newData.CellAlignment;
        }
        props.onChange(newData);
    };
    const onExcludeDataRowsChanged = (ExcludeDataRows) => {
        props.onChange({
            ...data,
            RowScope: {
                ...data.RowScope,
                ExcludeDataRows,
            },
        });
    };
    const onExcludeGroupedRowsChanged = (ExcludeGroupedRows) => {
        props.onChange({
            ...data,
            RowScope: {
                ...data.RowScope,
                ExcludeGroupRows: ExcludeGroupedRows,
            },
        });
    };
    const onExcludeSummaryRowsChanged = (ExcludeSummaryRows) => {
        props.onChange({
            ...data,
            RowScope: {
                ...data.RowScope,
                ExcludeSummaryRows,
            },
        });
    };
    return (React.createElement(Tabs, null,
        React.createElement(Tabs.Tab, null, "Settings"),
        React.createElement(Tabs.Content, null,
            React.createElement(Flex, { flexDirection: "row" },
                React.createElement(FormLayout, null,
                    React.createElement(FormRow, { label: "Cell Alignment" },
                        React.createElement(ToggleGroup, null,
                            React.createElement(Toggle, { icon: "align-left", pressed: data.CellAlignment === 'Left', onPressedChange: (pressed) => pressed
                                    ? onCellAlignmentSelectChanged('Left')
                                    : onCellAlignmentSelectChanged(null) }),
                            React.createElement(Toggle, { icon: "align-center", pressed: data.CellAlignment === 'Center', onPressedChange: (pressed) => pressed
                                    ? onCellAlignmentSelectChanged('Center')
                                    : onCellAlignmentSelectChanged(null) }),
                            React.createElement(Toggle, { icon: "align-right", pressed: data.CellAlignment === 'Right', onPressedChange: (pressed) => pressed
                                    ? onCellAlignmentSelectChanged('Right')
                                    : onCellAlignmentSelectChanged(null) }))),
                    React.createElement(FormRow, { label: "Exclude Data Rows:" },
                        React.createElement(Flex, { alignItems: "center", marginLeft: 2 },
                            React.createElement(CheckBox, { "data-name": "exclude-data-rows-checkbox", checked: data.RowScope?.ExcludeDataRows, onChange: onExcludeDataRowsChanged, mr: 2 }))),
                    React.createElement(FormRow, { label: "Exclude Group Rows:" },
                        React.createElement(Flex, { alignItems: "center", marginLeft: 2 },
                            React.createElement(CheckBox, { "data-name": "exclude-grouped-rows-checkbox", checked: data.RowScope?.ExcludeGroupRows, onChange: onExcludeGroupedRowsChanged, mr: 2 }))),
                    React.createElement(FormRow, { label: "Exclude Row Summaries:" },
                        React.createElement(Flex, { alignItems: "center", marginLeft: 2 },
                            React.createElement(CheckBox, { "data-name": "exclude-summary-rows-checkbox", checked: data.RowScope?.ExcludeSummaryRows, onChange: onExcludeSummaryRowsChanged, mr: 2 }))))))));
};
