import { __assign, __spreadArray } from "tslib";
/* eslint-disable @typescript-eslint/no-var-requires */
import React, { useState, useCallback, useMemo } from 'react';
import { View, Platform, Image } from 'react-native';
import { ToggleButton } from '@fluentui/react-native';
import { Badge, BadgeAppearances, BadgeColors, BadgeShapes, BadgeSizes } from '@fluentui-react-native/badge';
import { useFluentTheme } from '@fluentui-react-native/framework';
import { Text } from '@fluentui-react-native/text';
import { svgProps, iconProps } from '../Common/iconExamples';
import { StyledPicker } from '../Common/StyledPicker';
import { satyaPhotoUrl } from '../PersonaCoin/styles';
var badgeColors = __spreadArray([], BadgeColors, true);
var badgeShapes = __spreadArray([], BadgeShapes, true);
var badgeSizes = __spreadArray([], BadgeSizes, true);
var badgeAppearances = __spreadArray([], BadgeAppearances, true);
var badgeIconPositions = ['before', 'after'];
var useCustomizedBadge = function (tokensAndprops) {
    return useMemo(function () { return Badge.customize(__assign({}, tokensAndprops)); }, [tokensAndprops]);
};
export var BasicBadge = function () {
    var _a = useState('filled'), badgeAppearance = _a[0], setBadgeAppearance = _a[1];
    var _b = useState('brand'), badgeColor = _b[0], setBadgeColor = _b[1];
    var _c = useState('circular'), shape = _c[0], setShape = _c[1];
    var _d = useState('medium'), size = _d[0], setSize = _d[1];
    var _e = useState(false), showIcon = _e[0], setShowIcon = _e[1];
    var _f = useState('before'), iconPosition = _f[0], setIconPosition = _f[1];
    var _g = useState(false), showShadow = _g[0], setShowShadow = _g[1];
    var onBadgeAppearanceChange = useCallback(function (value) { return setBadgeAppearance(value); }, []);
    var onBadgeColorChange = useCallback(function (value) { return setBadgeColor(value); }, []);
    var onShapeChange = useCallback(function (value) { return setShape(value); }, []);
    var onSizeChange = useCallback(function (value) { return setSize(value); }, []);
    var onIconPositionChange = useCallback(function (value) { return setIconPosition(value); }, []);
    var onShowShadowChange = useCallback(function () { return setShowShadow(!showShadow); }, [showShadow, setShowShadow]);
    var onShowIconChange = useCallback(function () { return setShowIcon(!showIcon); }, [showIcon, setShowIcon]);
    var theme = useFluentTheme();
    var fontBuiltInProps = {
        fontFamily: 'Arial',
        codepoint: 0x2663,
        fontSize: 16,
    };
    var svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(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.createElement(View, null,
        React.createElement(StyledPicker, { prompt: "Badge appearance", selected: badgeAppearance, onChange: onBadgeAppearanceChange, collection: badgeAppearances }),
        React.createElement(StyledPicker, { prompt: "Badge color", selected: badgeColor, onChange: onBadgeColorChange, collection: badgeColors }),
        React.createElement(StyledPicker, { prompt: "Shape", selected: shape, onChange: onShapeChange, collection: badgeShapes }),
        React.createElement(StyledPicker, { prompt: "Size", selected: size, onChange: onSizeChange, collection: badgeSizes }),
        svgIconsEnabled && (React.createElement(React.Fragment, null,
            React.createElement(ToggleButton, { onClick: onShowIconChange, checked: showIcon },
                "Set ",
                showIcon ? ' Hide icon' : ' Show icon'),
            React.createElement(StyledPicker, { prompt: "Icon position", selected: iconPosition, onChange: onIconPositionChange, collection: badgeIconPositions }))),
        React.createElement(ToggleButton, { onClick: onShowShadowChange, checked: showShadow },
            "Set ",
            showShadow ? ' Hide shadow' : ' Show shadow'),
        React.createElement(View, { style: { position: 'relative', backgroundColor: 'yellow', padding: 20, width: 200 } },
            React.createElement(Text, null, "Parent component for the Badge"),
            svgIconsEnabled && showIcon ? (React.createElement(CustomBadge, __assign({}, badgeConfig, { icon: { svgSource: svgProps }, iconPosition: iconPosition }), "Basic badge")) : (React.createElement(CustomBadge, __assign({}, badgeConfig), "Basic badge")),
            showShadowWarning && React.createElement(Text, { variant: "captionStandard" }, "Adding a shadow to ghost and outline variants is not supported")),
        React.createElement(Text, null, "Size"),
        React.createElement(Badge, { size: "tiny" }),
        React.createElement(Badge, { size: "extraSmall", badgeColor: "red" }),
        React.createElement(Badge, { size: "small" }, "Small"),
        React.createElement(Badge, { size: "medium" }, "Medium"),
        React.createElement(Badge, { size: "large" }, "Large"),
        React.createElement(Badge, { size: "extraLarge" }, "Extra Large"),
        svgIconsEnabled && (React.createElement(React.Fragment, null,
            React.createElement(Text, null, "Badge with icon"),
            React.createElement(Badge, { icon: iconProps, iconPosition: "after" },
                "Badge with",
                React.createElement(Image, { source: { uri: satyaPhotoUrl }, style: { width: 20, height: 20 } }),
                React.createElement(Text, { style: { backgroundColor: 'yellow' } }, "optional content")),
            React.createElement(Badge, { appearance: "outline", icon: __assign(__assign({}, iconProps), { width: 20, height: 20 }) }),
            React.createElement(Badge, { icon: { fontSource: __assign({}, fontBuiltInProps), color: '#fff' } }, "Badge with icon"),
            React.createElement(Text, null, "Customized Badge with icon"),
            React.createElement(StyledBadge, { icon: { svgSource: svgProps } }, "Styled badge")))));
};
//# sourceMappingURL=BasicBadgeTest.js.map