import * as React from 'react';
import FormLayout, { FormRow } from '../../../components/FormLayout';
import { CheckBox } from '../../../components/CheckBox';
import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
import { Tag } from '../../../components/Tag';
import Radio, { RadioGroup } from '../../../components/Radio';
import { Box, Flex } from '../../../components/Flex';
import { Tabs } from '../../../components/Tabs';
import Input from '../../../components/Input';
export const renderFormatColumnSettingsSummary = (data) => {
    return (React.createElement(Box, { className: "twa:p-2" },
        React.createElement(Box, { className: "twa:mt-3" },
            "Name ",
            React.createElement(Tag, null, data.Name)),
        React.createElement(Box, { className: "twa:mt-3" },
            "Data Rows ",
            React.createElement(Tag, null, data.RowScope?.ExcludeDataRows ? 'no' : 'yes')),
        ' ',
        React.createElement(Box, { className: "twa:mt-3" },
            "Group Rows ",
            React.createElement(Tag, null, data.RowScope?.ExcludeGroupRows ? 'no' : 'yes')),
        React.createElement(Box, { className: "twa:mt-3" },
            "Summary Rows ",
            React.createElement(Tag, null, data.RowScope?.ExcludeSummaryRows ? 'no' : 'yes')),
        React.createElement(Box, { className: "twa:mt-3" },
            "Total Rows ",
            React.createElement(Tag, null, data.RowScope?.ExcludeTotalRows ? 'no' : 'yes')),
        React.createElement(Box, { className: "twa:mt-3" },
            "Apply on Column Groups:",
            ' ',
            React.createElement(Tag, null, !data.ColumnGroupScope || data.ColumnGroupScope === 'Both'
                ? 'Always'
                : data.ColumnGroupScope))));
};
export const FormatColumnSettingsWizardSection = (props) => {
    const { data } = useOnePageAdaptableWizardContext();
    const onNameChange = (event) => {
        props.onChange({
            ...data,
            Name: event.target.value,
        });
    };
    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,
            },
        });
    };
    const onExcludeTotalRowsChanged = (ExcludeTotalRows) => {
        props.onChange({
            ...data,
            RowScope: {
                ...data.RowScope,
                ExcludeTotalRows,
            },
        });
    };
    return (React.createElement(Flex, { flexDirection: "column", style: { height: '100%' } },
        React.createElement(Tabs, { className: "twa:mb-3" },
            React.createElement(Tabs.Tab, null, "Settings"),
            React.createElement(Tabs.Content, null,
                React.createElement(Flex, { flexDirection: "row" },
                    React.createElement(FormLayout, { className: "twa:max-w-[300px] twa:w-full" },
                        React.createElement(FormRow, { label: "Name" },
                            React.createElement(Input, { className: "twa:w-full", "data-name": "format-column-name", onChange: onNameChange, value: data?.Name ?? '' })))))),
        React.createElement(Tabs, null,
            React.createElement(Tabs.Tab, null, "Configuration"),
            React.createElement(Tabs.Content, null,
                React.createElement(Flex, { flexDirection: "row" },
                    React.createElement(FormLayout, null,
                        data.Target === 'cell' && (React.createElement(React.Fragment, 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", checked: data.RowScope?.ExcludeDataRows, onChange: onExcludeDataRowsChanged, className: "twa:mr-2" }))),
                            React.createElement(FormRow, { label: "Exclude Group Rows:" },
                                React.createElement(Flex, { alignItems: "center", className: "twa:ml-2" },
                                    React.createElement(CheckBox, { "data-name": "exclude-grouped-rows-checkbox", checked: data.RowScope?.ExcludeGroupRows, onChange: onExcludeGroupedRowsChanged, className: "twa:mr-2" }))),
                            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", checked: data.RowScope?.ExcludeSummaryRows, onChange: onExcludeSummaryRowsChanged, className: "twa:mr-2" }))),
                            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", checked: data.RowScope?.ExcludeTotalRows, onChange: onExcludeTotalRowsChanged, className: "twa:mr-2" }))))),
                        React.createElement(FormRow, { label: "Apply on Column Group:" },
                            React.createElement(RadioGroup, { value: data.ColumnGroupScope || 'Both', name: "columnGroupScope", orientation: "horizontal", onRadioChange: (columnGroupScope) => {
                                    props.onChange({
                                        ...data,
                                        ColumnGroupScope: columnGroupScope,
                                    });
                                } },
                                React.createElement(Radio, { className: "twa:ml-1", value: "Both" }, "Always"),
                                React.createElement(Radio, { className: "twa:ml-4", value: "Expanded" }, "When Expanded"),
                                React.createElement(Radio, { className: "twa:ml-4", value: "Collapsed" }, "When Collapsed")))))))));
};
