import * as React from 'react';
import { DEFAULT_INTEGER_DISPLAY_VALUE, DEFAULT_STRING_DISPLAY_VALUE, } from '../../../../../Utilities/Constants/GeneralConstants';
import { useAdaptable } from '../../../../AdaptableContext';
import { Badge } from '../../../../Components/Badge';
import { Flex, Box } from '../../../../../components/Flex';
export const StyledColumnBadgePreview = ({ data }) => {
    const adaptable = useAdaptable();
    const badgeStyle = data.BadgeStyle;
    if (!badgeStyle || badgeStyle.Badges.length === 0) {
        return React.createElement("div", null, "No Badges Defined");
    }
    return (React.createElement(Flex, { flexDirection: "column" }, badgeStyle.Badges.map((badge, index) => {
        const badgeValue = badge.IconOnly
            ? ''
            : adaptable.api.columnApi.getColumnDataTypeForColumnId(data.ColumnId) === 'number'
                ? DEFAULT_INTEGER_DISPLAY_VALUE
                : DEFAULT_STRING_DISPLAY_VALUE;
        return (React.createElement(Box, { className: "twa:mb-1", key: index },
            React.createElement(Badge, { icon: badge.Icon, adaptableStyle: badge.Style, iconPosition: badge.IconPosition }, badgeValue)));
    })));
};
