import * as React from 'react';
import { StyleSheet, View } from 'react-native';
import { Avatar } from '@fluentui-react-native/avatar';
import { ButtonV1 as Button } from '@fluentui-react-native/button';
import { Drawer } from '@fluentui-react-native/drawer';
import { Stack } from '@fluentui-react-native/stack';
import { Switch } from '@fluentui-react-native/switch';
import { Text } from '@fluentui-react-native/text';
import { stackStyle } from '../Common/styles';
export var DrawerDefault = function () {
    var _a = React.useState(false), isDrawerVisible = _a[0], setIsDrawerVisible = _a[1];
    var _b = React.useState('left'), drawerPosition = _b[0], setDrawerPosition = _b[1];
    var handleDrawerClose = React.useCallback(function () {
        setIsDrawerVisible(false);
    }, []);
    var handleDrawerOpen = React.useCallback(function (behavior) {
        setDrawerPosition(behavior);
        setIsDrawerVisible(true);
    }, []);
    var handleChildrenClick = React.useCallback(function () {
        console.log('Children Clicked');
    }, []);
    return (React.createElement(Stack, { style: stackStyle },
        React.createElement(View, { style: drawerContentstyles.container },
            React.createElement(View, { style: drawerContentstyles.content },
                React.createElement(Text, null, "This is the main content of the screen."),
                React.createElement(Button, { appearance: "outline", onClick: function () { return handleDrawerOpen('left'); } }, "Open Drawer (Left)"),
                React.createElement(Button, { appearance: "outline", onClick: function () { return handleDrawerOpen('right'); } }, "Open Drawer (Right)"),
                React.createElement(Button, { appearance: "outline", onClick: function () { return handleDrawerOpen('bottom'); } }, "Open Drawer (Bottom)")),
            React.createElement(Drawer, { open: isDrawerVisible, onClose: handleDrawerClose, onScrimClick: handleDrawerClose, drawerPosition: drawerPosition },
                React.createElement(View, { style: drawerContentstyles.drawerContent },
                    React.createElement(View, { style: drawerContentstyles.flexRow },
                        React.createElement(Avatar, { active: 'active', activeAppearance: "ring", size: 56, name: "John Doe", avatarColor: 'colorful' }),
                        React.createElement(Text, { variant: "headerSemibold", style: drawerContentstyles.text }, "John Doe")),
                    React.createElement(Switch, { style: drawerContentstyles.switch, defaultChecked: true, label: 'Notifications' }),
                    React.createElement(Stack, { gap: 10 },
                        React.createElement(Text, { variant: "body1" }, "This is the content of the drawer."),
                        React.createElement(Button, { onClick: handleDrawerClose }, "Close Drawer"),
                        React.createElement(Button, { appearance: "outline", onClick: handleChildrenClick }, "Validate Children Clicked on Drawer")))))));
};
var drawerContentstyles = StyleSheet.create({
    container: {
        flex: 1,
    },
    flexRow: {
        flexDirection: 'row',
    },
    content: {
        height: 200,
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'space-between',
    },
    switch: {
        margin: 10,
    },
    drawerContent: {
        flex: 1,
        alignItems: 'flex-start',
        margin: 20,
    },
    text: {
        fontSize: 20,
        textAlign: 'center',
        alignSelf: 'center',
        marginStart: 10,
    },
});
//# sourceMappingURL=DrawerDefault.js.map