import * as React from 'react';
import { Box, Text } from 'rebass';
import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
import { Tabs } from '../../../components/Tabs';
import { StyleComponent } from '../../Components/StyleComponent';
import { StylePreview } from '../../../components/StylePreview';
const changeStyle = (React.createElement(Text, { fontSize: 2, style: { display: 'inline-block' } }, "Change style"));
export const FlashingAlertStyleWizardSection = (props) => {
    let { data: flashingAlert, api } = useOnePageAdaptableWizardContext();
    flashingAlert = flashingAlert ?? props.flashingAlert;
    return (React.createElement(React.Fragment, null,
        React.createElement(Tabs, { defaultValue: "up" },
            React.createElement(Tabs.Tab, { value: "up" },
                "Up ",
                changeStyle),
            React.createElement(Tabs.Content, { value: "up" },
                React.createElement(StyleComponent, { headless: true, api: api, Style: flashingAlert.UpChangeStyle ?? {}, UpdateStyle: (style) => props.onStyleChange('UpChangeStyle', style) })),
            React.createElement(Tabs.Tab, { value: "down" },
                "Down ",
                changeStyle),
            React.createElement(Tabs.Content, { value: "down" },
                React.createElement(StyleComponent, { headless: true, api: api, Style: flashingAlert.DownChangeStyle ?? {}, UpdateStyle: (style) => props.onStyleChange('DownChangeStyle', style) })),
            React.createElement(Tabs.Tab, { value: "neutral" },
                "Neutral ",
                changeStyle),
            React.createElement(Tabs.Content, { value: "neutral" },
                React.createElement(StyleComponent, { headless: true, api: api, Style: flashingAlert.NeutralChangeStyle ?? {}, UpdateStyle: (style) => props.onStyleChange('NeutralChangeStyle', style) })))));
};
export const FlashingCellStyle = (props) => {
    const { data, ...boxProps } = props;
    return (React.createElement(Box, { ...boxProps },
        React.createElement(StylePreview, { styleObject: props.data.UpChangeStyle },
            "Up change style ",
            !props.data.UpChangeStyle ? ' - no style' : ''),
        React.createElement(StylePreview, { mt: 2, styleObject: props.data.DownChangeStyle },
            "Down change style ",
            !props.data.DownChangeStyle ? ' - no style' : ''),
        React.createElement(StylePreview, { mt: 2, styleObject: props.data.NeutralChangeStyle },
            "Neutral change style ",
            !props.data.NeutralChangeStyle ? ' - no style' : '')));
};
export const renderFlashingAlertStyleSummary = (flashingAlert) => {
    return React.createElement(FlashingCellStyle, { data: flashingAlert });
};
