import { __assign } from "tslib";
import * as React from 'react';
import { View, StyleSheet } from 'react-native';
import { Platform } from 'react-native';
import { ButtonV1 as Button } from '@fluentui-react-native/button';
import { Switch } from '@fluentui-react-native/switch';
import { CustomizedSwitch } from './CustomizedSwitch';
import { E2ESwitchTest } from './E2ESwitchTest';
import { SWITCH_TESTPAGE } from '../../../../E2E/src/Switch/consts';
import { commonTestStyles } from '../Common/styles';
import { Test } from '../Test';
var styles = StyleSheet.create({
    square: {
        backgroundColor: 'red',
        width: 100,
        height: 100,
    },
});
var StandardUsage = function () {
    var memoizedStyles = React.useMemo(function () { return (Platform.OS === 'android' ? __assign(__assign({}, commonTestStyles.androidContainer), { height: 180 }) : commonTestStyles.settingsPicker); }, []);
    return (React.createElement(View, { style: memoizedStyles },
        React.createElement(Switch, { defaultChecked: true, label: 'Default Checked True' }),
        React.createElement(Switch, { defaultChecked: false, label: 'Default Checked False' }),
        React.createElement(Switch, { defaultChecked: true, label: 'Disabled Default Checked True', disabled: true }),
        React.createElement(Switch, { defaultChecked: false, label: 'Disabled Default Checked False', disabled: true })));
};
var OnChangeUsage = function () {
    var _a = React.useState(true), displaySquare = _a[0], setDisplaySquare = _a[1];
    var defaultToggleSquare = function (_e, checked) {
        setDisplaySquare(checked);
    };
    var memoizedStyles = React.useMemo(function () { return (Platform.OS === 'android' ? __assign(__assign({}, commonTestStyles.androidContainer), { height: 150 }) : commonTestStyles.settingsPicker); }, []);
    return (React.createElement(View, { style: memoizedStyles },
        React.createElement(Switch, { label: 'Toggle Square', defaultChecked: true, onChange: defaultToggleSquare }),
        displaySquare && React.createElement(View, { style: styles.square })));
};
var ControlSwitchValues = function () {
    var _a = React.useState(true), toggleSwitch = _a[0], setToggleSwitch = _a[1];
    var toggleSwitchTrue = function () {
        setToggleSwitch(true);
    };
    var toggleSwitchFalse = function () {
        setToggleSwitch(false);
    };
    var memoizedStyles = React.useMemo(function () { return (Platform.OS === 'android' ? __assign(__assign({}, commonTestStyles.androidContainer), { height: 150 }) : commonTestStyles.settingsPicker); }, []);
    return (React.createElement(View, { style: memoizedStyles },
        React.createElement(Button, { onClick: toggleSwitchTrue }, "Toggle Switch True"),
        React.createElement(Button, { onClick: toggleSwitchFalse }, "Toggle Switch False"),
        React.createElement(Switch, { label: 'Switch Value Being Controlled', checked: toggleSwitch })));
};
var LabelPosition = function () {
    return (React.createElement(View, { style: commonTestStyles.settingsPicker },
        React.createElement(Switch, { defaultChecked: true, labelPosition: 'before', label: 'before' }),
        React.createElement(Switch, { defaultChecked: true, labelPosition: 'after', label: 'after' }),
        Platform.OS !== 'android' && React.createElement(Switch, { defaultChecked: true, labelPosition: 'above', label: 'above' })));
};
var OnOffText = function () {
    return (React.createElement(View, { style: commonTestStyles.settingsPicker },
        React.createElement(Switch, { defaultChecked: true, labelPosition: 'before', label: 'Autosave', onText: 'On', offText: 'Off' }),
        React.createElement(Switch, { defaultChecked: true, labelPosition: 'above', label: 'Autosave', onText: 'On', offText: 'Off' }),
        React.createElement(Switch, { defaultChecked: true, labelPosition: 'after', label: 'Autosave', onText: 'On', offText: 'Off' })));
};
var toggleSections = [
    {
        name: 'Standard Usage',
        testID: SWITCH_TESTPAGE,
        component: function () { return React.createElement(StandardUsage, null); },
    },
    {
        name: 'onChange Usage',
        component: function () { return React.createElement(OnChangeUsage, null); },
    },
    {
        name: 'Control Switch Values',
        component: function () { return React.createElement(ControlSwitchValues, null); },
    },
    Platform.select({
        android: null,
        default: {
            name: 'Label Position',
            component: function () { return React.createElement(LabelPosition, null); },
        },
    }),
    Platform.select({
        android: null,
        default: {
            name: 'On/Off Text',
            component: function () { return React.createElement(OnOffText, null); },
        },
    }),
    Platform.select({
        android: null,
        default: {
            name: 'Customized Tokens',
            component: function () { return React.createElement(CustomizedSwitch, null); },
        },
    }),
];
var e2eSections = [
    {
        name: 'Switch E2E Testing',
        component: E2ESwitchTest,
    },
];
export var SwitchTest = function () {
    var status = {
        win32Status: 'Production',
        uwpStatus: 'Backlog',
        iosStatus: 'Production',
        macosStatus: 'Production',
        androidStatus: 'Production',
    };
    var description = 'Switch is a control that has two mutually exclusive states.';
    var spec = 'https://github.com/microsoft/fluentui-react-native/blob/main/packages/components/Switch/SPEC.md';
    return (React.createElement(Test, { name: "Switch Test", description: description, spec: spec, sections: toggleSections, status: status, e2eSections: e2eSections }));
};
//# sourceMappingURL=SwitchTest.js.map