"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.renderFlashingAlertStyleSummary = exports.FlashingCellStyle = exports.FlashingAlertStyleWizardSection = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const rebass_1 = require("rebass");
const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
const Tabs_1 = require("../../../components/Tabs");
const StyleComponent_1 = require("../../Components/StyleComponent");
const StylePreview_1 = require("../../../components/StylePreview");
const changeStyle = (React.createElement(rebass_1.Text, { fontSize: 2, style: { display: 'inline-block' } }, "Change style"));
const FlashingAlertStyleWizardSection = (props) => {
    let { data: flashingAlert, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
    flashingAlert = flashingAlert ?? props.flashingAlert;
    return (React.createElement(React.Fragment, null,
        React.createElement(Tabs_1.Tabs, { defaultValue: "up" },
            React.createElement(Tabs_1.Tabs.Tab, { value: "up" },
                "Up ",
                changeStyle),
            React.createElement(Tabs_1.Tabs.Content, { value: "up" },
                React.createElement(StyleComponent_1.StyleComponent, { headless: true, api: api, Style: flashingAlert.UpChangeStyle ?? {}, UpdateStyle: (style) => props.onStyleChange('UpChangeStyle', style) })),
            React.createElement(Tabs_1.Tabs.Tab, { value: "down" },
                "Down ",
                changeStyle),
            React.createElement(Tabs_1.Tabs.Content, { value: "down" },
                React.createElement(StyleComponent_1.StyleComponent, { headless: true, api: api, Style: flashingAlert.DownChangeStyle ?? {}, UpdateStyle: (style) => props.onStyleChange('DownChangeStyle', style) })),
            React.createElement(Tabs_1.Tabs.Tab, { value: "neutral" },
                "Neutral ",
                changeStyle),
            React.createElement(Tabs_1.Tabs.Content, { value: "neutral" },
                React.createElement(StyleComponent_1.StyleComponent, { headless: true, api: api, Style: flashingAlert.NeutralChangeStyle ?? {}, UpdateStyle: (style) => props.onStyleChange('NeutralChangeStyle', style) })))));
};
exports.FlashingAlertStyleWizardSection = FlashingAlertStyleWizardSection;
const FlashingCellStyle = (props) => {
    const { data, ...boxProps } = props;
    return (React.createElement(rebass_1.Box, { ...boxProps },
        React.createElement(StylePreview_1.StylePreview, { styleObject: props.data.UpChangeStyle },
            "Up change style ",
            !props.data.UpChangeStyle ? ' - no style' : ''),
        React.createElement(StylePreview_1.StylePreview, { mt: 2, styleObject: props.data.DownChangeStyle },
            "Down change style ",
            !props.data.DownChangeStyle ? ' - no style' : ''),
        React.createElement(StylePreview_1.StylePreview, { mt: 2, styleObject: props.data.NeutralChangeStyle },
            "Neutral change style ",
            !props.data.NeutralChangeStyle ? ' - no style' : '')));
};
exports.FlashingCellStyle = FlashingCellStyle;
const renderFlashingAlertStyleSummary = (flashingAlert) => {
    return React.createElement(exports.FlashingCellStyle, { data: flashingAlert });
};
exports.renderFlashingAlertStyleSummary = renderFlashingAlertStyleSummary;
