"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.PressableTest = void 0;
const React = __importStar(require("react"));
const react_native_1 = require("react-native");
const react_native_2 = require("@fluentui/react-native");
const e2e_testing_1 = require("@fluentui-react-native/e2e-testing");
const interactive_hooks_1 = require("@fluentui-react-native/interactive-hooks");
const stack_1 = require("@fluentui-react-native/stack");
const Square_1 = require("../Common/Square");
const Test_1 = require("../Test");
const 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 */
const FocusComponent = () => {
    const [focusProps, focusState] = (0, interactive_hooks_1.useFocusState)({});
    return (React.createElement(stack_1.Stack, { focusable: false },
        React.createElement(react_native_1.View, { focusable: true, ...focusProps, style: focusState.focused ? styles.focused : styles.notfocused })));
};
/* Pressable that only has pressState */
const PressComponent = (props) => {
    const [pressProps, pressState] = (0, interactive_hooks_1.usePressState)(props);
    const onTouchEnd = React.useCallback((e) => {
        pressProps.onTouchEnd && pressProps.onTouchEnd(e);
        react_native_1.Alert.alert('Alert.', 'Object has been pressed.');
    }, [pressProps]);
    const onInvoke = React.useCallback(() => {
        react_native_1.Alert.alert('Alert.', 'Object has been pressed.');
    }, []);
    return (React.createElement(stack_1.Stack, { focusable: false },
        React.createElement(react_native_1.View, { accessible: true, accessibilityLabel: 'Press to alert', onAccessibilityTap: onInvoke, accessibilityRole: "button", focusable: true, ...pressProps, onTouchEnd: onTouchEnd, style: pressState.pressed ? styles.pressed : styles.notPressed })));
};
const PressableMainTest = () => {
    const [hoverProps, hoverState] = (0, interactive_hooks_1.useHoverState)({});
    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, { ...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))));
};
const pressableSections = [
    {
        name: 'Pressable Components',
        testID: e2e_testing_1.PRESSABLE_TESTPAGE,
        component: PressableMainTest,
    },
];
const PressableTest = () => {
    const status = {
        win32Status: 'Deprecated',
        uwpStatus: 'Deprecated',
        iosStatus: 'Deprecated',
        macosStatus: 'Deprecated',
        androidStatus: 'Deprecated',
    };
    const 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