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_TESTPAGE } from '@fluentui-react-native/e2e-testing';
import { Switch } from '@fluentui-react-native/switch';
import { CustomizedSwitch } from './CustomizedSwitch';
import { E2ESwitchTest } from './E2ESwitchTest';
import { commonTestStyles } from '../Common/styles';
import { Test } from '../Test';
const styles = StyleSheet.create({
    square: {
        backgroundColor: 'red',
        width: 100,
        height: 100,
    },
});
const StandardUsage = () => {
    const memoizedStyles = React.useMemo(() => (Platform.OS === 'android' ? { ...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 })));
};
const OnChangeUsage = () => {
    const [displaySquare, setDisplaySquare] = React.useState(true);
    const defaultToggleSquare = (_e, checked) => {
        setDisplaySquare(checked);
    };
    const memoizedStyles = React.useMemo(() => (Platform.OS === 'android' ? { ...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 })));
};
const ControlSwitchValues = () => {
    const [toggleSwitch, setToggleSwitch] = React.useState(true);
    const toggleSwitchTrue = () => {
        setToggleSwitch(true);
    };
    const toggleSwitchFalse = () => {
        setToggleSwitch(false);
    };
    const memoizedStyles = React.useMemo(() => (Platform.OS === 'android' ? { ...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 })));
};
const LabelPosition = () => {
    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' })));
};
const OnOffText = () => {
    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' })));
};
const toggleSections = [
    {
        name: 'Standard Usage',
        testID: SWITCH_TESTPAGE,
        component: () => React.createElement(StandardUsage, null),
    },
    {
        name: 'onChange Usage',
        component: () => React.createElement(OnChangeUsage, null),
    },
    {
        name: 'Control Switch Values',
        component: () => React.createElement(ControlSwitchValues, null),
    },
    Platform.select({
        android: null,
        default: {
            name: 'Label Position',
            component: () => React.createElement(LabelPosition, null),
        },
    }),
    Platform.select({
        android: null,
        default: {
            name: 'On/Off Text',
            component: () => React.createElement(OnOffText, null),
        },
    }),
    Platform.select({
        android: null,
        default: {
            name: 'Customized Tokens',
            component: () => React.createElement(CustomizedSwitch, null),
        },
    }),
];
const e2eSections = [
    {
        name: 'Switch E2E Testing',
        component: E2ESwitchTest,
    },
];
export const SwitchTest = () => {
    const status = {
        win32Status: 'Production',
        uwpStatus: 'Backlog',
        iosStatus: 'Production',
        macosStatus: 'Production',
        androidStatus: 'Production',
    };
    const description = 'Switch is a control that has two mutually exclusive states.';
    const 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