"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.StyledColumnWizardTypeSection = exports.renderStyledColumnTypeSummary = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const rebass_1 = require("rebass");
const Tabs_1 = require("../../../components/Tabs");
const Tag_1 = require("../../../components/Tag");
const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/ObjectFactory"));
const AdaptableContext_1 = require("../../AdaptableContext");
const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
const TypeRadio_1 = require("../../Wizard/TypeRadio");
const renderStyledColumnTypeSummary = (data) => {
    let type = null;
    if (data.GradientStyle) {
        type = 'Gradient Column';
    }
    else if (data.PercentBarStyle) {
        type = 'Percent Bar';
    }
    else if (data.SparklineStyle) {
        type = 'Spark Line';
    }
    else if (data.BadgeStyle) {
        type = 'Badge';
    }
    return (React.createElement(rebass_1.Text, { pr: 2, py: 2 },
        "Type ",
        React.createElement(Tag_1.Tag, null, type)));
};
exports.renderStyledColumnTypeSummary = renderStyledColumnTypeSummary;
const StyledColumnWizardTypeSection = (props) => {
    const { data } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
    const adaptable = (0, AdaptableContext_1.useAdaptable)();
    const handleTypeChange = (type) => {
        const newStyledColumn = {
            ...data,
        };
        delete newStyledColumn.GradientStyle;
        delete newStyledColumn.PercentBarStyle;
        delete newStyledColumn.SparklineStyle;
        delete newStyledColumn.BadgeStyle;
        switch (type) {
            case 'gradient':
                newStyledColumn.GradientStyle = {};
                break;
            case 'percent':
                newStyledColumn.PercentBarStyle = {};
                break;
            case 'sparkline':
                newStyledColumn.SparklineStyle = {
                    options: {
                        type: 'line',
                    },
                };
                break;
            case 'badge':
                newStyledColumn.BadgeStyle = {
                    Badges: [ObjectFactory_1.default.CreateDefaultStyledColumnBadge()],
                };
                break;
        }
        newStyledColumn.ColumnId = null;
        props.onChange(newStyledColumn);
    };
    return (React.createElement(rebass_1.Flex, { height: "100%", flexDirection: "column", "data-name": "styled-column-type" },
        React.createElement(Tabs_1.Tabs, { autoFocus: false, padding: 2 },
            React.createElement(Tabs_1.Tabs.Tab, null, "Type"),
            React.createElement(Tabs_1.Tabs.Content, null,
                React.createElement(TypeRadio_1.TypeRadio, { text: "Gradient", description: "Colour each cell in the column using a Gradient value (Numeric Columns)", checked: Boolean(data.GradientStyle), onClick: () => handleTypeChange('gradient') }),
                React.createElement(TypeRadio_1.TypeRadio, { text: "Percent Bar", description: "Display a coloured Bar where the width is based on the cell (Numeric Columns)", checked: Boolean(data.PercentBarStyle), onClick: () => handleTypeChange('percent') }),
                adaptable.api.styledColumnApi.canDisplaySparklines() && (React.createElement(TypeRadio_1.TypeRadio, { text: "Sparkline", description: "Render the column as a Sparkline (Numeric Array Columns)", checked: Boolean(data.SparklineStyle), onClick: () => handleTypeChange('sparkline') })),
                React.createElement(TypeRadio_1.TypeRadio, { text: "Badge", description: "Display the column's values as Badges (All Columns)", checked: Boolean(data.BadgeStyle), onClick: () => handleTypeChange('badge') })))));
};
exports.StyledColumnWizardTypeSection = StyledColumnWizardTypeSection;
