"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 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(23), textSize = _d[0], setTextSize = _d[1];
    var _e = React.useState(20), secondarySize = _e[0], setSecondarySize = _e[1];
    var _f = React.useState(17), tertiarySize = _f[0], setTertiarySize = _f[1];
    var _g = React.useState(14), optionalSize = _g[0], setOptionalSize = _g[1];
    var _h = React.useState(), horizontalGap = _h[0], setHorizontalGap = _h[1];
    var _j = React.useState(), verticalGap = _j[0], setVerticalGap = _j[1];
    var theme = (0, theme_types_1.useTheme)();
    var textBoxBorderStyle = getThemedStyles(theme);
    var CustomizedPersona = React.useMemo(function () {
        var tokens = {
            backgroundColor: coinColor,
            color: textColor,
            textFont: { fontSize: textSize },
            secondaryFont: { fontSize: secondarySize },
            tertiaryFont: { fontSize: tertiarySize },
            optionalFont: { fontSize: optionalSize },
            horizontalGap: horizontalGap,
            verticalGap: verticalGap,
        };
        return react_native_2.Persona.customize({ tokens: tokens });
    }, [coinColor, textColor, textSize, secondarySize, tertiarySize, optionalSize, horizontalGap, verticalGap]);
    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.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.Text, null, "Primary text size"),
            React.createElement(Slider_1.Slider, { maximum: 50, minimum: 5, initialValue: textSize, style: styles_2.commonTestStyles.vmargin, onChange: setTextSize }),
            React.createElement(react_native_1.Text, null, "Secondary text size"),
            React.createElement(Slider_1.Slider, { maximum: 50, minimum: 5, initialValue: secondarySize, style: styles_2.commonTestStyles.vmargin, onChange: setSecondarySize }),
            React.createElement(react_native_1.Text, null, "Tertiary text size"),
            React.createElement(Slider_1.Slider, { maximum: 50, minimum: 5, initialValue: tertiarySize, style: styles_2.commonTestStyles.vmargin, onChange: setTertiarySize }),
            React.createElement(react_native_1.Text, null, "Optional text size"),
            React.createElement(Slider_1.Slider, { maximum: 50, minimum: 5, initialValue: optionalSize, style: styles_2.commonTestStyles.vmargin, onChange: setOptionalSize }),
            React.createElement(react_native_1.Text, null, "Horizontal gap"),
            React.createElement(Slider_1.Slider, { maximum: 100, initialValue: 5, minimum: 0, style: styles_2.commonTestStyles.vmargin, onChange: setHorizontalGap }),
            React.createElement(react_native_1.Text, null, "Vertical gap"),
            React.createElement(Slider_1.Slider, { maximum: 20, initialValue: 5, minimum: 0, style: styles_2.commonTestStyles.vmargin, onChange: setVerticalGap })),
        React.createElement(CustomizedPersona, { initials: "MJ", size: "size72", text: "Michael Jackson", secondaryText: "Pop singer", tertiaryText: "King of pop", optionalText: "Indiana", imageDescription: "Legendary pop singer", presence: "offline", imageUrl: showImage ? styles_1.michaelImageUrl : undefined })));
};
exports.CustomizeUsage = CustomizeUsage;
//# sourceMappingURL=CustomizeUsage.js.map