"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.BasicBadge = void 0;
var tslib_1 = require("tslib");
/* eslint-disable @typescript-eslint/no-var-requires */
var react_1 = tslib_1.__importStar(require("react"));
var react_native_1 = require("react-native");
var react_native_2 = require("@fluentui/react-native");
var badge_1 = require("@fluentui-react-native/badge");
var framework_1 = require("@fluentui-react-native/framework");
var text_1 = require("@fluentui-react-native/text");
var styles_1 = require("./../PersonaCoin/styles");
var iconExamples_1 = require("../Common/iconExamples");
var StyledPicker_1 = require("../Common/StyledPicker");
var badgeColors = tslib_1.__spreadArray([], badge_1.BadgeColors, true);
var badgeShapes = tslib_1.__spreadArray([], badge_1.BadgeShapes, true);
var badgeSizes = tslib_1.__spreadArray([], badge_1.BadgeSizes, true);
var badgeAppearances = tslib_1.__spreadArray([], badge_1.BadgeAppearances, true);
var badgeIconPositions = ['before', 'after'];
var useCustomizedBadge = function (tokensAndprops) {
    return (0, react_1.useMemo)(function () { return badge_1.Badge.customize(tslib_1.__assign({}, tokensAndprops)); }, [tokensAndprops]);
};
var BasicBadge = function () {
    var _a = (0, react_1.useState)('filled'), badgeAppearance = _a[0], setBadgeAppearance = _a[1];
    var _b = (0, react_1.useState)('brand'), badgeColor = _b[0], setBadgeColor = _b[1];
    var _c = (0, react_1.useState)('circular'), shape = _c[0], setShape = _c[1];
    var _d = (0, react_1.useState)('medium'), size = _d[0], setSize = _d[1];
    var _e = (0, react_1.useState)(false), showIcon = _e[0], setShowIcon = _e[1];
    var _f = (0, react_1.useState)('before'), iconPosition = _f[0], setIconPosition = _f[1];
    var _g = (0, react_1.useState)(false), showShadow = _g[0], setShowShadow = _g[1];
    var onBadgeAppearanceChange = (0, react_1.useCallback)(function (value) { return setBadgeAppearance(value); }, []);
    var onBadgeColorChange = (0, react_1.useCallback)(function (value) { return setBadgeColor(value); }, []);
    var onShapeChange = (0, react_1.useCallback)(function (value) { return setShape(value); }, []);
    var onSizeChange = (0, react_1.useCallback)(function (value) { return setSize(value); }, []);
    var onIconPositionChange = (0, react_1.useCallback)(function (value) { return setIconPosition(value); }, []);
    var onShowShadowChange = (0, react_1.useCallback)(function () { return setShowShadow(!showShadow); }, [showShadow, setShowShadow]);
    var onShowIconChange = (0, react_1.useCallback)(function () { return setShowIcon(!showIcon); }, [showIcon, setShowIcon]);
    var theme = (0, framework_1.useFluentTheme)();
    var fontBuiltInProps = {
        fontFamily: 'Arial',
        codepoint: 0x2663,
        fontSize: 16,
    };
    var svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(react_native_1.Platform.OS);
    var shadow = showShadow ? theme.shadows.shadow4 : undefined;
    var showShadowWarning = showShadow && (badgeAppearance == 'ghost' || badgeAppearance == 'outline');
    var CustomBadge = useCustomizedBadge({ shadowToken: shadow });
    var badgeConfig = {
        appearance: badgeAppearance,
        badgeColor: badgeColor,
        size: size,
        shape: shape,
    };
    var 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, tslib_1.__assign({}, badgeConfig, { icon: { svgSource: iconExamples_1.svgProps }, iconPosition: iconPosition }), "Basic badge")) : (react_1.default.createElement(CustomBadge, tslib_1.__assign({}, 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: tslib_1.__assign(tslib_1.__assign({}, iconExamples_1.iconProps), { width: 20, height: 20 }) }),
            react_1.default.createElement(badge_1.Badge, { icon: { fontSource: tslib_1.__assign({}, 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