import * as React from 'react';
import { Alert, View, StyleSheet, Text, TextInput } from 'react-native';
import { Platform } from 'react-native';
import { LinkV1 as Link } from '@fluentui/react-native';
import { LINKV1_TESTPAGE } from '@fluentui-react-native/e2e-testing';
import { Stack } from '@fluentui-react-native/stack';
import { E2ELinkV1Test } from './E2ELinkV1Test';
import { InlineLinks } from './InlineLinksTest';
import { stackStyle, commonTestStyles as commonStyles } from '../Common/styles';
import { Test } from '../Test';
const DefaultLinks = () => {
    const doPress = React.useCallback(() => Alert.alert('Alert.', 'You have been alerted.'), []);
    const doAllyTap = React.useCallback(() => Alert.alert('Alert.', 'You have invoked onAllyTap.'), []);
    return (React.createElement(Stack, { style: stackStyle },
        React.createElement(Link, { tooltip: 'https://www.bing.com/', url: "https://www.bing.com/" }, "Click to navigate."),
        React.createElement(Link, { onPress: doPress, onAccessibilityTap: doAllyTap }, "Click to alert."),
        React.createElement(Link, { disabled: true }, "Disabled Link")));
};
const SubtleLinks = () => {
    const doPress = React.useCallback(() => Alert.alert('Alert.', 'You have been alerted.'), []);
    const doAllyTap = React.useCallback(() => Alert.alert('Alert.', 'You have invoked onAllyTap.'), []);
    const supportsInlineLink = Platform.OS !== 'win32';
    return (React.createElement(Stack, { style: stackStyle },
        React.createElement(Link, { appearance: "subtle", url: "https://www.bing.com/" }, "Click to navigate."),
        supportsInlineLink && (React.createElement(Text, null,
            "This is inline Link.",
            ' ',
            React.createElement(Link, { appearance: "subtle", inline: true, onPress: doPress, onAccessibilityTap: doAllyTap }, "Click to alert."))),
        React.createElement(Link, { appearance: "subtle", onPress: doPress, disabled: true }, "Disabled Link")));
};
const styles = StyleSheet.create({
    tokensRow: {
        flexDirection: 'row',
        marginBottom: 10,
    },
    tokensColumn: {
        flexDirection: 'column',
        margin: 10,
    },
});
const BlueHeaderBold = Link.customize({ variant: 'headerStandard', fontWeight: '700', color: '#0229c4', textAlign: 'right' });
const CustomLinks = () => {
    const [linkColor, setLinkColor] = React.useState('blue');
    const [linkFont, setLinkFont] = React.useState('Ariel');
    const [linkFontSize, setLinkFontSize] = React.useState(12);
    const [linkText, setLinkText] = React.useState('Click to Navigate');
    const [linkUrl, setLinkUrl] = React.useState('https://www.bing.com/');
    const CustomLink = React.useMemo(() => {
        const tokens = {
            color: linkColor,
            fontFamily: linkFont,
            fontSize: linkFontSize,
        };
        return Link.customize(tokens);
    }, [linkColor, linkFont, linkFontSize]);
    return (React.createElement(View, { style: styles.tokensColumn },
        React.createElement(View, { style: styles.tokensRow },
            React.createElement(View, null,
                React.createElement(Text, null, "Text Tokens"),
                React.createElement(TextInput, { accessibilityLabel: "Link color", style: commonStyles.textBox, placeholder: "Link color", blurOnSubmit: true, onSubmitEditing: (e) => {
                        setLinkColor(e.nativeEvent.text);
                    } }),
                React.createElement(TextInput, { accessibilityLabel: "Link font", style: commonStyles.textBox, placeholder: "Link font", blurOnSubmit: true, onSubmitEditing: (e) => {
                        setLinkFont(e.nativeEvent.text);
                    } }),
                React.createElement(TextInput, { accessibilityLabel: "Link font size", style: commonStyles.textBox, placeholder: "Link font size", blurOnSubmit: true, onSubmitEditing: (e) => {
                        setLinkFontSize(parseInt(e.nativeEvent.text));
                    } })),
            React.createElement(View, null,
                React.createElement(Text, null, "Content and URL customize"),
                React.createElement(TextInput, { accessibilityLabel: "Link text", style: commonStyles.textBox, placeholder: "Link text", blurOnSubmit: true, onSubmitEditing: (e) => {
                        setLinkText(e.nativeEvent.text);
                    } }),
                React.createElement(TextInput, { accessibilityLabel: "Link Url", style: commonStyles.textBox, placeholder: "Link URL", blurOnSubmit: true, onSubmitEditing: (e) => {
                        setLinkUrl(e.nativeEvent.text);
                    } }))),
        React.createElement(CustomLink, { align: "end", url: linkUrl }, linkText),
        React.createElement(BlueHeaderBold, null, "BlueHeaderBold")));
};
const linkSections = [
    {
        name: 'Default Links',
        testID: LINKV1_TESTPAGE,
        component: DefaultLinks,
    },
    {
        name: 'Inline Links',
        component: InlineLinks,
    },
    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,
        },
    }),
    Platform.select({
        android: null,
        default: {
            name: 'Custom Link',
            component: CustomLinks,
        },
    }),
];
const e2eSections = [
    {
        name: 'Link E2E Test',
        component: E2ELinkV1Test,
    },
];
export const LinkV1Test = () => {
    const status = {
        win32Status: 'Production',
        uwpStatus: 'Backlog',
        iosStatus: 'Production',
        macosStatus: 'Production',
        androidStatus: 'Production',
    };
    const 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, { name: "LinkV1 Test", description: description, sections: linkSections, status: status, e2eSections: e2eSections });
};
//# sourceMappingURL=LinkV1Test.js.map