"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.StyledColumnBadgeSection = exports.renderBadgeSummary = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const rebass_1 = require("rebass");
const DropdownButton_1 = tslib_1.__importDefault(require("../../../components/DropdownButton"));
const ErrorBox_1 = tslib_1.__importDefault(require("../../../components/ErrorBox"));
const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
const Tabs_1 = require("../../../components/Tabs");
const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/ObjectFactory"));
const AdaptableIconSelector_1 = require("../../Components/AdaptableIconSelector");
const PredicateEditor_1 = require("../../Components/PredicateEditor/PredicateEditor");
const StyleComponent_1 = require("../../Components/StyleComponent");
const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
const StyledColumnBadgePreview_1 = require("./StyledColumnWizardStyleSection/Components/StyledColumnBadgePreview");
const Badge_1 = require("../../Components/Badge");
const AdaptableIconComponent_1 = require("../../Components/AdaptableIconComponent");
const GeneralConstants_1 = require("../../../Utilities/Constants/GeneralConstants");
const Accordion_1 = require("../../../components/Accordion");
const CheckBox_1 = require("../../../components/CheckBox");
const BadgeEditor = (props) => {
    const { api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
    const { badge, columnId, onChange } = props;
    // badges evaluate predicate per value
    const predicateDefs = api.styledColumnApi.internalApi.getBadgePredicateDefsForColumn(columnId);
    const dataType = api.columnApi.getColumnDataTypeForColumnId(columnId);
    const previewValue = dataType === 'number' || dataType == 'numberArray'
        ? GeneralConstants_1.DEFAULT_INTEGER_DISPLAY_VALUE
        : GeneralConstants_1.DEFAULT_STRING_DISPLAY_VALUE;
    return (React.createElement(rebass_1.Flex, { className: "ab-Badge-Definition-Editor", mb: 15, p: 3 },
        React.createElement(rebass_1.Box, { flex: 1 },
            React.createElement(FormLayout_1.default, null,
                React.createElement(FormLayout_1.FormRow, { label: "Preview" },
                    React.createElement(Badge_1.Badge, { adaptableStyle: badge.Style, icon: badge.Icon, iconPosition: badge.IconPosition }, previewValue)),
                React.createElement(FormLayout_1.FormRow, { label: "Style" },
                    React.createElement(HelpBlock_1.default, { fontSize: 2, mb: 1, mt: 2 }, "Select the Style for the Badge"),
                    ' ',
                    React.createElement(Accordion_1.Accordion, { title: "Edit Badge Style" },
                        React.createElement(StyleComponent_1.StyleComponent, { showFontSizeAs: "radio", headless: true, hidePreview: true, api: api, Style: badge.Style ?? {}, UpdateStyle: (Style) => {
                                onChange({
                                    ...badge,
                                    Style,
                                });
                            } }))),
                React.createElement(FormLayout_1.FormRow, { label: 'Predicate' }, columnId ? (React.createElement(React.Fragment, null,
                    React.createElement(HelpBlock_1.default, { fontSize: 2, mb: 1, mt: 2 }, "Create (optional) Rule for when the Badge is displayed; if no Rule provided Badge will always display (unless overriden by another Rule)"),
                    React.createElement(PredicateEditor_1.PredicateEditor, { columnId: columnId, predicate: badge.Predicate, predicateDefs: predicateDefs, placeholder: "No Predicate Selected", onChange: (predicate) => {
                            onChange({
                                ...badge,
                                Predicate: predicate,
                            });
                        }, onClear: () => onChange({
                            ...badge,
                            Predicate: undefined,
                        }) }))) : (React.createElement(ErrorBox_1.default, null, "Select a column first"))),
                React.createElement(FormLayout_1.FormRow, { label: "Icon" },
                    React.createElement(HelpBlock_1.default, { fontSize: 2, mb: 1, mt: 2 }, "Select (optional) Icon (and Icon position) to display in the Badge"),
                    ' ',
                    // for now, only show for system icons the
                    !badge.Icon || 'name' in badge.Icon ? (React.createElement(AdaptableIconSelector_1.AdaptableIconSelector, { value: badge?.Icon && 'name' in badge?.Icon ? badge.Icon.name : undefined, onChange: (iconName) => {
                            if (iconName) {
                                onChange({
                                    ...badge,
                                    Icon: {
                                        name: iconName,
                                    },
                                });
                            }
                            else {
                                onChange({
                                    ...badge,
                                    Icon: undefined,
                                });
                            }
                        } })) : (React.createElement(AdaptableIconComponent_1.AdaptableIconComponent, { icon: badge.Icon }))),
                badge.Icon && (React.createElement(FormLayout_1.FormRow, { label: "Icon Position" },
                    React.createElement(DropdownButton_1.default, { columns: ['label'], items: [
                            {
                                label: 'Start',
                                onClick: () => onChange({ ...badge, IconPosition: 'Start' }),
                            },
                            {
                                label: 'End',
                                onClick: () => onChange({ ...badge, IconPosition: 'End' }),
                            },
                        ] }, badge.IconPosition ?? 'Start'))),
                badge.Icon && (React.createElement(FormLayout_1.FormRow, { label: "Show Icon Only" },
                    React.createElement(CheckBox_1.CheckBox, { checked: badge.IconOnly, 
                        // onClick=()=> onChange({ ...badge, IconPosition: 'End' })
                        onClick: () => onChange({ ...badge, IconOnly: !badge.IconOnly }) }))))),
        React.createElement(rebass_1.Box, { justifyContent: "end" },
            React.createElement(SimpleButton_1.default, { icon: "delete", onClick: props.onDelete }))));
};
const renderBadgeSummary = (styledColumn) => {
    return React.createElement(StyledColumnBadgePreview_1.StyledColumnBadgePreview, { data: styledColumn });
};
exports.renderBadgeSummary = renderBadgeSummary;
const StyledColumnBadgeSection = (props) => {
    const { data } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
    const badges = data?.BadgeStyle?.Badges ?? [];
    return (React.createElement(Tabs_1.Tabs, { style: { height: '100%' } },
        React.createElement(Tabs_1.Tabs.Tab, null, "Badges"),
        React.createElement(Tabs_1.Tabs.Content, null,
            React.createElement(rebass_1.Flex, { justifyContent: "end" },
                React.createElement(SimpleButton_1.default, { icon: "plus", onClick: () => {
                        props.onChange({
                            ...data,
                            BadgeStyle: {
                                Badges: [...badges, ObjectFactory_1.default.CreateDefaultStyledColumnBadge()],
                            },
                        });
                    } }, "Add Badge")),
            React.createElement(rebass_1.Flex, { flexDirection: "column", p: 2 }, badges.map((badge, index) => {
                const handleEditBadge = (badge) => {
                    const newBadges = [...badges];
                    newBadges[index] = badge;
                    props.onChange({
                        ...data,
                        BadgeStyle: {
                            ...data.BadgeStyle,
                            Badges: newBadges,
                        },
                    });
                };
                return (React.createElement(BadgeEditor, { key: index, badge: badge, columnId: data.ColumnId, onChange: handleEditBadge, onDelete: () => {
                        const newBadges = [...badges];
                        newBadges.splice(index, 1);
                        props.onChange({
                            ...data,
                            BadgeStyle: {
                                ...data.BadgeStyle,
                                Badges: newBadges,
                            },
                        });
                    } }));
            })))));
};
exports.StyledColumnBadgeSection = StyledColumnBadgeSection;
