"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.NotificationTest = void 0;
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var react_native_1 = require("react-native");
var button_1 = require("@fluentui-react-native/button");
var notification_1 = require("@fluentui-react-native/notification");
var text_1 = require("@fluentui-react-native/text");
var play_button_svg_1 = tslib_1.__importDefault(require("./assets/play_button.svg"));
var StyledPicker_1 = require("../Common/StyledPicker");
var styles_1 = require("../Common/styles");
var Test_1 = require("../Test");
var svgProps = {
    src: play_button_svg_1.default,
};
var iconProps = { svgSource: svgProps };
var SHOW_HEIGHT = -50;
var BAR_SHOW_DURATION = 300;
var HIDE_DURATION = 250;
var AUTO_HIDE_DURATION = 3000;
var USE_NATIVE_DRIVER_IOS = true;
var styles = react_native_1.StyleSheet.create({
    button: {
        alignSelf: 'center',
        marginBottom: 50,
    },
    notification: {
        marginTop: 10,
    },
    textInput: {
        borderWidth: 1,
    },
});
var CustomToast = function () {
    var _a = React.useState('primary'), variant = _a[0], setVariant = _a[1];
    var _b = React.useState("Kat's iPhoneX"), title = _b[0], setTitle = _b[1];
    var _c = React.useState('Listen to Emails • 7 mins'), message = _c[0], setMessage = _c[1];
    var _d = React.useState('Listen'), action = _d[0], setAction = _d[1];
    var _e = React.useState(true), showIcon = _e[0], setShowIcon = _e[1];
    var _f = React.useState(true), showTitle = _f[0], setShowTitle = _f[1];
    return (React.createElement(react_native_1.View, null,
        React.createElement(StyledPicker_1.StyledPicker, { prompt: "Variant", selected: variant, onChange: setVariant, collection: notification_1.NotificationVariants.filter(function (variant) { return !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: function () {
                    console.log('Notification tapped');
                }, onActionPress: function () {
                    console.log('Notification action tapped');
                } }, message))));
};
var CustomBar = function () {
    var _a = React.useState('primaryBar'), variant = _a[0], setVariant = _a[1];
    var _b = React.useState('Updating...'), message = _b[0], setMessage = _b[1];
    return (React.createElement(react_native_1.View, null,
        React.createElement(StyledPicker_1.StyledPicker, { prompt: "Variant", selected: variant, onChange: setVariant, collection: notification_1.NotificationVariants.filter(function (variant) { return 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: function () {
                    console.log('Notification tapped');
                } }, message))));
};
var PrimaryWithAutoHide = function () {
    var _a = React.useState(true), visible = _a[0], setVisible = _a[1];
    var onButtonPress = function () { return setVisible(!visible); };
    var _b = React.useState(!visible), hidden = _b[0], setHidden = _b[1];
    var height = React.useRef(new react_native_1.Animated.Value(0)).current;
    var show = function () {
        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(function () {
            setHidden(true);
            setVisible(false);
        });
    };
    var hide = function () {
        react_native_1.Animated.timing(height, {
            toValue: 0,
            duration: HIDE_DURATION,
            useNativeDriver: USE_NATIVE_DRIVER_IOS,
        }).start(function () {
            setHidden(true);
        });
    };
    React.useLayoutEffect(function () {
        if (visible) {
            show();
        }
        else {
            hide();
        }
    }, [visible, height]);
    var 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: function () {
                    console.log('Notification tapped');
                }, onActionPress: function () {
                    console.log('Undo tapped');
                } }, "Mail Archived")))));
};
var PrimaryBarWithAutoHide = function () {
    var _a = React.useState(true), visible = _a[0], setVisible = _a[1];
    var onButtonPress = function () { return setVisible(!visible); };
    var _b = React.useState(!visible), hidden = _b[0], setHidden = _b[1];
    var height = React.useRef(new react_native_1.Animated.Value(0)).current;
    var show = function () {
        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(function () {
            setHidden(true);
            setVisible(false);
        });
    };
    var hide = function () {
        react_native_1.Animated.timing(height, {
            toValue: 0,
            duration: HIDE_DURATION,
            useNativeDriver: USE_NATIVE_DRIVER_IOS,
        }).start(function () {
            setHidden(true);
        });
    };
    React.useLayoutEffect(function () {
        if (visible) {
            show();
        }
        else {
            hide();
        }
    }, [visible, height]);
    var 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: function () {
                    console.log('Notification tapped');
                } }, "Mail Sent")))));
};
var 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,
    },
];
var NotificationTest = function () {
    var status = {
        win32Status: 'Backlog',
        uwpStatus: 'Backlog',
        iosStatus: 'Production',
        macosStatus: 'Backlog',
        androidStatus: 'Backlog',
    };
    var description = 'Testing notification component';
    var 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