"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PressableTest = 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("@fluentui/react-native");
var interactive_hooks_1 = require("@fluentui-react-native/interactive-hooks");
var stack_1 = require("@fluentui-react-native/stack");
var consts_1 = require("../../../../E2E/src/Pressable/consts");
var Square_1 = require("../Common/Square");
var Test_1 = require("../Test");
var styles = react_native_1.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 = (0, interactive_hooks_1.useFocusState)({}), focusProps = _a[0], focusState = _a[1];
    return (React.createElement(stack_1.Stack, { focusable: false },
        React.createElement(react_native_1.View, tslib_1.__assign({ focusable: true }, focusProps, { style: focusState.focused ? styles.focused : styles.notfocused }))));
};
/* Pressable that only has pressState */
var PressComponent = function (props) {
    var _a = (0, interactive_hooks_1.usePressState)(props), pressProps = _a[0], pressState = _a[1];
    var onTouchEnd = React.useCallback(function (e) {
        pressProps.onTouchEnd && pressProps.onTouchEnd(e);
        react_native_1.Alert.alert('Alert.', 'Object has been pressed.');
    }, [pressProps]);
    var onInvoke = React.useCallback(function () {
        react_native_1.Alert.alert('Alert.', 'Object has been pressed.');
    }, []);
    return (React.createElement(stack_1.Stack, { focusable: false },
        React.createElement(react_native_1.View, tslib_1.__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 = (0, interactive_hooks_1.useHoverState)({}), hoverProps = _a[0], hoverState = _a[1];
    return (React.createElement(stack_1.Stack, { horizontal: true, gap: 5 },
        React.createElement(Square_1.Square, { color: "blue" }),
        React.createElement(react_native_2.Pressable, { renderStyle: renderStyle },
            React.createElement(Square_1.Square, null)),
        React.createElement(Square_1.Square, { color: "green" }),
        React.createElement(stack_1.Stack, null,
            React.createElement(react_native_1.View, tslib_1.__assign({}, hoverProps, { style: hoverState.hovered ? styles.dottedBorder : styles.solidBorder }),
                React.createElement(react_native_1.Text, null, hoverState.hovered ? 'hovered' : 'not hovered'))),
        React.createElement(stack_1.Stack, null,
            React.createElement(react_native_1.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_1.Stack, null,
            React.createElement(react_native_1.Text, null, "Press to alert: "),
            React.createElement(PressComponent, null))));
};
var pressableSections = [
    {
        name: 'Pressable Components',
        testID: consts_1.PRESSABLE_TESTPAGE,
        component: PressableMainTest,
    },
];
var PressableTest = function () {
    var status = {
        win32Status: 'Deprecated',
        uwpStatus: 'Deprecated',
        iosStatus: 'Deprecated',
        macosStatus: 'Deprecated',
        androidStatus: 'Deprecated',
    };
    var description = 'No description.';
    return React.createElement(Test_1.Test, { name: "Pressable Test", description: description, sections: pressableSections, status: status });
};
exports.PressableTest = PressableTest;
//# sourceMappingURL=PressableTest.js.map