"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.BasicBadge = void 0;
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importStar(require("react"));
const react_native_1 = require("react-native");
const react_native_2 = require("@fluentui/react-native");
const badge_1 = require("@fluentui-react-native/badge");
const framework_1 = require("@fluentui-react-native/framework");
const text_1 = require("@fluentui-react-native/text");
const iconExamples_1 = require("../Common/iconExamples");
const StyledPicker_1 = require("../Common/StyledPicker");
const styles_1 = require("../PersonaCoin/styles");
const badgeColors = [...badge_1.BadgeColors];
const badgeShapes = [...badge_1.BadgeShapes];
const badgeSizes = [...badge_1.BadgeSizes];
const badgeAppearances = [...badge_1.BadgeAppearances];
const badgeIconPositions = ['before', 'after'];
const useCustomizedBadge = (tokensAndprops) => {
    return (0, react_1.useMemo)(() => badge_1.Badge.customize({ ...tokensAndprops }), [tokensAndprops]);
};
const BasicBadge = () => {
    const [badgeAppearance, setBadgeAppearance] = (0, react_1.useState)('filled');
    const [badgeColor, setBadgeColor] = (0, react_1.useState)('brand');
    const [shape, setShape] = (0, react_1.useState)('circular');
    const [size, setSize] = (0, react_1.useState)('medium');
    const [showIcon, setShowIcon] = (0, react_1.useState)(false);
    const [iconPosition, setIconPosition] = (0, react_1.useState)('before');
    const [showShadow, setShowShadow] = (0, react_1.useState)(false);
    const onBadgeAppearanceChange = (0, react_1.useCallback)((value) => setBadgeAppearance(value), []);
    const onBadgeColorChange = (0, react_1.useCallback)((value) => setBadgeColor(value), []);
    const onShapeChange = (0, react_1.useCallback)((value) => setShape(value), []);
    const onSizeChange = (0, react_1.useCallback)((value) => setSize(value), []);
    const onIconPositionChange = (0, react_1.useCallback)((value) => setIconPosition(value), []);
    const onShowShadowChange = (0, react_1.useCallback)(() => setShowShadow(!showShadow), [showShadow, setShowShadow]);
    const onShowIconChange = (0, react_1.useCallback)(() => setShowIcon(!showIcon), [showIcon, setShowIcon]);
    const theme = (0, framework_1.useFluentTheme)();
    const fontBuiltInProps = {
        fontFamily: 'Arial',
        codepoint: 0x2663,
        fontSize: 16,
    };
    const svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(react_native_1.Platform.OS);
    const shadow = showShadow ? theme.shadows.shadow4 : undefined;
    const showShadowWarning = showShadow && (badgeAppearance == 'ghost' || badgeAppearance == 'outline');
    const CustomBadge = useCustomizedBadge({ shadowToken: shadow });
    const badgeConfig = {
        appearance: badgeAppearance,
        badgeColor,
        size,
        shape,
    };
    const StyledBadge = useCustomizedBadge({
        fontWeight: 'bold',
        fontSize: 12,
        fontFamily: 'Georgia',
        backgroundColor: '#f09',
        borderColor: 'purple',
        color: 'yellow',
        borderWidth: 4,
        borderStyle: 'dashed',
        borderRadius: 2,
        iconColor: 'cyan',
        shadowToken: theme.shadows.shadow16,
    });
    return (react_1.default.createElement(react_native_1.View, null,
        react_1.default.createElement(StyledPicker_1.StyledPicker, { prompt: "Badge appearance", selected: badgeAppearance, onChange: onBadgeAppearanceChange, collection: badgeAppearances }),
        react_1.default.createElement(StyledPicker_1.StyledPicker, { prompt: "Badge color", selected: badgeColor, onChange: onBadgeColorChange, collection: badgeColors }),
        react_1.default.createElement(StyledPicker_1.StyledPicker, { prompt: "Shape", selected: shape, onChange: onShapeChange, collection: badgeShapes }),
        react_1.default.createElement(StyledPicker_1.StyledPicker, { prompt: "Size", selected: size, onChange: onSizeChange, collection: badgeSizes }),
        svgIconsEnabled && (react_1.default.createElement(react_1.default.Fragment, null,
            react_1.default.createElement(react_native_2.ToggleButton, { onClick: onShowIconChange, checked: showIcon },
                "Set ",
                showIcon ? ' Hide icon' : ' Show icon'),
            react_1.default.createElement(StyledPicker_1.StyledPicker, { prompt: "Icon position", selected: iconPosition, onChange: onIconPositionChange, collection: badgeIconPositions }))),
        react_1.default.createElement(react_native_2.ToggleButton, { onClick: onShowShadowChange, checked: showShadow },
            "Set ",
            showShadow ? ' Hide shadow' : ' Show shadow'),
        react_1.default.createElement(react_native_1.View, { style: { position: 'relative', backgroundColor: 'yellow', padding: 20, width: 200 } },
            react_1.default.createElement(text_1.Text, null, "Parent component for the Badge"),
            svgIconsEnabled && showIcon ? (react_1.default.createElement(CustomBadge, { ...badgeConfig, icon: { svgSource: iconExamples_1.svgProps }, iconPosition: iconPosition }, "Basic badge")) : (react_1.default.createElement(CustomBadge, { ...badgeConfig }, "Basic badge")),
            showShadowWarning && react_1.default.createElement(text_1.Text, { variant: "captionStandard" }, "Adding a shadow to ghost and outline variants is not supported")),
        react_1.default.createElement(text_1.Text, null, "Size"),
        react_1.default.createElement(badge_1.Badge, { size: "tiny" }),
        react_1.default.createElement(badge_1.Badge, { size: "extraSmall", badgeColor: "red" }),
        react_1.default.createElement(badge_1.Badge, { size: "small" }, "Small"),
        react_1.default.createElement(badge_1.Badge, { size: "medium" }, "Medium"),
        react_1.default.createElement(badge_1.Badge, { size: "large" }, "Large"),
        react_1.default.createElement(badge_1.Badge, { size: "extraLarge" }, "Extra Large"),
        svgIconsEnabled && (react_1.default.createElement(react_1.default.Fragment, null,
            react_1.default.createElement(text_1.Text, null, "Badge with icon"),
            react_1.default.createElement(badge_1.Badge, { icon: iconExamples_1.iconProps, iconPosition: "after" },
                "Badge with",
                react_1.default.createElement(react_native_1.Image, { source: { uri: styles_1.satyaPhotoUrl }, style: { width: 20, height: 20 } }),
                react_1.default.createElement(text_1.Text, { style: { backgroundColor: 'yellow' } }, "optional content")),
            react_1.default.createElement(badge_1.Badge, { appearance: "outline", icon: { ...iconExamples_1.iconProps, width: 20, height: 20 } }),
            react_1.default.createElement(badge_1.Badge, { icon: { fontSource: { ...fontBuiltInProps }, color: '#fff' } }, "Badge with icon"),
            react_1.default.createElement(text_1.Text, null, "Customized Badge with icon"),
            react_1.default.createElement(StyledBadge, { icon: { svgSource: iconExamples_1.svgProps } }, "Styled badge")))));
};
exports.BasicBadge = BasicBadge;
//# sourceMappingURL=BasicBadgeTest.js.map