"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.VibrancyViewTest = 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 stack_1 = require("@fluentui-react-native/stack");
var vibrancy_view_1 = require("@fluentui-react-native/vibrancy-view");
var consts_1 = require("../../../../E2E/src/VibrancyView/consts");
var MenuPicker_1 = require("../Common/MenuPicker");
var styles_1 = require("../Common/styles");
var Test_1 = require("../Test");
var styles = react_native_1.StyleSheet.create({
    row: {
        flex: 1,
        flexDirection: 'row',
    },
    box: {
        width: 100,
        height: 100,
        justifyContent: 'center',
        alignItems: 'center',
    },
    bigBox: {
        width: 200,
        height: 200,
        justifyContent: 'center',
        alignItems: 'center',
    },
    biggerBox: {
        backgroundColor: 'yellow',
        width: 300,
        height: 300,
        justifyContent: 'center',
        alignItems: 'center',
    },
    Rectangle1: {
        backgroundColor: 'yellow',
        width: 300,
        height: 300,
    },
    Rectangle2: {
        position: 'absolute',
        top: 50,
        width: 400,
        height: 200,
    },
    centeredBox: {
        backgroundColor: 'green',
        width: 100,
        height: 100,
        justifyContent: 'center',
        alignItems: 'center',
    },
    borderProps: {
        backgroundColor: 'blue',
        borderColor: 'red',
        borderWidth: 1,
        borderRadius: 8,
    },
    rootWithSpacing: tslib_1.__assign(tslib_1.__assign({}, styles_1.commonTestStyles.root), { gap: 8 }),
});
var VibrancyViewDefault = function () {
    return (React.createElement(stack_1.Stack, { style: styles_1.stackStyle },
        React.createElement(react_native_1.View, { style: styles.rootWithSpacing },
            React.createElement(react_native_2.Text, null, "Vibrancy View with no props set"),
            React.createElement(vibrancy_view_1.VibrancyView, { style: styles.box }))));
};
var VibrancyViewWithViewProps = function () {
    var descriptionString = '<View> and <VibrancyView> with the backgroundColor, borderColor, borderWidth, borderRadius set';
    var viewProps = React.useMemo(function () {
        return {
            focusable: true,
            style: [styles.box, styles.borderProps],
        };
    }, []);
    return (React.createElement(stack_1.Stack, { style: styles_1.stackStyle },
        React.createElement(react_native_1.View, { style: styles.rootWithSpacing },
            React.createElement(react_native_2.Text, null, descriptionString),
            React.createElement(react_native_1.View, { style: styles.row },
                React.createElement(react_native_1.View, tslib_1.__assign({}, viewProps)),
                React.createElement(vibrancy_view_1.VibrancyView, tslib_1.__assign({}, viewProps))))));
};
var materialSelections = [
    'titlebar',
    'selection',
    'menu',
    'popover',
    'sidebar',
    'headerview',
    'sheet',
    'windowbackground',
    'hudWindow',
    'fullScreenUI',
    'toolTip',
    'contentBackground',
    'underWindowBackground',
    'underPageBackground',
];
var materialsCollection = materialSelections.map(function (material) {
    return {
        label: material,
        value: material,
    };
});
var blendingModeSelections = ['withinWindow', 'behindWindow'];
var blendingModeCollection = blendingModeSelections.map(function (material) {
    return {
        label: material,
        value: material,
    };
});
var stateSelections = ['followsWindowActiveState', 'active', 'inactive'];
var stateCollection = stateSelections.map(function (material) {
    return {
        label: material,
        value: material,
    };
});
var VibrancyViewWithVibrancyViewProps = function () {
    var _a = React.useState(undefined), material = _a[0], setMaterial = _a[1];
    var _b = React.useState(undefined), blendingMode = _b[0], setBlendingMode = _b[1];
    var _c = React.useState(undefined), state = _c[0], setState = _c[1];
    var onMaterialChange = React.useCallback(function (material) {
        setMaterial(material);
    }, []);
    var onBlendingModeChange = React.useCallback(function (blendingMode) {
        setBlendingMode(blendingMode);
    }, []);
    var onStateChange = React.useCallback(function (state) {
        setState(state);
    }, []);
    return (React.createElement(stack_1.Stack, { style: styles_1.stackStyle },
        React.createElement(react_native_1.View, { style: styles.Rectangle1 },
            React.createElement(vibrancy_view_1.VibrancyView, { material: material, blendingMode: blendingMode, state: state, style: styles.Rectangle2 },
                React.createElement(MenuPicker_1.MenuPicker, { prompt: "Material", selected: material || 'undefined', onChange: onMaterialChange, collection: materialsCollection }),
                React.createElement(MenuPicker_1.MenuPicker, { prompt: "Blending Mode", selected: blendingMode || 'undefined', onChange: onBlendingModeChange, collection: blendingModeCollection }),
                React.createElement(MenuPicker_1.MenuPicker, { prompt: "State", selected: state || 'undefined', onChange: onStateChange, collection: stateCollection })))));
};
var HitTestButton = function (props) {
    var onClick = React.useCallback(function (_e) {
        react_native_1.Alert.alert(props.title);
    }, [props]);
    return React.createElement(react_native_2.ButtonV1, { onClick: onClick }, props.title);
};
var VibrancyViewHitTest = function () {
    return (React.createElement(react_native_1.View, { style: styles_1.commonTestStyles.root },
        React.createElement(HitTestButton, { title: 'Button 1' }),
        React.createElement(vibrancy_view_1.VibrancyView, { style: styles.biggerBox },
            React.createElement(HitTestButton, { title: 'Button 2' }),
            React.createElement(react_native_1.View, { style: styles.centeredBox },
                React.createElement(HitTestButton, { title: 'Button 3' })),
            React.createElement(HitTestButton, { title: 'Button 4' })),
        React.createElement(HitTestButton, { title: 'Button 5' })));
};
var VibrancyViewSections = [
    {
        name: 'VibrancyView Default',
        testID: consts_1.VIBRANCYVIEW_TESTPAGE,
        component: VibrancyViewDefault,
    },
    {
        name: 'VibrancyView with View props',
        component: VibrancyViewWithViewProps,
    },
    {
        name: 'VibrancyView with VibrancyView props',
        component: VibrancyViewWithVibrancyViewProps,
    },
    {
        name: 'VibrancyView Hit Test',
        component: VibrancyViewHitTest,
    },
];
var VibrancyViewTest = function () {
    var status = {
        win32Status: 'N/A',
        uwpStatus: 'N/A',
        iosStatus: 'Backlog',
        macosStatus: 'Beta',
        androidStatus: 'N/A',
    };
    var description = 'VibrancyView is a native module that exposes NSVisualEffectView to React Native on macOS';
    return React.createElement(Test_1.Test, { name: "VibrancyView Test", description: description, sections: VibrancyViewSections, status: status });
};
exports.VibrancyViewTest = VibrancyViewTest;
//# sourceMappingURL=VibrancyViewTest.js.map