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';
const badgeColors = [...BadgeColors];
const badgeShapes = [...BadgeShapes];
const badgeSizes = [...BadgeSizes];
const badgeAppearances = [...BadgeAppearances];
const badgeIconPositions = ['before', 'after'];
const useCustomizedBadge = (tokensAndprops) => {
    return useMemo(() => Badge.customize({ ...tokensAndprops }), [tokensAndprops]);
};
export const BasicBadge = () => {
    const [badgeAppearance, setBadgeAppearance] = useState('filled');
    const [badgeColor, setBadgeColor] = useState('brand');
    const [shape, setShape] = useState('circular');
    const [size, setSize] = useState('medium');
    const [showIcon, setShowIcon] = useState(false);
    const [iconPosition, setIconPosition] = useState('before');
    const [showShadow, setShowShadow] = useState(false);
    const onBadgeAppearanceChange = useCallback((value) => setBadgeAppearance(value), []);
    const onBadgeColorChange = useCallback((value) => setBadgeColor(value), []);
    const onShapeChange = useCallback((value) => setShape(value), []);
    const onSizeChange = useCallback((value) => setSize(value), []);
    const onIconPositionChange = useCallback((value) => setIconPosition(value), []);
    const onShowShadowChange = useCallback(() => setShowShadow(!showShadow), [showShadow, setShowShadow]);
    const onShowIconChange = useCallback(() => setShowIcon(!showIcon), [showIcon, setShowIcon]);
    const theme = useFluentTheme();
    const fontBuiltInProps = {
        fontFamily: 'Arial',
        codepoint: 0x2663,
        fontSize: 16,
    };
    const svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(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.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, { ...badgeConfig, icon: { svgSource: svgProps }, iconPosition: iconPosition }, "Basic badge")) : (React.createElement(CustomBadge, { ...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: { ...iconProps, width: 20, height: 20 } }),
            React.createElement(Badge, { icon: { fontSource: { ...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