import * as React from 'react';
import { Platform, View } from 'react-native';
import { ButtonV1 as Button, CompoundButton, FAB } from '@fluentui/react-native';
import { iconProps } from '../Common/iconExamples';
import { commonTestStyles, testContentRootViewStyle } from '../Common/styles';
const isMobile = Platform.OS === 'android' || Platform.OS === 'ios';
export const ButtonSizeTest = () => {
    const svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(Platform.OS);
    return (React.createElement(View, { style: testContentRootViewStyle },
        svgIconsEnabled && (React.createElement(React.Fragment, null,
            React.createElement(Button, { iconOnly: true, size: "small", icon: iconProps, accessibilityLabel: "Small size button with accessibility icon", style: commonTestStyles.vmargin, tooltip: "button tooltip" }),
            React.createElement(Button, { iconOnly: true, size: "small", appearance: "primary", icon: iconProps, accessibilityLabel: "Small size button with accessibility icon", style: commonTestStyles.vmargin, tooltip: "button tooltip" }),
            React.createElement(Button, { iconOnly: true, size: "medium", icon: iconProps, accessibilityLabel: "Medium size button with accessibility icon", style: commonTestStyles.vmargin }),
            React.createElement(Button, { iconOnly: true, size: "medium", appearance: "primary", icon: iconProps, accessibilityLabel: "Medium size button with accessibility icon", style: commonTestStyles.vmargin }),
            React.createElement(Button, { iconOnly: true, size: "large", icon: iconProps, accessibilityLabel: "Large size button with accessibility icon", style: commonTestStyles.vmargin }),
            React.createElement(Button, { iconOnly: true, size: "large", appearance: "primary", icon: iconProps, accessibilityLabel: "Large size button with accessibility icon", style: commonTestStyles.vmargin }),
            React.createElement(Button, { size: "small", icon: iconProps, style: commonTestStyles.vmargin }, "Small Button with icon"),
            React.createElement(Button, { size: "small", appearance: "primary", icon: iconProps, style: commonTestStyles.vmargin }, "Small Button with icon"),
            React.createElement(Button, { size: "medium", icon: iconProps, style: commonTestStyles.vmargin }, "Medium Button with icon"),
            React.createElement(Button, { size: "medium", appearance: "primary", icon: iconProps, style: commonTestStyles.vmargin }, "Medium Button with icon"),
            React.createElement(Button, { size: "large", icon: iconProps, style: commonTestStyles.vmargin }, "Large Button with icon"),
            React.createElement(Button, { size: "large", appearance: "primary", icon: iconProps, style: commonTestStyles.vmargin }, "Large Button with icon"),
            React.createElement(FAB, { size: "small", icon: iconProps, style: commonTestStyles.vmargin }, "Small FAB"),
            React.createElement(FAB, { size: "large", icon: iconProps, style: commonTestStyles.vmargin }, "Large FAB"))),
        React.createElement(Button, { size: "small", style: commonTestStyles.vmargin }, "Small"),
        React.createElement(Button, { size: "medium", style: commonTestStyles.vmargin }, "Medium"),
        React.createElement(Button, { size: "large", style: commonTestStyles.vmargin }, "Large"),
        !isMobile && (React.createElement(React.Fragment, null,
            React.createElement(Button, { loading: true, size: "small", style: commonTestStyles.vmargin }, "Loading Button Small"),
            React.createElement(Button, { loading: true, size: "medium", style: commonTestStyles.vmargin }, "Loading Button Medium"),
            React.createElement(Button, { loading: true, size: "large", style: commonTestStyles.vmargin }, "Loading Button Large"),
            React.createElement(CompoundButton, { secondaryContent: "Small compound button", size: "small", style: commonTestStyles.vmargin }, "Compound Button"),
            React.createElement(CompoundButton, { appearance: "primary", secondaryContent: "Small compound button", size: "small", style: commonTestStyles.vmargin }, "Compound Button"),
            React.createElement(CompoundButton, { secondaryContent: "Medium compound button", size: "medium", style: commonTestStyles.vmargin }, "Compound Button"),
            React.createElement(CompoundButton, { appearance: "primary", secondaryContent: "Medium compound button", size: "medium", style: commonTestStyles.vmargin }, "Compound Button"),
            React.createElement(CompoundButton, { secondaryContent: "Large compound button", size: "large", style: commonTestStyles.vmargin }, "Compound Button"),
            React.createElement(CompoundButton, { appearance: "primary", secondaryContent: "Large compound button", size: "large", style: commonTestStyles.vmargin }, "Compound Button"),
            svgIconsEnabled && (React.createElement(React.Fragment, null,
                React.createElement(CompoundButton, { icon: iconProps, secondaryContent: "SecondaryContent", size: "small", style: commonTestStyles.vmargin }, "Content"),
                React.createElement(CompoundButton, { icon: iconProps, secondaryContent: "SecondaryContent", size: "medium", style: commonTestStyles.vmargin }, "Content"),
                React.createElement(CompoundButton, { icon: iconProps, secondaryContent: "SecondaryContent", size: "large", style: commonTestStyles.vmargin }, "Content")))))));
};
//# sourceMappingURL=ButtonSizeTestSection.js.map