"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.CustomizeUsage = void 0;
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var react_native_1 = require("react-native");
var react_native_2 = require("@fluentui/react-native");
var theme_types_1 = require("@fluentui-react-native/theme-types");
var themed_stylesheet_1 = require("@fluentui-react-native/themed-stylesheet");
var styles_1 = require("./styles");
var AlignmentPicker_1 = require("../Common/AlignmentPicker");
var Slider_1 = require("../Common/Slider");
var styles_2 = require("../Common/styles");
var getThemedStyles = (0, themed_stylesheet_1.themedStyleSheet)(function (t) {
    return { textbox: tslib_1.__assign(tslib_1.__assign({}, styles_2.commonTestStyles.textBox), { borderColor: t.colors.inputBorder }) };
});
var CustomizeUsage = function () {
    var _a = React.useState(true), showImage = _a[0], setShowImage = _a[1];
    var _b = React.useState(), coinColor = _b[0], setCoinColor = _b[1];
    var _c = React.useState(), textColor = _c[0], setTextColor = _c[1];
    var _d = React.useState(80), physicalSize = _d[0], setPhysicalSize = _d[1];
    var _e = React.useState(24), iconSize = _e[0], setIconSize = _e[1];
    var _f = React.useState(2), iconStrokeWidth = _f[0], setIconStrokeWidth = _f[1];
    var _g = React.useState(undefined), iconStrokeColor = _g[0], setIconStrokeColor = _g[1];
    var _h = React.useState(14), initialsSize = _h[0], setInitialsSize = _h[1];
    var _j = React.useState(), horizontalAlignment = _j[0], setHorizontalAlignment = _j[1];
    var _k = React.useState(), verticalAlignment = _k[0], setVerticalAlignment = _k[1];
    var _l = React.useState('red'), ringColor = _l[0], setRingColor = _l[1];
    var _m = React.useState(undefined), ringBackgroundColor = _m[0], setRingBackgroundColor = _m[1];
    var _o = React.useState(true), showRing = _o[0], setShowRing = _o[1];
    var _p = React.useState(false), transparent = _p[0], setTransparent = _p[1];
    var theme = (0, theme_types_1.useTheme)();
    var textBoxBorderStyle = getThemedStyles(theme);
    var CustomizedPersonaCoin = React.useMemo(function () {
        var tokens = {
            backgroundColor: coinColor,
            color: textColor,
            horizontalIconAlignment: horizontalAlignment,
            verticalIconAlignment: verticalAlignment,
            iconSize: iconSize,
            iconStrokeWidth: iconStrokeWidth,
            iconStrokeColor: iconStrokeColor,
            initialsSize: initialsSize,
            coinSize: physicalSize,
        };
        return react_native_2.PersonaCoin.customize({ tokens: tokens });
    }, [
        coinColor,
        textColor,
        horizontalAlignment,
        verticalAlignment,
        iconSize,
        iconStrokeWidth,
        iconStrokeColor,
        initialsSize,
        physicalSize,
    ]);
    return (React.createElement(react_native_1.View, { style: styles_2.commonTestStyles.root },
        React.createElement(react_native_1.View, { style: styles_2.commonTestStyles.settings },
            React.createElement(react_native_1.View, { style: styles_2.commonTestStyles.switch },
                React.createElement(react_native_1.Text, null, "Show image"),
                React.createElement(react_native_1.Switch, { value: showImage, onValueChange: setShowImage })),
            React.createElement(react_native_1.View, { style: styles_2.commonTestStyles.switch },
                React.createElement(react_native_1.Text, null, "Show rings"),
                React.createElement(react_native_1.Switch, { value: showRing, onValueChange: setShowRing })),
            React.createElement(react_native_1.View, { style: styles_2.commonTestStyles.switch },
                React.createElement(react_native_1.Text, null, "Transparent Ring"),
                React.createElement(react_native_1.Switch, { value: transparent, onValueChange: setTransparent })),
            React.createElement(react_native_1.TextInput, { accessibilityLabel: "Background color", style: textBoxBorderStyle.textbox, placeholder: "Background color", blurOnSubmit: true, onSubmitEditing: function (e) {
                    setCoinColor(e.nativeEvent.text);
                } }),
            React.createElement(react_native_1.TextInput, { accessibilityLabel: "Initials text color", style: textBoxBorderStyle.textbox, placeholder: "Initials text color", blurOnSubmit: true, onSubmitEditing: function (e) {
                    setTextColor(e.nativeEvent.text);
                } }),
            React.createElement(react_native_1.TextInput, { accessibilityLabel: "Icon stroke color", style: textBoxBorderStyle.textbox, placeholder: "Icon stroke color", blurOnSubmit: true, onSubmitEditing: function (e) {
                    setIconStrokeColor(e.nativeEvent.text);
                } }),
            React.createElement(react_native_1.TextInput, { accessibilityLabel: "Ring color", style: textBoxBorderStyle.textbox, placeholder: "Ring color", blurOnSubmit: true, onSubmitEditing: function (e) {
                    setRingColor(e.nativeEvent.text);
                } }),
            React.createElement(react_native_1.TextInput, { accessibilityLabel: "Ring background color", style: textBoxBorderStyle.textbox, placeholder: "Ring background color", blurOnSubmit: true, onSubmitEditing: function (e) {
                    setRingBackgroundColor(e.nativeEvent.text);
                } }),
            React.createElement(AlignmentPicker_1.AlignmentPicker, { style: styles_2.commonTestStyles.header, label: "Horizontal icon alignment", onSelectionChange: setHorizontalAlignment }),
            React.createElement(AlignmentPicker_1.AlignmentPicker, { style: styles_2.commonTestStyles.header, label: "Vertical icon alignment", onSelectionChange: setVerticalAlignment }),
            React.createElement(react_native_1.Text, null, "Coin size"),
            React.createElement(Slider_1.Slider, { minimum: 8, maximum: 200, initialValue: 80, style: styles_2.commonTestStyles.vmargin, onChange: setPhysicalSize }),
            React.createElement(react_native_1.Text, null, "Icon size"),
            React.createElement(Slider_1.Slider, { minimum: 8, maximum: 100, initialValue: 24, style: styles_2.commonTestStyles.vmargin, onChange: setIconSize }),
            React.createElement(react_native_1.Text, null, "Icon stroke width"),
            React.createElement(Slider_1.Slider, { minimum: 0, maximum: 8, initialValue: 2, style: styles_2.commonTestStyles.vmargin, onChange: setIconStrokeWidth }),
            React.createElement(react_native_1.Text, null, "Font size"),
            React.createElement(Slider_1.Slider, { minimum: 5, maximum: 50, initialValue: 14, style: styles_2.commonTestStyles.vmargin, onChange: setInitialsSize })),
        React.createElement(CustomizedPersonaCoin, { initials: "SB", imageDescription: "Former CEO of Microsoft", presence: "blocked", imageUrl: showImage ? styles_1.steveBallmerPhotoUrl : undefined, ring: showRing
                ? {
                    ringColor: ringColor,
                    ringBackgroundColor: ringBackgroundColor,
                    ringThickness: 4,
                    innerGap: 4,
                    transparent: transparent,
                }
                : undefined })));
};
exports.CustomizeUsage = CustomizeUsage;
//# sourceMappingURL=CustomizeUsage.js.map