"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SettingsSection = exports.SettingsSectionSummary = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const rebass_1 = require("rebass");
const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
const Input_1 = tslib_1.__importDefault(require("../../../../components/Input"));
const Radio_1 = tslib_1.__importDefault(require("../../../../components/Radio"));
const Tabs_1 = require("../../../../components/Tabs");
const Tag_1 = require("../../../../components/Tag");
const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
const SettingsSectionSummary = () => {
    const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
    return (React.createElement(rebass_1.Box, null,
        React.createElement(Tag_1.Tag, { mr: 2 },
            "Layout Name: ",
            layout.Name),
        React.createElement(Tag_1.Tag, { mr: 2 },
            "Layout Grid Type: ",
            layout.EnablePivot ? 'Pivot' : 'Table'),
        React.createElement(Tag_1.Tag, { mr: 2 },
            "Suppress Aggregation Function in Header: ",
            layout.SuppressAggFuncInHeader ? 'Yes' : 'No')));
};
exports.SettingsSectionSummary = SettingsSectionSummary;
const SettingsSection = (props) => {
    var _a;
    const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
    const onNameChange = (event) => {
        props.onChange(Object.assign(Object.assign({}, layout), { Name: event.target.value }));
    };
    const handlePivotChange = (checked) => {
        props.onChange(Object.assign(Object.assign({}, layout), { EnablePivot: checked }));
    };
    return (React.createElement(React.Fragment, null,
        React.createElement(Tabs_1.Tabs, { mb: 3 },
            React.createElement(Tabs_1.Tabs.Tab, null, "Settings"),
            React.createElement(Tabs_1.Tabs.Content, null,
                React.createElement(rebass_1.Flex, { flexDirection: "row" },
                    React.createElement(FormLayout_1.default, { width: "100%", style: { maxWidth: 300 } },
                        React.createElement(FormLayout_1.FormRow, { label: "Name" },
                            React.createElement(Input_1.default, { width: "100%", "data-name": "layout-name", onChange: onNameChange, value: (_a = layout === null || layout === void 0 ? void 0 : layout.Name) !== null && _a !== void 0 ? _a : '' })))))),
        React.createElement(Tabs_1.Tabs, { mb: 2 },
            React.createElement(Tabs_1.Tabs.Tab, null, "Grid Type"),
            React.createElement(Tabs_1.Tabs.Content, null,
                React.createElement(rebass_1.Flex, { flexDirection: "column" },
                    React.createElement(Radio_1.default, { "data-name": "layout-type-table", onClick: () => handlePivotChange(false), checked: !Boolean(layout.EnablePivot) }, "Table"),
                    React.createElement(Radio_1.default, { "data-name": "layout-type-pivot", onClick: () => handlePivotChange(true), checked: Boolean(layout.EnablePivot) }, "Pivot"))))));
};
exports.SettingsSection = SettingsSection;
