import * as React from 'react';
import { View, TextInput, StyleSheet } from 'react-native';
import { Text } from '@fluentui-react-native/experimental-text';
import { Switch } from '@fluentui-react-native/switch';
import { commonTestStyles as commonStyles } from '../Common/styles';
var styles = StyleSheet.create({
    tokensRow: {
        flexDirection: 'row',
        marginBottom: 10,
    },
    tokensColumn: {
        flexDirection: 'column',
        margin: 10,
    },
});
export var CustomizedSwitch = function () {
    var _a = React.useState('blue'), trackColor = _a[0], setTrackColor = _a[1];
    var _b = React.useState('white'), thumbColorOn = _b[0], setThumbColorOn = _b[1];
    var _c = React.useState('grey'), thumbColorOff = _c[0], setThumbColorOff = _c[1];
    var _d = React.useState(20), thumbSize = _d[0], setThumbSize = _d[1];
    var _e = React.useState(100), trackWidth = _e[0], setTrackWidth = _e[1];
    var _f = React.useState(30), trackHeight = _f[0], setTrackHeight = _f[1];
    var _g = React.useState('black'), focusStrokeColor = _g[0], setFocusStrokeColor = _g[1];
    var _h = React.useState(4), focusBorderRadius = _h[0], setFocusBorderRadius = _h[1];
    var _j = React.useState(1), focusBorderWidth = _j[0], setFocusBorderWidth = _j[1];
    var _k = React.useState(20), thumbRadius = _k[0], setThumbRadius = _k[1];
    var _l = React.useState(4), padding = _l[0], setPadding = _l[1];
    var _m = React.useState('black'), color = _m[0], setColor = _m[1];
    var _o = React.useState(trackWidth), minWidth = _o[0], setMinWidth = _o[1];
    var _p = React.useState(trackHeight), minHeight = _p[0], setMinHeight = _p[1];
    var _q = React.useState(1), borderWidth = _q[0], setBorderWidth = _q[1];
    var _r = React.useState(20), borderRadius = _r[0], setBorderRadius = _r[1];
    var _s = React.useState(trackColor), borderColor = _s[0], setBorderColor = _s[1];
    var CustomSwitch = React.useMemo(function () {
        var tokens = {
            trackWidth: trackWidth,
            trackHeight: trackHeight,
            minWidth: minWidth,
            minHeight: minHeight,
            thumbSize: thumbSize,
            thumbRadius: thumbRadius,
            padding: padding,
            color: color,
            borderWidth: borderWidth,
            borderRadius: borderRadius,
            toggleOn: {
                thumbColor: thumbColorOn,
                trackColor: trackColor,
                borderColor: borderColor,
                hovered: {
                    borderColor: borderColor,
                    trackColor: trackColor,
                    thumbColor: thumbColorOn,
                },
                pressed: {
                    borderColor: trackColor,
                    trackColor: trackColor,
                    thumbColor: thumbColorOn,
                },
            },
            toggleOff: {
                thumbColor: thumbColorOff,
                hovered: {
                    thumbColor: thumbColorOff,
                },
                pressed: {
                    thumbColor: thumbColorOff,
                },
            },
            focused: {
                focusBorderRadius: focusBorderRadius,
                focusStrokeColor: focusStrokeColor,
                focusBorderWidth: focusBorderWidth,
            },
        };
        return Switch.customize(tokens);
    }, [
        trackColor,
        thumbColorOn,
        thumbColorOff,
        thumbSize,
        thumbRadius,
        trackWidth,
        trackHeight,
        focusStrokeColor,
        focusBorderRadius,
        focusBorderWidth,
        padding,
        color,
        minWidth,
        minHeight,
        borderWidth,
        borderRadius,
        borderColor,
    ]);
    return (React.createElement(View, { style: styles.tokensColumn },
        React.createElement(View, { style: styles.tokensRow },
            React.createElement(View, null,
                React.createElement(Text, null, "Track Tokens"),
                React.createElement(TextInput, { accessibilityLabel: "Track color", style: commonStyles.textBox, placeholder: "Track color", blurOnSubmit: true, onSubmitEditing: function (e) {
                        setTrackColor(e.nativeEvent.text);
                    } }),
                React.createElement(TextInput, { accessibilityLabel: "Track border color", style: commonStyles.textBox, placeholder: "Track border color", blurOnSubmit: true, onSubmitEditing: function (e) {
                        setBorderColor(e.nativeEvent.text);
                    } }),
                React.createElement(TextInput, { accessibilityLabel: "Track width", style: commonStyles.textBox, placeholder: "Track width", blurOnSubmit: true, onSubmitEditing: function (e) {
                        setTrackWidth(parseInt(e.nativeEvent.text.toString()));
                    } }),
                React.createElement(TextInput, { accessibilityLabel: "Track height", style: commonStyles.textBox, placeholder: "Track height", blurOnSubmit: true, onSubmitEditing: function (e) {
                        setTrackHeight(parseInt(e.nativeEvent.text.toString()));
                    } }),
                React.createElement(TextInput, { accessibilityLabel: "Track border width", style: commonStyles.textBox, placeholder: "Track border width", blurOnSubmit: true, onSubmitEditing: function (e) {
                        setBorderWidth(parseInt(e.nativeEvent.text.toString()));
                    } }),
                React.createElement(TextInput, { accessibilityLabel: "Track border radius", style: commonStyles.textBox, placeholder: "Track border radius", blurOnSubmit: true, onSubmitEditing: function (e) {
                        setBorderRadius(parseInt(e.nativeEvent.text.toString()));
                    } })),
            React.createElement(View, null,
                React.createElement(Text, null, "Thumb Tokens"),
                React.createElement(TextInput, { accessibilityLabel: "Thumb on color", style: commonStyles.textBox, placeholder: "Thumb on color", blurOnSubmit: true, onSubmitEditing: function (e) {
                        setThumbColorOn(e.nativeEvent.text);
                    } }),
                React.createElement(TextInput, { accessibilityLabel: "Thumb off color", style: commonStyles.textBox, placeholder: "Thumb off color", blurOnSubmit: true, onSubmitEditing: function (e) {
                        setThumbColorOff(e.nativeEvent.text);
                    } }),
                React.createElement(TextInput, { accessibilityLabel: "Thumb size", style: commonStyles.textBox, placeholder: "Thumb size", blurOnSubmit: true, onSubmitEditing: function (e) {
                        setThumbSize(parseInt(e.nativeEvent.text));
                    } }),
                React.createElement(TextInput, { accessibilityLabel: "Thumb radius", style: commonStyles.textBox, placeholder: "Thumb radius", blurOnSubmit: true, onSubmitEditing: function (e) {
                        setThumbRadius(parseInt(e.nativeEvent.text));
                    } }))),
        React.createElement(View, { style: styles.tokensRow },
            React.createElement(View, null,
                React.createElement(Text, null, "Focus Stroke Tokens"),
                React.createElement(TextInput, { accessibilityLabel: "Focus stroke color", style: commonStyles.textBox, placeholder: "Focus stroke color", blurOnSubmit: true, onSubmitEditing: function (e) {
                        setFocusStrokeColor(e.nativeEvent.text);
                    } }),
                React.createElement(TextInput, { accessibilityLabel: "Focus stroke border radius", style: commonStyles.textBox, placeholder: "Focus stroke border radius", blurOnSubmit: true, onSubmitEditing: function (e) {
                        setFocusBorderRadius(parseInt(e.nativeEvent.text));
                    } }),
                React.createElement(TextInput, { accessibilityLabel: "Focus stroke border width", style: commonStyles.textBox, placeholder: "Focus stroke border width", blurOnSubmit: true, onSubmitEditing: function (e) {
                        setFocusBorderWidth(parseInt(e.nativeEvent.text));
                    } })),
            React.createElement(View, null,
                React.createElement(Text, null, "Other Tokens"),
                React.createElement(TextInput, { accessibilityLabel: "Minimum width", style: commonStyles.textBox, placeholder: "Minimum width", blurOnSubmit: true, onSubmitEditing: function (e) {
                        setMinWidth(parseInt(e.nativeEvent.text));
                    } }),
                React.createElement(TextInput, { accessibilityLabel: "Minimum height", style: commonStyles.textBox, placeholder: "Minimum height", blurOnSubmit: true, onSubmitEditing: function (e) {
                        setMinHeight(parseInt(e.nativeEvent.text));
                    } }),
                React.createElement(TextInput, { accessibilityLabel: "Padding", style: commonStyles.textBox, placeholder: "Padding", blurOnSubmit: true, onSubmitEditing: function (e) {
                        setPadding(parseInt(e.nativeEvent.text));
                    } }),
                React.createElement(TextInput, { accessibilityLabel: "Text colors", style: commonStyles.textBox, placeholder: "Text colors", blurOnSubmit: true, onSubmitEditing: function (e) {
                        setColor(e.nativeEvent.text);
                    } }))),
        React.createElement(CustomSwitch, { label: "Custom Switch", onText: "On", offText: "Off", accessibilityLabel: "Custom Switch" })));
};
//# sourceMappingURL=CustomizedSwitch.js.map