"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SvgTest = void 0;
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var react_1 = require("react");
var react_native_1 = require("react-native");
var react_native_2 = require("@fluentui/react-native");
var react_native_3 = require("@fluentui/react-native");
var react_native_svg_1 = require("react-native-svg");
var accessible_icon_brands_svg_1 = tslib_1.__importDefault(require("./Assets/accessible-icon-brands.svg"));
var consts_1 = require("../../../../E2E/src/Svg/consts");
var Test_1 = require("../Test");
var styles = react_native_1.StyleSheet.create({
    svg: {
        backgroundColor: 'green',
        color: 'purple',
    },
});
var RectTest = function () {
    var _a = React.useState(false), useColorA = _a[0], setUseColorA = _a[1];
    var colorA = 'red';
    var colorB = 'green';
    return (React.createElement(React.Fragment, null,
        React.createElement(react_native_1.View, { style: { flexDirection: 'row', alignItems: 'center' } },
            React.createElement(react_native_1.Switch, { value: useColorA, onValueChange: function (value) {
                    setUseColorA(value);
                } }),
            React.createElement(react_native_1.Text, null, "Change Color")),
        React.createElement(react_native_3.Separator, null),
        React.createElement(react_native_svg_1.Svg, { width: "50", height: "50" },
            React.createElement(react_native_svg_1.Rect, { x: "10", y: "10", width: "20", height: "20", fill: useColorA ? colorA : colorB, stroke: "black" }))));
};
var CircleTest = function () {
    return (React.createElement(react_native_svg_1.Svg, { width: "50", height: "50" },
        React.createElement(react_native_svg_1.Circle, { cx: "25", cy: "25", r: "20", fill: "red", stroke: "black" })));
};
var LineTest = function () {
    return (React.createElement(react_native_svg_1.Svg, { width: "50", height: "50" },
        React.createElement(react_native_svg_1.Line, { x1: "10", y1: "10", x2: "20", y2: "20", fill: "red", stroke: "black" })));
};
var PathTest = function () {
    return (React.createElement(react_native_svg_1.Svg, { width: "100", height: "100" },
        React.createElement(react_native_svg_1.Path, { d: "M 0 0 A 10 10 0 0,1 0 100", fill: "magenta", stroke: "purple", id: "path" })));
};
var PolygonTest = function () {
    return (React.createElement(react_native_svg_1.Svg, { height: "100", width: "100" },
        React.createElement(react_native_svg_1.Polygon, { points: "40,5 70,80 25,95", fill: "lime", stroke: "purple", strokeWidth: "1" })));
};
var LinearGradientTest = function () {
    return (React.createElement(react_native_svg_1.Svg, { height: "100", width: "100", style: { backgroundColor: 'black' }, viewBox: "0 0 10 10", color: "yellow" },
        React.createElement(react_native_svg_1.Defs, null,
            React.createElement(react_native_svg_1.LinearGradient, { id: "grad", x1: "0", y1: "0", x2: "1", y2: "0" },
                React.createElement(react_native_svg_1.Stop, { offset: "0", stopColor: "green", stopOpacity: "1" }),
                React.createElement(react_native_svg_1.Stop, { offset: "1", stopColor: "black", stopOpacity: "1" }))),
        React.createElement(react_native_svg_1.Line, { x1: "0", y1: "0", x2: "10", y2: "10", fill: "red", stroke: "url(#grad)", strokeWidth: "5" })));
};
var RadialGradientTest = function () {
    return (React.createElement(react_native_svg_1.Svg, { height: "100", width: "100", style: { backgroundColor: 'black' }, viewBox: "0 0 10 10", color: "yellow" },
        React.createElement(react_native_svg_1.Defs, null,
            React.createElement(react_native_svg_1.RadialGradient, { id: "grad2" },
                React.createElement(react_native_svg_1.Stop, { offset: "0", stopColor: "blue" }),
                React.createElement(react_native_svg_1.Stop, { offset: "1", stopColor: "red" }))),
        React.createElement(react_native_svg_1.Line, { x1: "0", y1: "0", x2: "9", y2: "9", stroke: "url(#grad2)", strokeWidth: "5" })));
};
var RadialGradientTransformTest = function () {
    return (React.createElement(react_native_svg_1.Svg, { width: 256, height: 256, viewBox: "0 0 48 48", fill: "none" },
        React.createElement(react_native_svg_1.Rect, { width: 48, height: 48, fill: "url(#paint0_radial_1533_187044)" }),
        React.createElement(react_native_svg_1.Rect, { x: 10, y: 10, width: 10, height: 10, fill: "red" }),
        React.createElement(react_native_svg_1.Defs, null,
            React.createElement(react_native_svg_1.RadialGradient, { id: "paint0_radial_1533_187044", cx: 0, cy: 0, r: 20, gradientUnits: "userSpaceOnUse", gradientTransform: "translate(22 11)" },
                React.createElement(react_native_svg_1.Stop, { offset: 0.0598494, stopColor: "#FF0000" }),
                React.createElement(react_native_svg_1.Stop, { offset: 1, stopColor: "#00FF00" })))));
};
var RectCircleTest = function () {
    return (React.createElement(react_native_svg_1.Svg, { height: "200", width: "200" },
        React.createElement(react_native_svg_1.Defs, null,
            React.createElement(react_native_svg_1.G, { id: "shape" },
                React.createElement(react_native_svg_1.G, null,
                    React.createElement(react_native_svg_1.Rect, { x: "120", y: "120", width: "20", height: "50", fill: "red" }),
                    React.createElement(react_native_svg_1.Circle, { cx: "100", cy: "100", r: "20", fill: "blue", stroke: "black" })))),
        React.createElement(react_native_svg_1.Use, { href: "#shape", x: "20", y: "0" }),
        React.createElement(react_native_svg_1.Use, { href: "#shape", x: "170", y: "0" })));
};
var BundledSvgTest = function () {
    return React.createElement(accessible_icon_brands_svg_1.default, { width: 200, height: 200, color: "red" });
};
var RemoteSvgTest = function () {
    // GH#1596: Temporarily stop testing this case until it can be either more robust or removed
    var shouldShowLocalNetwork = false;
    return (React.createElement(react_native_1.View, null,
        React.createElement(react_native_svg_1.SvgUri, { style: styles.svg, viewBox: "0 0 200 200", width: "100", height: "100", uri: "https://upload.wikimedia.org/wikipedia/commons/8/84/Example.svg" }),
        shouldShowLocalNetwork && (React.createElement(react_native_svg_1.SvgUri, { x: "50", y: "50", viewBox: "0 0 500 500", style: styles.svg, width: "100", height: "100", uri: "http://10.122.222.112:8080/accessible-icon-brands.svg" }))));
};
var CustomSvgInputTest = function () {
    var defaultxml = "\n  <svg width=\"256\" height=\"256\" viewBox=\"0 0 48 48\">\n  <rect width=\"48\" height=\"48\" fill=\"red\"/>\n  </svg>\n";
    var textInputStyle = { height: 256, width: 1024, borderColor: 'gray', borderWidth: 1, fontSize: 16 };
    var _a = (0, react_1.useState)(defaultxml), inputText = _a[0], setInputText = _a[1];
    var _b = (0, react_1.useState)(defaultxml), svgText = _b[0], setSvgText = _b[1];
    var _c = (0, react_1.useState)('click draw to see parsed data'), dataText = _c[0], setDataText = _c[1];
    var _d = (0, react_1.useState)(false), showParse = _d[0], setShowParsed = _d[1];
    var handleChangeText = React.useCallback(function (text) {
        setInputText(text);
    }, [setInputText]);
    var handleDrawOnClick = React.useCallback(function () {
        var parsed = (0, react_native_svg_1.parse)(inputText);
        if (parsed !== null) {
            setSvgText(inputText);
            setDataText(JSON.stringify(parsed));
        }
    }, [inputText, setSvgText, setDataText]);
    var handleShowParsed = React.useCallback(function () {
        setShowParsed(!showParse);
    }, [showParse, setShowParsed]);
    return (React.createElement(react_native_1.View, null,
        React.createElement(react_native_1.Text, null, "Paste an svg in here and click Draw to try it out. The way it uses rnsvg's parse function to attempt to validate svg may cause asserts and crashes if the svg is invalid. Looking for another solution for this, but this is still useful in its current state."),
        React.createElement(react_native_1.TextInput, { multiline: true, accessibilityLabel: "Custom svg text input", value: inputText, style: textInputStyle, onChangeText: handleChangeText }),
        React.createElement(react_native_1.View, { style: { flexDirection: 'row' } },
            React.createElement(react_native_2.ButtonV1, { onClick: handleDrawOnClick }, "Draw"),
            React.createElement(react_native_2.ToggleButton, { onClick: handleShowParsed }, "Toggle Parsed data")),
        React.createElement(react_native_3.Separator, null),
        showParse && React.createElement(react_native_1.Text, null, dataText),
        React.createElement(react_native_svg_1.SvgXml, { width: "256", height: "256", xml: svgText })));
};
var svgSections = [
    {
        name: 'Custom Svg Input',
        component: CustomSvgInputTest,
        testID: consts_1.SVG_TESTPAGE,
    },
    {
        name: 'Rect',
        component: RectTest,
    },
    {
        name: 'Circle',
        component: CircleTest,
    },
    {
        name: 'Line',
        component: LineTest,
    },
    {
        name: 'Path',
        component: PathTest,
    },
    {
        name: 'Polygon',
        component: PolygonTest,
    },
    {
        name: 'Linear Gradient',
        component: LinearGradientTest,
    },
    {
        name: 'Radial Gradient',
        component: RadialGradientTest,
    },
    {
        name: 'Radial GradientTransform',
        component: RadialGradientTransformTest,
    },
    {
        name: 'Rect and Circle via Defs and Use',
        component: RectCircleTest,
    },
    {
        name: 'Bundled Svg',
        component: BundledSvgTest,
    },
    {
        name: 'Remotely Retrieved Svgs',
        component: RemoteSvgTest,
    },
];
var SvgTest = function () {
    var status = {
        win32Status: 'Production',
        uwpStatus: 'Production',
        iosStatus: 'Production',
        macosStatus: 'Production',
        androidStatus: 'Production',
    };
    var description = 'No description.';
    return React.createElement(Test_1.Test, { name: "Svg Test", description: description, sections: svgSections, status: status });
};
exports.SvgTest = SvgTest;
//# sourceMappingURL=SvgTest.js.map