import * as React from 'react';
import { Alert, StyleSheet, View } from 'react-native';
import { ButtonV1 as Button, Text } from '@fluentui/react-native';
import { VIBRANCYVIEW_TESTPAGE } from '@fluentui-react-native/e2e-testing';
import { Stack } from '@fluentui-react-native/stack';
import { VibrancyView } from '@fluentui-react-native/vibrancy-view';
import { MenuPicker } from '../Common/MenuPicker';
import { stackStyle, commonTestStyles as commonStyles } from '../Common/styles';
import { Test } from '../Test';
const styles = 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: { ...commonStyles.root, gap: 8 },
});
const VibrancyViewDefault = () => {
    return (React.createElement(Stack, { style: stackStyle },
        React.createElement(View, { style: styles.rootWithSpacing },
            React.createElement(Text, null, "Vibrancy View with no props set"),
            React.createElement(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, { style: stackStyle },
        React.createElement(View, { style: styles.rootWithSpacing },
            React.createElement(Text, null, descriptionString),
            React.createElement(View, { style: styles.row },
                React.createElement(View, { ...viewProps }),
                React.createElement(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, { style: stackStyle },
        React.createElement(View, { style: styles.Rectangle1 },
            React.createElement(VibrancyView, { material: material, blendingMode: blendingMode, state: state, style: styles.Rectangle2 },
                React.createElement(MenuPicker, { prompt: "Material", selected: material || 'undefined', onChange: onMaterialChange, collection: materialsCollection }),
                React.createElement(MenuPicker, { prompt: "Blending Mode", selected: blendingMode || 'undefined', onChange: onBlendingModeChange, collection: blendingModeCollection }),
                React.createElement(MenuPicker, { prompt: "State", selected: state || 'undefined', onChange: onStateChange, collection: stateCollection })))));
};
const HitTestButton = (props) => {
    const onClick = React.useCallback((_e) => {
        Alert.alert(props.title);
    }, [props]);
    return React.createElement(Button, { onClick: onClick }, props.title);
};
const VibrancyViewHitTest = () => {
    return (React.createElement(View, { style: commonStyles.root },
        React.createElement(HitTestButton, { title: 'Button 1' }),
        React.createElement(VibrancyView, { style: styles.biggerBox },
            React.createElement(HitTestButton, { title: 'Button 2' }),
            React.createElement(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: VIBRANCYVIEW_TESTPAGE,
        component: VibrancyViewDefault,
    },
    {
        name: 'VibrancyView with View props',
        component: VibrancyViewWithViewProps,
    },
    {
        name: 'VibrancyView with VibrancyView props',
        component: VibrancyViewWithVibrancyViewProps,
    },
    {
        name: 'VibrancyView Hit Test',
        component: VibrancyViewHitTest,
    },
];
export 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, { name: "VibrancyView Test", description: description, sections: VibrancyViewSections, status: status });
};
//# sourceMappingURL=VibrancyViewTest.js.map