import { __assign } from "tslib";
import * as React from 'react';
import { Platform, View, StyleSheet } from 'react-native';
import { ButtonV1 as Button } from '@fluentui/react-native';
import { SvgXml } from 'react-native-svg';
import { testImage, svgProps, iconProps } from '../Common/iconExamples';
import { commonTestStyles, testContentRootViewStyle } from '../Common/styles';
var styles = StyleSheet.create({
    chevron: { paddingStart: 4 },
});
export var ButtonIconTest = function () {
    var fontBuiltInProps = {
        fontFamily: 'Arial',
        codepoint: 0x2663,
        fontSize: 24,
    };
    var svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(Platform.OS);
    var chevronXml = "\n          <svg width=\"12\" height=\"16\" viewBox=\"0 0 11 6\" color=\"#000\">\n            <path fill='currentColor' d='M0.646447 0.646447C0.841709 0.451184 1.15829 0.451184 1.35355 0.646447L5.5 4.79289L9.64645 0.646447C9.84171 0.451185 10.1583 0.451185 10.3536 0.646447C10.5488 0.841709 10.5488 1.15829 10.3536 1.35355L5.85355 5.85355C5.65829 6.04882 5.34171 6.04882 5.14645 5.85355L0.646447 1.35355C0.451184 1.15829 0.451184 0.841709 0.646447 0.646447Z' />\n          </svg>";
    return (React.createElement(View, { style: testContentRootViewStyle },
        React.createElement(Button, { icon: { fontSource: __assign(__assign({}, fontBuiltInProps), { fontSize: 32 }), color: '#060' }, style: commonTestStyles.vmargin }, "Font icon"),
        React.createElement(Button, { icon: { fontSource: __assign(__assign({}, fontBuiltInProps), { fontSize: 32 }), color: '#060' }, style: commonTestStyles.vmargin, iconPosition: "after" }, "Icon after"),
        React.createElement(Button, { icon: { fontSource: fontBuiltInProps }, style: commonTestStyles.vmargin }, "Font icon"),
        React.createElement(Button, { appearance: "primary", icon: { fontSource: fontBuiltInProps }, style: commonTestStyles.vmargin }, "Font icon"),
        svgIconsEnabled && (React.createElement(React.Fragment, null,
            React.createElement(Button, { appearance: "primary", icon: { svgSource: svgProps, color: 'red' }, style: commonTestStyles.vmargin }, "SVG"),
            React.createElement(Button, { icon: iconProps, style: commonTestStyles.vmargin }, "SVG"))),
        React.createElement(Button, { appearance: "primary", icon: testImage, style: commonTestStyles.vmargin }, "PNG"),
        React.createElement(Button, { icon: testImage, style: commonTestStyles.vmargin }, "PNG"),
        svgIconsEnabled && (React.createElement(Button, { style: commonTestStyles.vmargin, icon: iconProps },
            "Icon Button and Chevron",
            React.createElement(View, { style: styles.chevron },
                React.createElement(SvgXml, { xml: chevronXml }))))));
};
//# sourceMappingURL=ButtonIconTestSection.js.map