import * as React from 'react';
import { Animated, StyleSheet, Switch, TextInput, View } from 'react-native';
import { ButtonV1 as Button } from '@fluentui-react-native/button';
import { Text } from '@fluentui-react-native/experimental-text';
import { Notification, NotificationVariants } from '@fluentui-react-native/notification';
import PlayButton from './assets/play_button.svg';
import { StyledPicker } from '../Common/StyledPicker';
import { commonTestStyles as commonStyles } from '../Common/styles';
import { Test } from '../Test';
var svgProps = {
    src: PlayButton,
};
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 = 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(View, null,
        React.createElement(StyledPicker, { prompt: "Variant", selected: variant, onChange: setVariant, collection: NotificationVariants.filter(function (variant) { return !variant.endsWith('Bar'); }) }),
        React.createElement(TextInput, { value: title, onChangeText: setTitle, style: styles.textInput }),
        React.createElement(TextInput, { value: message, onChangeText: setMessage, style: styles.textInput }),
        React.createElement(TextInput, { value: action, onChangeText: setAction, style: styles.textInput }),
        React.createElement(View, { style: commonStyles.switch },
            React.createElement(Text, null, "Show icon "),
            React.createElement(Switch, { value: showIcon, onValueChange: setShowIcon })),
        React.createElement(View, { style: commonStyles.switch },
            React.createElement(Text, null, "Show title "),
            React.createElement(Switch, { value: showTitle, onValueChange: setShowTitle })),
        React.createElement(View, { style: styles.notification },
            React.createElement(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(View, null,
        React.createElement(StyledPicker, { prompt: "Variant", selected: variant, onChange: setVariant, collection: NotificationVariants.filter(function (variant) { return variant.endsWith('Bar'); }) }),
        React.createElement(TextInput, { value: message, onChangeText: setMessage, style: styles.textInput }),
        React.createElement(View, { style: styles.notification },
            React.createElement(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 Animated.Value(0)).current;
    var show = function () {
        setHidden(false);
        Animated.sequence([
            Animated.spring(height, {
                toValue: SHOW_HEIGHT,
                bounciness: 16,
                speed: 20,
                useNativeDriver: USE_NATIVE_DRIVER_IOS,
            }),
            Animated.delay(AUTO_HIDE_DURATION),
            Animated.timing(height, {
                toValue: 0,
                duration: HIDE_DURATION,
                useNativeDriver: USE_NATIVE_DRIVER_IOS,
            }),
        ]).start(function () {
            setHidden(true);
            setVisible(false);
        });
    };
    var hide = function () {
        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(View, null,
        React.createElement(Button, { appearance: "subtle", onClick: onButtonPress, style: styles.button }, visible ? 'Hide' : 'Show'),
        !hidden && (React.createElement(Animated.View, { style: animatedViewProps },
            React.createElement(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 Animated.Value(0)).current;
    var show = function () {
        setHidden(false);
        Animated.sequence([
            Animated.timing(height, {
                toValue: SHOW_HEIGHT,
                duration: BAR_SHOW_DURATION,
                useNativeDriver: USE_NATIVE_DRIVER_IOS,
            }),
            Animated.delay(AUTO_HIDE_DURATION),
            Animated.timing(height, {
                toValue: 0,
                duration: HIDE_DURATION,
                useNativeDriver: USE_NATIVE_DRIVER_IOS,
            }),
        ]).start(function () {
            setHidden(true);
            setVisible(false);
        });
    };
    var hide = function () {
        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(View, null,
        React.createElement(Button, { appearance: "subtle", onClick: onButtonPress, style: styles.button }, visible ? 'Hide' : 'Show'),
        !hidden && (React.createElement(Animated.View, { style: animatedViewProps },
            React.createElement(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,
    },
];
export 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, { name: "Notification Test", description: description, spec: spec, sections: notificationSections, status: status });
};
//# sourceMappingURL=NotificationTest.js.map