import { __assign } from "tslib";
import * as React from 'react';
import { Alert, StyleSheet, View, Text } from 'react-native';
import { Pressable } from '@fluentui/react-native';
import { useFocusState, useHoverState, usePressState } from '@fluentui-react-native/interactive-hooks';
import { Stack } from '@fluentui-react-native/stack';
import { PRESSABLE_TESTPAGE } from '../../../../E2E/src/Pressable/consts';
import { Square } from '../Common/Square';
import { Test } from '../Test';
var styles = StyleSheet.create({
    dottedBorder: {
        borderWidth: 1,
        padding: 8,
        margin: 4,
        borderStyle: 'dotted',
        borderColor: 'red',
    },
    solidBorder: {
        borderWidth: 1,
        padding: 8,
        margin: 4,
        borderStyle: 'solid',
        borderColor: 'black',
    },
    notfocused: {
        borderWidth: 1,
        padding: 8,
        margin: 4,
        borderColor: '#ababab',
        borderStyle: 'solid',
    },
    focused: {
        borderWidth: 1,
        padding: 8,
        margin: 4,
        borderStyle: 'solid',
        borderColor: 'black',
        backgroundColor: 'lightblue',
    },
    notPressed: {
        borderWidth: 1,
        padding: 8,
        margin: 4,
        width: 30,
        height: 30,
        borderColor: '#ababab',
        borderStyle: 'solid',
    },
    pressed: {
        borderWidth: 1,
        padding: 8,
        margin: 4,
        width: 30,
        height: 30,
        borderStyle: 'dashed',
        borderColor: 'black',
        backgroundColor: 'lightgreen',
    },
});
function renderStyle(state) {
    return (state.pressed && { opacity: 0.5 }) || {};
}
/* Pressable that only has focusState */
var FocusComponent = function () {
    var _a = useFocusState({}), focusProps = _a[0], focusState = _a[1];
    return (React.createElement(Stack, { focusable: false },
        React.createElement(View, __assign({ focusable: true }, focusProps, { style: focusState.focused ? styles.focused : styles.notfocused }))));
};
/* Pressable that only has pressState */
var PressComponent = function (props) {
    var _a = usePressState(props), pressProps = _a[0], pressState = _a[1];
    var onTouchEnd = React.useCallback(function (e) {
        pressProps.onTouchEnd && pressProps.onTouchEnd(e);
        Alert.alert('Alert.', 'Object has been pressed.');
    }, [pressProps]);
    var onInvoke = React.useCallback(function () {
        Alert.alert('Alert.', 'Object has been pressed.');
    }, []);
    return (React.createElement(Stack, { focusable: false },
        React.createElement(View, __assign({ accessible: true, accessibilityLabel: 'Press to alert', onAccessibilityTap: onInvoke, accessibilityRole: "button", focusable: true }, pressProps, { onTouchEnd: onTouchEnd, style: pressState.pressed ? styles.pressed : styles.notPressed }))));
};
var PressableMainTest = function () {
    var _a = useHoverState({}), hoverProps = _a[0], hoverState = _a[1];
    return (React.createElement(Stack, { horizontal: true, gap: 5 },
        React.createElement(Square, { color: "blue" }),
        React.createElement(Pressable, { renderStyle: renderStyle },
            React.createElement(Square, null)),
        React.createElement(Square, { color: "green" }),
        React.createElement(Stack, null,
            React.createElement(View, __assign({}, hoverProps, { style: hoverState.hovered ? styles.dottedBorder : styles.solidBorder }),
                React.createElement(Text, null, hoverState.hovered ? 'hovered' : 'not hovered'))),
        React.createElement(Stack, null,
            React.createElement(Text, null, "Click a component to initially focus and tab to keyboard focus to next component: "),
            React.createElement(FocusComponent, null),
            React.createElement(FocusComponent, null),
            React.createElement(FocusComponent, null),
            React.createElement(FocusComponent, null)),
        React.createElement(Stack, null,
            React.createElement(Text, null, "Press to alert: "),
            React.createElement(PressComponent, null))));
};
var pressableSections = [
    {
        name: 'Pressable Components',
        testID: PRESSABLE_TESTPAGE,
        component: PressableMainTest,
    },
];
export var PressableTest = function () {
    var status = {
        win32Status: 'Deprecated',
        uwpStatus: 'Deprecated',
        iosStatus: 'Deprecated',
        macosStatus: 'Deprecated',
        androidStatus: 'Deprecated',
    };
    var description = 'No description.';
    return React.createElement(Test, { name: "Pressable Test", description: description, sections: pressableSections, status: status });
};
//# sourceMappingURL=PressableTest.js.map