import * as React from 'react';
import { Box, Flex } from 'rebass';
import DropdownButton from '../../../components/DropdownButton';
import ErrorBox from '../../../components/ErrorBox';
import FormLayout, { FormRow } from '../../../components/FormLayout';
import HelpBlock from '../../../components/HelpBlock';
import SimpleButton from '../../../components/SimpleButton';
import { Tabs } from '../../../components/Tabs';
import ObjectFactory from '../../../Utilities/ObjectFactory';
import { AdaptableIconSelector } from '../../Components/AdaptableIconSelector';
import { PredicateEditor } from '../../Components/PredicateEditor/PredicateEditor';
import { StyleComponent } from '../../Components/StyleComponent';
import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
import { StyledColumnBadgePreview } from './StyledColumnWizardStyleSection/Components/StyledColumnBadgePreview';
import { Badge } from '../../Components/Badge';
import { AdaptableIconComponent } from '../../Components/AdaptableIconComponent';
import { DEFAULT_INTEGER_DISPLAY_VALUE, DEFAULT_STRING_DISPLAY_VALUE, } from '../../../Utilities/Constants/GeneralConstants';
import { Accordion } from '../../../components/Accordion';
import { CheckBox } from '../../../components/CheckBox';
const BadgeEditor = (props) => {
    const { api } = 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'
        ? DEFAULT_INTEGER_DISPLAY_VALUE
        : DEFAULT_STRING_DISPLAY_VALUE;
    return (React.createElement(Flex, { className: "ab-Badge-Definition-Editor", mb: 15, p: 3 },
        React.createElement(Box, { flex: 1 },
            React.createElement(FormLayout, null,
                React.createElement(FormRow, { label: "Preview" },
                    React.createElement(Badge, { adaptableStyle: badge.Style, icon: badge.Icon, iconPosition: badge.IconPosition }, previewValue)),
                React.createElement(FormRow, { label: "Style" },
                    React.createElement(HelpBlock, { fontSize: 2, mb: 1, mt: 2 }, "Select the Style for the Badge"),
                    ' ',
                    React.createElement(Accordion, { title: "Edit Badge Style" },
                        React.createElement(StyleComponent, { showFontSizeAs: "radio", headless: true, hidePreview: true, api: api, Style: badge.Style ?? {}, UpdateStyle: (Style) => {
                                onChange({
                                    ...badge,
                                    Style,
                                });
                            } }))),
                React.createElement(FormRow, { label: 'Predicate' }, columnId ? (React.createElement(React.Fragment, null,
                    React.createElement(HelpBlock, { 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, { 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, null, "Select a column first"))),
                React.createElement(FormRow, { label: "Icon" },
                    React.createElement(HelpBlock, { 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, { 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, { icon: badge.Icon }))),
                badge.Icon && (React.createElement(FormRow, { label: "Icon Position" },
                    React.createElement(DropdownButton, { columns: ['label'], items: [
                            {
                                label: 'Start',
                                onClick: () => onChange({ ...badge, IconPosition: 'Start' }),
                            },
                            {
                                label: 'End',
                                onClick: () => onChange({ ...badge, IconPosition: 'End' }),
                            },
                        ] }, badge.IconPosition ?? 'Start'))),
                badge.Icon && (React.createElement(FormRow, { label: "Show Icon Only" },
                    React.createElement(CheckBox, { checked: badge.IconOnly, 
                        // onClick=()=> onChange({ ...badge, IconPosition: 'End' })
                        onClick: () => onChange({ ...badge, IconOnly: !badge.IconOnly }) }))))),
        React.createElement(Box, { justifyContent: "end" },
            React.createElement(SimpleButton, { icon: "delete", onClick: props.onDelete }))));
};
export const renderBadgeSummary = (styledColumn) => {
    return React.createElement(StyledColumnBadgePreview, { data: styledColumn });
};
export const StyledColumnBadgeSection = (props) => {
    const { data } = useOnePageAdaptableWizardContext();
    const badges = data?.BadgeStyle?.Badges ?? [];
    return (React.createElement(Tabs, { style: { height: '100%' } },
        React.createElement(Tabs.Tab, null, "Badges"),
        React.createElement(Tabs.Content, null,
            React.createElement(Flex, { justifyContent: "end" },
                React.createElement(SimpleButton, { icon: "plus", onClick: () => {
                        props.onChange({
                            ...data,
                            BadgeStyle: {
                                Badges: [...badges, ObjectFactory.CreateDefaultStyledColumnBadge()],
                            },
                        });
                    } }, "Add Badge")),
            React.createElement(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,
                            },
                        });
                    } }));
            })))));
};
