"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.LinkV1Test = void 0;
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var react_native_1 = require("react-native");
var react_native_2 = require("react-native");
var react_native_3 = require("@fluentui/react-native");
var stack_1 = require("@fluentui-react-native/stack");
var E2ELinkV1Test_1 = require("./E2ELinkV1Test");
var InlineLinksTest_1 = require("./InlineLinksTest");
var consts_1 = require("../../../../E2E/src/LinkV1/consts");
var styles_1 = require("../Common/styles");
var Test_1 = require("../Test");
var DefaultLinks = function () {
    var doPress = React.useCallback(function () { return react_native_1.Alert.alert('Alert.', 'You have been alerted.'); }, []);
    var doAllyTap = React.useCallback(function () { return react_native_1.Alert.alert('Alert.', 'You have invoked onAllyTap.'); }, []);
    return (React.createElement(stack_1.Stack, { style: styles_1.stackStyle },
        React.createElement(react_native_3.LinkV1, { tooltip: 'https://www.bing.com/', url: "https://www.bing.com/" }, "Click to navigate."),
        React.createElement(react_native_3.LinkV1, { onPress: doPress, onAccessibilityTap: doAllyTap }, "Click to alert."),
        React.createElement(react_native_3.LinkV1, { disabled: true }, "Disabled Link")));
};
var SubtleLinks = function () {
    var doPress = React.useCallback(function () { return react_native_1.Alert.alert('Alert.', 'You have been alerted.'); }, []);
    var doAllyTap = React.useCallback(function () { return react_native_1.Alert.alert('Alert.', 'You have invoked onAllyTap.'); }, []);
    var supportsInlineLink = react_native_2.Platform.OS !== 'win32';
    return (React.createElement(stack_1.Stack, { style: styles_1.stackStyle },
        React.createElement(react_native_3.LinkV1, { appearance: "subtle", url: "https://www.bing.com/" }, "Click to navigate."),
        supportsInlineLink && (React.createElement(react_native_1.Text, null,
            "This is inline Link.",
            ' ',
            React.createElement(react_native_3.LinkV1, { appearance: "subtle", inline: true, onPress: doPress, onAccessibilityTap: doAllyTap }, "Click to alert."))),
        React.createElement(react_native_3.LinkV1, { appearance: "subtle", onPress: doPress, disabled: true }, "Disabled Link")));
};
var styles = react_native_1.StyleSheet.create({
    tokensRow: {
        flexDirection: 'row',
        marginBottom: 10,
    },
    tokensColumn: {
        flexDirection: 'column',
        margin: 10,
    },
});
var BlueHeaderBold = react_native_3.LinkV1.customize({ variant: 'headerStandard', fontWeight: '700', color: '#0229c4', textAlign: 'right' });
var CustomLinks = function () {
    var _a = React.useState('blue'), linkColor = _a[0], setLinkColor = _a[1];
    var _b = React.useState('Ariel'), linkFont = _b[0], setLinkFont = _b[1];
    var _c = React.useState(12), linkFontSize = _c[0], setLinkFontSize = _c[1];
    var _d = React.useState('Click to Navigate'), linkText = _d[0], setLinkText = _d[1];
    var _e = React.useState('https://www.bing.com/'), linkUrl = _e[0], setLinkUrl = _e[1];
    var CustomLink = React.useMemo(function () {
        var tokens = {
            color: linkColor,
            fontFamily: linkFont,
            fontSize: linkFontSize,
        };
        return react_native_3.LinkV1.customize(tokens);
    }, [linkColor, linkFont, linkFontSize]);
    return (React.createElement(react_native_1.View, { style: styles.tokensColumn },
        React.createElement(react_native_1.View, { style: styles.tokensRow },
            React.createElement(react_native_1.View, null,
                React.createElement(react_native_1.Text, null, "Text Tokens"),
                React.createElement(react_native_1.TextInput, { accessibilityLabel: "Link color", style: styles_1.commonTestStyles.textBox, placeholder: "Link color", blurOnSubmit: true, onSubmitEditing: function (e) {
                        setLinkColor(e.nativeEvent.text);
                    } }),
                React.createElement(react_native_1.TextInput, { accessibilityLabel: "Link font", style: styles_1.commonTestStyles.textBox, placeholder: "Link font", blurOnSubmit: true, onSubmitEditing: function (e) {
                        setLinkFont(e.nativeEvent.text);
                    } }),
                React.createElement(react_native_1.TextInput, { accessibilityLabel: "Link font size", style: styles_1.commonTestStyles.textBox, placeholder: "Link font size", blurOnSubmit: true, onSubmitEditing: function (e) {
                        setLinkFontSize(parseInt(e.nativeEvent.text));
                    } })),
            React.createElement(react_native_1.View, null,
                React.createElement(react_native_1.Text, null, "Content and URL customize"),
                React.createElement(react_native_1.TextInput, { accessibilityLabel: "Link text", style: styles_1.commonTestStyles.textBox, placeholder: "Link text", blurOnSubmit: true, onSubmitEditing: function (e) {
                        setLinkText(e.nativeEvent.text);
                    } }),
                React.createElement(react_native_1.TextInput, { accessibilityLabel: "Link Url", style: styles_1.commonTestStyles.textBox, placeholder: "Link URL", blurOnSubmit: true, onSubmitEditing: function (e) {
                        setLinkUrl(e.nativeEvent.text);
                    } }))),
        React.createElement(CustomLink, { align: "end", url: linkUrl }, linkText),
        React.createElement(BlueHeaderBold, null, "BlueHeaderBold")));
};
var linkSections = [
    {
        name: 'Default Links',
        testID: consts_1.LINKV1_TESTPAGE,
        component: DefaultLinks,
    },
    {
        name: 'Inline Links',
        component: InlineLinksTest_1.InlineLinks,
    },
    react_native_2.Platform.select({
        // As per design discussion, there is no use case for subtle link on Android, no tokens available for the same.
        android: null,
        default: {
            name: 'Subtle Links',
            component: SubtleLinks,
        },
    }),
    react_native_2.Platform.select({
        android: null,
        default: {
            name: 'Custom Link',
            component: CustomLinks,
        },
    }),
];
var e2eSections = [
    {
        name: 'Link E2E Test',
        component: E2ELinkV1Test_1.E2ELinkV1Test,
    },
];
var LinkV1Test = function () {
    var status = {
        win32Status: 'Production',
        uwpStatus: 'Backlog',
        iosStatus: 'Production',
        macosStatus: 'Production',
        androidStatus: 'Production',
    };
    var description = 'With a Link, users can navigate to another page, window, or Help topic; display a definition; initiate a command; or choose an option. A Link indicates that it can be clicked, typically by being displayed using the visited or unvisited link system colors. Traditionally, Links are underlined as well, but that approach is often unnecessary and falling out of favor to reduce visual clutter.\n\nA Link is the lightest weight clickable control, and is often used to reduce the visual complexity of a design.';
    return React.createElement(Test_1.Test, { name: "LinkV1 Test", description: description, sections: linkSections, status: status, e2eSections: e2eSections });
};
exports.LinkV1Test = LinkV1Test;
//# sourceMappingURL=LinkV1Test.js.map