import * as React from 'react';
import { useState } from 'react';
import { StyleSheet, Switch, Text, TextInput, View } from 'react-native';
import { ButtonV1 as Button, ToggleButton } from '@fluentui/react-native';
import { Separator } from '@fluentui/react-native';
import { TextV1 } from '@fluentui-react-native/text';
import { Circle, Defs, G, Line, Path, Polygon, LinearGradient, RadialGradient, Rect, Stop, Svg, SvgUri, SvgXml, Use, parse, } from 'react-native-svg';
import TestSvg from './Assets/accessible-icon-brands.svg';
import { SVG_TESTPAGE } from '../../../../E2E/src/Svg/consts';
import { Test } from '../Test';
var styles = StyleSheet.create({
    svg: {
        backgroundColor: 'green',
        color: 'purple',
    },
    textInlineSvg: {
        textTransform: 'uppercase',
    },
});
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(View, { style: { flexDirection: 'row', alignItems: 'center' } },
            React.createElement(Switch, { value: useColorA, onValueChange: function (value) {
                    setUseColorA(value);
                } }),
            React.createElement(Text, null, "Change Color")),
        React.createElement(Separator, null),
        React.createElement(Svg, { width: "50", height: "50" },
            React.createElement(Rect, { x: "10", y: "10", width: "20", height: "20", fill: useColorA ? colorA : colorB, stroke: "black" }))));
};
var RichTextInlineSvgTest = function () {
    var _a = React.useState(false), showInline = _a[0], setShowInline = _a[1];
    var _b = React.useState(true), isGreen = _b[0], setIsGreen = _b[1];
    var toggleShowInline = React.useCallback(function () {
        setShowInline(!showInline);
    }, [showInline]);
    var toggleRectFill = React.useCallback(function () {
        setIsGreen(!isGreen);
    }, [isGreen]);
    return (React.createElement(React.Fragment, null,
        React.createElement(TextV1, { style: styles.textInlineSvg, font: "base", weight: "medium", truncate: true },
            "Left [",
            showInline ? (React.createElement(Svg, { width: "50", height: "50", viewBox: "0 0 50 50" },
                React.createElement(Rect, { width: "50", height: "50", fill: "red" }),
                React.createElement(Rect, { x: "20", width: "20", height: "20", fill: isGreen ? 'green' : 'blue' }))) : ('Svg will go here'),
            "] Right"),
        React.createElement(Button, { onClick: toggleShowInline }, showInline ? 'Remove inline svg' : 'Insert inline svg'),
        React.createElement(Button, { onClick: toggleRectFill }, isGreen ? 'Change to Blue' : 'Change to Green')));
};
var CircleTest = function () {
    return (React.createElement(Svg, { width: "50", height: "50", accessible: true, accessibilityLabel: "SVG Circle Test", accessibilityRole: "image" },
        React.createElement(Circle, { cx: "25", cy: "25", r: "20", fill: "red", stroke: "black" })));
};
var LineTest = function () {
    return (React.createElement(Svg, { width: "50", height: "50", accessible: true, accessibilityLabel: "SVG Line Test", accessibilityRole: "image" },
        React.createElement(Line, { x1: "10", y1: "10", x2: "20", y2: "20", fill: "red", stroke: "black" })));
};
var PathTest = function () {
    return (React.createElement(Svg, { width: "100", height: "100", accessible: true, accessibilityLabel: "SVG Path Test", accessibilityRole: "image" },
        React.createElement(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(Svg, { height: "100", width: "100", accessible: true, accessibilityLabel: "SVG Polygon Test", accessibilityRole: "image" },
        React.createElement(Polygon, { points: "40,5 70,80 25,95", fill: "lime", stroke: "purple", strokeWidth: "1" })));
};
var LinearGradientTest = function () {
    return (React.createElement(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(Defs, null,
            React.createElement(LinearGradient, { id: "grad", x1: "0", y1: "0", x2: "1", y2: "0" },
                React.createElement(Stop, { offset: "0", stopColor: "green", stopOpacity: "1" }),
                React.createElement(Stop, { offset: "1", stopColor: "black", stopOpacity: "1" }))),
        React.createElement(Line, { x1: "0", y1: "0", x2: "10", y2: "10", fill: "red", stroke: "url(#grad)", strokeWidth: "5" })));
};
var RadialGradientTest = function () {
    return (React.createElement(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(Defs, null,
            React.createElement(RadialGradient, { id: "grad2" },
                React.createElement(Stop, { offset: "0", stopColor: "blue" }),
                React.createElement(Stop, { offset: "1", stopColor: "red" }))),
        React.createElement(Line, { x1: "0", y1: "0", x2: "9", y2: "9", stroke: "url(#grad2)", strokeWidth: "5" })));
};
var RadialGradientTransformTest = function () {
    return (React.createElement(Svg, { width: 256, height: 256, viewBox: "0 0 48 48", fill: "none", accessible: true, accessibilityLabel: "SVG Radial Gradient Transform Test", accessibilityRole: "image" },
        React.createElement(Rect, { width: 48, height: 48, fill: "url(#paint0_radial_1533_187044)" }),
        React.createElement(Rect, { x: 10, y: 10, width: 10, height: 10, fill: "red" }),
        React.createElement(Defs, null,
            React.createElement(RadialGradient, { id: "paint0_radial_1533_187044", cx: 0, cy: 0, r: 20, gradientUnits: "userSpaceOnUse", gradientTransform: "translate(22 11)" },
                React.createElement(Stop, { offset: 0.0598494, stopColor: "#FF0000" }),
                React.createElement(Stop, { offset: 1, stopColor: "#00FF00" })))));
};
var RectCircleTest = function () {
    return (React.createElement(Svg, { height: "200", width: "200", accessible: true, accessibilityLabel: "SVG Rect and Circle Test", accessibilityRole: "image" },
        React.createElement(Defs, null,
            React.createElement(G, { id: "shape" },
                React.createElement(G, null,
                    React.createElement(Rect, { x: "120", y: "120", width: "20", height: "50", fill: "red" }),
                    React.createElement(Circle, { cx: "100", cy: "100", r: "20", fill: "blue", stroke: "black" })))),
        React.createElement(Use, { href: "#shape", x: "20", y: "0" }),
        React.createElement(Use, { href: "#shape", x: "170", y: "0" })));
};
var BundledSvgTest = function () {
    return (React.createElement(TestSvg, { width: 200, height: 200, color: "red", accessible: true, accessibilityLabel: "SVG Bundled svg Test", accessibilityRole: "image" }));
};
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(View, null,
        React.createElement(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" }),
        shouldShowLocalNetwork && (React.createElement(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", accessible: true, accessibilityLabel: "SVG Uri Test", accessibilityRole: "image" }))));
};
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 = useState(defaultxml), inputText = _a[0], setInputText = _a[1];
    var _b = useState(defaultxml), svgText = _b[0], setSvgText = _b[1];
    var _c = useState('click draw to see parsed data'), dataText = _c[0], setDataText = _c[1];
    var _d = useState(false), showParse = _d[0], setShowParsed = _d[1];
    var handleChangeText = React.useCallback(function (text) {
        setInputText(text);
    }, [setInputText]);
    var handleDrawOnClick = React.useCallback(function () {
        var parsed = 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(View, null,
        React.createElement(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(TextInput, { multiline: true, accessibilityLabel: "Custom svg text input", value: inputText, style: textInputStyle, onChangeText: handleChangeText }),
        React.createElement(View, { style: { flexDirection: 'row' } },
            React.createElement(Button, { onClick: handleDrawOnClick }, "Draw"),
            React.createElement(ToggleButton, { onClick: handleShowParsed }, "Toggle Parsed data")),
        React.createElement(Separator, null),
        showParse && React.createElement(Text, null, dataText),
        React.createElement(SvgXml, { width: "256", height: "256", xml: svgText, accessible: true, accessibilityLabel: "Custom Svg Test", accessibilityRole: "image" })));
};
var svgSections = [
    {
        name: 'Custom Svg Input',
        component: CustomSvgInputTest,
        testID: 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,
    },
];
export var SvgTest = function () {
    var status = {
        win32Status: 'Production',
        uwpStatus: 'Production',
        iosStatus: 'Production',
        macosStatus: 'Production',
        androidStatus: 'Production',
    };
    var description = 'No description.';
    return React.createElement(Test, { name: "Svg Test", description: description, sections: svgSections, status: status });
};
//# sourceMappingURL=SvgTest.js.map