import * as React from 'react';
import { CheckBox } from '../../../components/CheckBox';
import FormLayout, { FormRow } from '../../../components/FormLayout';
import { Tabs } from '../../../components/Tabs';
import { Tag } from '../../../components/Tag';
import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
import { Flex, Box } from '../../../components/Flex';
export const renderStyledColumnWizardSettingsSummary = (data) => {
    const badgeStyle = data;
    return (React.createElement(Box, { className: "twa:p-2" },
        React.createElement(Box, { className: "twa:mt-3" },
            "Data Rows ",
            React.createElement(Tag, null, badgeStyle.RowScope?.ExcludeDataRows ? 'no' : 'yes')),
        ' ',
        React.createElement(Box, { className: "twa:mt-3" },
            "Group Rows ",
            React.createElement(Tag, null, badgeStyle.RowScope?.ExcludeGroupRows ? 'no' : 'yes')),
        React.createElement(Box, { className: "twa:mt-3" },
            "Summary Rows ",
            React.createElement(Tag, null, badgeStyle.RowScope?.ExcludeSummaryRows ? 'no' : 'yes')),
        React.createElement(Box, { className: "twa:mt-3" },
            "Total Rows ",
            React.createElement(Tag, null, badgeStyle.RowScope?.ExcludeTotalRows ? 'no' : 'yes'))));
};
export const StyledColumnWizardSettingsSection = (props) => {
    const { data } = useOnePageAdaptableWizardContext();
    const onExcludeDataRowsChanged = (ExcludeDataRows) => {
        props.onChange({
            ...data,
            BadgeStyle: {
                ...data.BadgeStyle,
                RowScope: {
                    ...data.BadgeStyle.RowScope,
                    ExcludeDataRows,
                },
            },
        });
    };
    const onExcludeGroupedRowsChanged = (ExcludeGroupedRows) => {
        props.onChange({
            ...data,
            BadgeStyle: {
                ...data.BadgeStyle,
                RowScope: {
                    ...data.BadgeStyle.RowScope,
                    ExcludeGroupRows: ExcludeGroupedRows,
                },
            },
        });
    };
    const onExcludeSummaryRowsChanged = (ExcludeSummaryRows) => {
        props.onChange({
            ...data,
            BadgeStyle: {
                ...data.BadgeStyle,
                RowScope: {
                    ...data.BadgeStyle.RowScope,
                    ExcludeSummaryRows,
                },
            },
        });
    };
    const onExcludeTotalRowsChanged = (ExcludeTotalRows) => {
        props.onChange({
            ...data,
            BadgeStyle: {
                ...data.BadgeStyle,
                RowScope: {
                    ...data.BadgeStyle.RowScope,
                    ExcludeTotalRows,
                },
            },
        });
    };
    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: "Exclude Data Rows:" },
                        React.createElement(Flex, { alignItems: "center", className: "twa:ml-2" },
                            React.createElement(CheckBox, { "data-name": "exclude-data-rows-checkbox", className: "twa:mr-2", checked: 
                                // @ts-ignore
                                data.BadgeStyle.RowScope?.ExcludeDataRows, onChange: onExcludeDataRowsChanged }))),
                    React.createElement(FormRow, { label: "Exclude Group Rows:" },
                        React.createElement(Flex, { alignItems: "center", className: "twa:ml-2" },
                            React.createElement(CheckBox, { className: "twa:mr-2", "data-name": "exclude-grouped-rows-checkbox", checked: 
                                // @ts-ignore
                                data.BadgeStyle.RowScope?.ExcludeGroupRows, onChange: onExcludeGroupedRowsChanged }))),
                    React.createElement(FormRow, { label: "Exclude Row Summaries:" },
                        React.createElement(Flex, { alignItems: "center", className: "twa:ml-2" },
                            React.createElement(CheckBox, { "data-name": "exclude-summary-rows-checkbox", className: "twa:mr-2", checked: 
                                // @ts-ignore
                                data.BadgeStyle.RowScope?.ExcludeSummaryRows, onChange: onExcludeSummaryRowsChanged }))),
                    ' ',
                    React.createElement(FormRow, { label: "Exclude Total Rows:" },
                        React.createElement(Flex, { alignItems: "center", className: "twa:ml-2" },
                            React.createElement(CheckBox, { "data-name": "exclude-total-rows-checkbox", className: "twa:mr-2", checked: 
                                // @ts-ignore
                                data.BadgeStyle.RowScope?.ExcludeTotalRows, onChange: onExcludeTotalRowsChanged }))))))));
};
