"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.SvgTest = void 0;
const React = __importStar(require("react"));
const react_1 = require("react");
const react_native_1 = require("react-native");
const react_native_2 = require("@fluentui/react-native");
const react_native_3 = require("@fluentui/react-native");
const e2e_testing_1 = require("@fluentui-react-native/e2e-testing");
const text_1 = require("@fluentui-react-native/text");
const react_native_svg_1 = require("react-native-svg");
const accessible_icon_brands_svg_1 = __importDefault(require("../../../assets/accessible-icon-brands.svg"));
const Test_1 = require("../Test");
const styles = react_native_1.StyleSheet.create({
    svg: {
        backgroundColor: 'green',
        color: 'purple',
    },
    textInlineSvg: {
        textTransform: 'uppercase',
    },
});
const RectTest = () => {
    const [useColorA, setUseColorA] = React.useState(false);
    const colorA = 'red';
    const 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: (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" }))));
};
const RichTextInlineSvgTest = () => {
    const [showInline, setShowInline] = React.useState(false);
    const [isGreen, setIsGreen] = React.useState(true);
    const toggleShowInline = React.useCallback(() => {
        setShowInline(!showInline);
    }, [showInline]);
    const toggleRectFill = React.useCallback(() => {
        setIsGreen(!isGreen);
    }, [isGreen]);
    return (React.createElement(React.Fragment, null,
        React.createElement(text_1.TextV1, { style: styles.textInlineSvg, font: "base", weight: "medium", truncate: true },
            "Left [",
            showInline ? (React.createElement(react_native_svg_1.Svg, { width: "50", height: "50", viewBox: "0 0 50 50" },
                React.createElement(react_native_svg_1.Rect, { width: "50", height: "50", fill: "red" }),
                React.createElement(react_native_svg_1.Rect, { x: "20", width: "20", height: "20", fill: isGreen ? 'green' : 'blue' }))) : ('Svg will go here'),
            "] Right"),
        React.createElement(react_native_2.ButtonV1, { onClick: toggleShowInline }, showInline ? 'Remove inline svg' : 'Insert inline svg'),
        React.createElement(react_native_2.ButtonV1, { onClick: toggleRectFill }, isGreen ? 'Change to Blue' : 'Change to Green')));
};
const CircleTest = () => {
    return (React.createElement(react_native_svg_1.Svg, { width: "50", height: "50", accessible: true, accessibilityLabel: "SVG Circle Test", accessibilityRole: "image" },
        React.createElement(react_native_svg_1.Circle, { cx: "25", cy: "25", r: "20", fill: "red", stroke: "black" })));
};
const LineTest = () => {
    return (React.createElement(react_native_svg_1.Svg, { width: "50", height: "50", accessible: true, accessibilityLabel: "SVG Line Test", accessibilityRole: "image" },
        React.createElement(react_native_svg_1.Line, { x1: "10", y1: "10", x2: "20", y2: "20", fill: "red", stroke: "black" })));
};
const PathTest = () => {
    return (React.createElement(react_native_svg_1.Svg, { width: "100", height: "100", accessible: true, accessibilityLabel: "SVG Path Test", accessibilityRole: "image" },
        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" })));
};
const PolygonTest = () => {
    return (React.createElement(react_native_svg_1.Svg, { height: "100", width: "100", accessible: true, accessibilityLabel: "SVG Polygon Test", accessibilityRole: "image" },
        React.createElement(react_native_svg_1.Polygon, { points: "40,5 70,80 25,95", fill: "lime", stroke: "purple", strokeWidth: "1" })));
};
const LinearGradientTest = () => {
    return (React.createElement(react_native_svg_1.Svg, { height: "100", width: "100", style: { backgroundColor: 'black' }, viewBox: "0 0 10 10", color: "yellow", accessible: true, accessibilityLabel: "SVG Linear Gradient Test", accessibilityRole: "image" },
        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" })));
};
const RadialGradientTest = () => {
    return (React.createElement(react_native_svg_1.Svg, { height: "100", width: "100", style: { backgroundColor: 'black' }, viewBox: "0 0 10 10", color: "yellow", accessible: true, accessibilityLabel: "SVG Radial Gradient Test", accessibilityRole: "image" },
        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" })));
};
const RadialGradientTransformTest = () => {
    return (React.createElement(react_native_svg_1.Svg, { width: 256, height: 256, viewBox: "0 0 48 48", fill: "none", accessible: true, accessibilityLabel: "SVG Radial Gradient Transform Test", accessibilityRole: "image" },
        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" })))));
};
const RectCircleTest = () => {
    return (React.createElement(react_native_svg_1.Svg, { height: "200", width: "200", accessible: true, accessibilityLabel: "SVG Rect and Circle Test", accessibilityRole: "image" },
        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" })));
};
const BundledSvgTest = () => {
    return (React.createElement(accessible_icon_brands_svg_1.default, { width: 200, height: 200, color: "red", accessible: true, accessibilityLabel: "SVG Bundled svg Test", accessibilityRole: "image" }));
};
const RemoteSvgTest = () => {
    return (React.createElement(react_native_1.View, null,
        React.createElement(react_native_svg_1.SvgUri, { style: styles.svg, viewBox: "0 0 600 600", width: "100", height: "100", uri: "https://upload.wikimedia.org/wikipedia/commons/8/84/Example.svg", accessible: true, accessibilityLabel: "SVG Uri Test", accessibilityRole: "image" })));
};
const CustomSvgInputTest = () => {
    const defaultxml = `
  <svg width="256" height="256" viewBox="0 0 48 48">
  <rect width="48" height="48" fill="red"/>
  </svg>
`;
    const textInputStyle = { height: 256, width: 1024, borderColor: 'gray', borderWidth: 1, fontSize: 16 };
    const [inputText, setInputText] = (0, react_1.useState)(defaultxml);
    const [svgText, setSvgText] = (0, react_1.useState)(defaultxml);
    const [dataText, setDataText] = (0, react_1.useState)('click draw to see parsed data');
    const [showParse, setShowParsed] = (0, react_1.useState)(false);
    const handleChangeText = React.useCallback((text) => {
        setInputText(text);
    }, [setInputText]);
    const handleDrawOnClick = React.useCallback(() => {
        const parsed = (0, react_native_svg_1.parse)(inputText);
        if (parsed !== null) {
            setSvgText(inputText);
            setDataText(JSON.stringify(parsed));
        }
    }, [inputText, setSvgText, setDataText]);
    const handleShowParsed = React.useCallback(() => {
        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, accessible: true, accessibilityLabel: "Custom Svg Test", accessibilityRole: "image" })));
};
const svgSections = [
    {
        name: 'Custom Svg Input',
        component: CustomSvgInputTest,
        testID: e2e_testing_1.SVG_TESTPAGE,
    },
    {
        name: 'Rect',
        component: RectTest,
    },
    {
        name: 'Circle',
        component: CircleTest,
    },
    {
        name: 'RichTextInlineSvg',
        component: RichTextInlineSvgTest,
    },
    {
        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,
    },
];
const SvgTest = () => {
    const status = {
        win32Status: 'Production',
        uwpStatus: 'Production',
        iosStatus: 'Production',
        macosStatus: 'Production',
        androidStatus: 'Production',
    };
    const 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