"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.VibrancyViewTest = 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 stack_1 = require("@fluentui-react-native/stack");
const vibrancy_view_1 = require("@fluentui-react-native/vibrancy-view");
const MenuPicker_1 = require("../Common/MenuPicker");
const styles_1 = require("../Common/styles");
const Test_1 = require("../Test");
const 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: { ...styles_1.commonTestStyles.root, gap: 8 },
});
const VibrancyViewDefault = () => {
    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 }))));
};
const VibrancyViewWithViewProps = () => {
    const descriptionString = '<View> and <VibrancyView> with the backgroundColor, borderColor, borderWidth, borderRadius set';
    const viewProps = React.useMemo(() => {
        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, { ...viewProps }),
                React.createElement(vibrancy_view_1.VibrancyView, { ...viewProps })))));
};
const materialSelections = [
    'titlebar',
    'selection',
    'menu',
    'popover',
    'sidebar',
    'headerview',
    'sheet',
    'windowbackground',
    'hudWindow',
    'fullScreenUI',
    'toolTip',
    'contentBackground',
    'underWindowBackground',
    'underPageBackground',
];
const materialsCollection = materialSelections.map((material) => {
    return {
        label: material,
        value: material,
    };
});
const blendingModeSelections = ['withinWindow', 'behindWindow'];
const blendingModeCollection = blendingModeSelections.map((material) => {
    return {
        label: material,
        value: material,
    };
});
const stateSelections = ['followsWindowActiveState', 'active', 'inactive'];
const stateCollection = stateSelections.map((material) => {
    return {
        label: material,
        value: material,
    };
});
const VibrancyViewWithVibrancyViewProps = () => {
    const [material, setMaterial] = React.useState(undefined);
    const [blendingMode, setBlendingMode] = React.useState(undefined);
    const [state, setState] = React.useState(undefined);
    const onMaterialChange = React.useCallback((material) => {
        setMaterial(material);
    }, []);
    const onBlendingModeChange = React.useCallback((blendingMode) => {
        setBlendingMode(blendingMode);
    }, []);
    const onStateChange = React.useCallback((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 })))));
};
const HitTestButton = (props) => {
    const onClick = React.useCallback((_e) => {
        react_native_1.Alert.alert(props.title);
    }, [props]);
    return React.createElement(react_native_2.ButtonV1, { onClick: onClick }, props.title);
};
const VibrancyViewHitTest = () => {
    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' })));
};
const VibrancyViewSections = [
    {
        name: 'VibrancyView Default',
        testID: e2e_testing_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,
    },
];
const VibrancyViewTest = () => {
    const status = {
        win32Status: 'N/A',
        uwpStatus: 'N/A',
        iosStatus: 'Backlog',
        macosStatus: 'Beta',
        androidStatus: 'N/A',
    };
    const 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