"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.NotificationTest = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const react_native_1 = require("react-native");
const button_1 = require("@fluentui-react-native/button");
const notification_1 = require("@fluentui-react-native/notification");
const text_1 = require("@fluentui-react-native/text");
const play_button_svg_1 = tslib_1.__importDefault(require("../../../assets/play_button.svg"));
const StyledPicker_1 = require("../Common/StyledPicker");
const styles_1 = require("../Common/styles");
const Test_1 = require("../Test");
const svgProps = {
    src: play_button_svg_1.default,
};
const iconProps = { svgSource: svgProps };
const SHOW_HEIGHT = -50;
const BAR_SHOW_DURATION = 300;
const HIDE_DURATION = 250;
const AUTO_HIDE_DURATION = 3000;
const USE_NATIVE_DRIVER_IOS = true;
const styles = react_native_1.StyleSheet.create({
    button: {
        alignSelf: 'center',
        marginBottom: 50,
    },
    notification: {
        marginTop: 10,
    },
    textInput: {
        borderWidth: 1,
    },
});
const CustomToast = () => {
    const [variant, setVariant] = React.useState('primary');
    const [title, setTitle] = React.useState("Kat's iPhoneX");
    const [message, setMessage] = React.useState('Listen to Emails • 7 mins');
    const [action, setAction] = React.useState('Listen');
    const [showIcon, setShowIcon] = React.useState(true);
    const [showTitle, setShowTitle] = React.useState(true);
    return (React.createElement(react_native_1.View, null,
        React.createElement(StyledPicker_1.StyledPicker, { prompt: "Variant", selected: variant, onChange: setVariant, collection: notification_1.NotificationVariants.filter((variant) => !variant.endsWith('Bar')) }),
        React.createElement(react_native_1.TextInput, { value: title, onChangeText: setTitle, style: styles.textInput }),
        React.createElement(react_native_1.TextInput, { value: message, onChangeText: setMessage, style: styles.textInput }),
        React.createElement(react_native_1.TextInput, { value: action, onChangeText: setAction, style: styles.textInput }),
        React.createElement(react_native_1.View, { style: styles_1.commonTestStyles.switch },
            React.createElement(text_1.TextV1, null, "Show icon "),
            React.createElement(react_native_1.Switch, { value: showIcon, onValueChange: setShowIcon })),
        React.createElement(react_native_1.View, { style: styles_1.commonTestStyles.switch },
            React.createElement(text_1.TextV1, null, "Show title "),
            React.createElement(react_native_1.Switch, { value: showTitle, onValueChange: setShowTitle })),
        React.createElement(react_native_1.View, { style: styles.notification },
            React.createElement(notification_1.Notification, { variant: variant, icon: showIcon ? iconProps : undefined, title: showTitle ? title : undefined, action: action, onPress: () => {
                    console.log('Notification tapped');
                }, onActionPress: () => {
                    console.log('Notification action tapped');
                } }, message))));
};
const CustomBar = () => {
    const [variant, setVariant] = React.useState('primaryBar');
    const [message, setMessage] = React.useState('Updating...');
    return (React.createElement(react_native_1.View, null,
        React.createElement(StyledPicker_1.StyledPicker, { prompt: "Variant", selected: variant, onChange: setVariant, collection: notification_1.NotificationVariants.filter((variant) => variant.endsWith('Bar')) }),
        React.createElement(react_native_1.TextInput, { value: message, onChangeText: setMessage, style: styles.textInput }),
        React.createElement(react_native_1.View, { style: styles.notification },
            React.createElement(notification_1.Notification, { variant: variant, onPress: () => {
                    console.log('Notification tapped');
                } }, message))));
};
const PrimaryWithAutoHide = () => {
    const [visible, setVisible] = React.useState(true);
    const onButtonPress = () => setVisible(!visible);
    const [hidden, setHidden] = React.useState(!visible);
    const height = React.useRef(new react_native_1.Animated.Value(0)).current;
    const show = React.useCallback(() => {
        setHidden(false);
        react_native_1.Animated.sequence([
            react_native_1.Animated.spring(height, {
                toValue: SHOW_HEIGHT,
                bounciness: 16,
                speed: 20,
                useNativeDriver: USE_NATIVE_DRIVER_IOS,
            }),
            react_native_1.Animated.delay(AUTO_HIDE_DURATION),
            react_native_1.Animated.timing(height, {
                toValue: 0,
                duration: HIDE_DURATION,
                useNativeDriver: USE_NATIVE_DRIVER_IOS,
            }),
        ]).start(() => {
            setHidden(true);
            setVisible(false);
        });
    }, [height]);
    const hide = React.useCallback(() => {
        react_native_1.Animated.timing(height, {
            toValue: 0,
            duration: HIDE_DURATION,
            useNativeDriver: USE_NATIVE_DRIVER_IOS,
        }).start(() => {
            setHidden(true);
        });
    }, [height]);
    React.useLayoutEffect(() => {
        if (visible) {
            show();
        }
        else {
            hide();
        }
    }, [visible, show, hide]);
    const animatedViewProps = {
        transform: [{ translateY: height }],
    };
    return (React.createElement(react_native_1.View, null,
        React.createElement(button_1.ButtonV1, { appearance: "subtle", onClick: onButtonPress, style: styles.button }, visible ? 'Hide' : 'Show'),
        !hidden && (React.createElement(react_native_1.Animated.View, { style: animatedViewProps },
            React.createElement(notification_1.Notification, { variant: 'primary', action: "Undo", onPress: () => {
                    console.log('Notification tapped');
                }, onActionPress: () => {
                    console.log('Undo tapped');
                } }, "Mail Archived")))));
};
const PrimaryBarWithAutoHide = () => {
    const [visible, setVisible] = React.useState(true);
    const onButtonPress = () => setVisible(!visible);
    const [hidden, setHidden] = React.useState(!visible);
    const height = React.useRef(new react_native_1.Animated.Value(0)).current;
    const show = () => {
        setHidden(false);
        react_native_1.Animated.sequence([
            react_native_1.Animated.timing(height, {
                toValue: SHOW_HEIGHT,
                duration: BAR_SHOW_DURATION,
                useNativeDriver: USE_NATIVE_DRIVER_IOS,
            }),
            react_native_1.Animated.delay(AUTO_HIDE_DURATION),
            react_native_1.Animated.timing(height, {
                toValue: 0,
                duration: HIDE_DURATION,
                useNativeDriver: USE_NATIVE_DRIVER_IOS,
            }),
        ]).start(() => {
            setHidden(true);
            setVisible(false);
        });
    };
    const hide = () => {
        react_native_1.Animated.timing(height, {
            toValue: 0,
            duration: HIDE_DURATION,
            useNativeDriver: USE_NATIVE_DRIVER_IOS,
        }).start(() => {
            setHidden(true);
        });
    };
    React.useLayoutEffect(() => {
        if (visible) {
            show();
        }
        else {
            hide();
        }
    }, [visible, height]);
    const animatedViewProps = {
        transform: [{ translateY: height }],
    };
    return (React.createElement(react_native_1.View, null,
        React.createElement(button_1.ButtonV1, { appearance: "subtle", onClick: onButtonPress, style: styles.button }, visible ? 'Hide' : 'Show'),
        !hidden && (React.createElement(react_native_1.Animated.View, { style: animatedViewProps },
            React.createElement(notification_1.Notification, { variant: 'primaryBar', onPress: () => {
                    console.log('Notification tapped');
                } }, "Mail Sent")))));
};
const notificationSections = [
    {
        name: 'Custom Toast',
        component: CustomToast,
    },
    {
        name: 'Custom Bar',
        component: CustomBar,
    },
    {
        name: 'Primary with auto-hide',
        component: PrimaryWithAutoHide,
    },
    {
        name: 'Primary Bar with auto-hide',
        component: PrimaryBarWithAutoHide,
    },
];
const NotificationTest = () => {
    const status = {
        win32Status: 'Backlog',
        uwpStatus: 'Backlog',
        iosStatus: 'Production',
        macosStatus: 'Backlog',
        androidStatus: 'Backlog',
    };
    const description = 'Testing notification component';
    const spec = 'https://github.com/microsoft/fluentui-react-native/blob/main/packages/components/Notification/SPEC.md';
    return React.createElement(Test_1.Test, { name: "Notification Test", description: description, spec: spec, sections: notificationSections, status: status });
};
exports.NotificationTest = NotificationTest;
//# sourceMappingURL=NotificationTest.js.map