"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DrawerDefault = void 0;
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var react_native_1 = require("react-native");
var avatar_1 = require("@fluentui-react-native/avatar");
var button_1 = require("@fluentui-react-native/button");
var drawer_1 = require("@fluentui-react-native/drawer");
var stack_1 = require("@fluentui-react-native/stack");
var switch_1 = require("@fluentui-react-native/switch");
var text_1 = require("@fluentui-react-native/text");
var styles_1 = require("../Common/styles");
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_1.Stack, { style: styles_1.stackStyle },
        React.createElement(react_native_1.View, { style: drawerContentstyles.container },
            React.createElement(react_native_1.View, { style: drawerContentstyles.content },
                React.createElement(text_1.Text, null, "This is the main content of the screen."),
                React.createElement(button_1.ButtonV1, { appearance: "outline", onClick: function () { return handleDrawerOpen('left'); } }, "Open Drawer (Left)"),
                React.createElement(button_1.ButtonV1, { appearance: "outline", onClick: function () { return handleDrawerOpen('right'); } }, "Open Drawer (Right)"),
                React.createElement(button_1.ButtonV1, { appearance: "outline", onClick: function () { return handleDrawerOpen('bottom'); } }, "Open Drawer (Bottom)")),
            React.createElement(drawer_1.Drawer, { open: isDrawerVisible, onClose: handleDrawerClose, onScrimClick: handleDrawerClose, drawerPosition: drawerPosition },
                React.createElement(react_native_1.View, { style: drawerContentstyles.drawerContent },
                    React.createElement(react_native_1.View, { style: drawerContentstyles.flexRow },
                        React.createElement(avatar_1.Avatar, { active: 'active', activeAppearance: "ring", size: 56, name: "John Doe", avatarColor: 'colorful' }),
                        React.createElement(text_1.Text, { variant: "headerSemibold", style: drawerContentstyles.text }, "John Doe")),
                    React.createElement(switch_1.Switch, { style: drawerContentstyles.switch, defaultChecked: true, label: 'Notifications' }),
                    React.createElement(stack_1.Stack, { gap: 10 },
                        React.createElement(text_1.Text, { variant: "body1" }, "This is the content of the drawer."),
                        React.createElement(button_1.ButtonV1, { onClick: handleDrawerClose }, "Close Drawer"),
                        React.createElement(button_1.ButtonV1, { appearance: "outline", onClick: handleChildrenClick }, "Validate Children Clicked on Drawer")))))));
};
exports.DrawerDefault = DrawerDefault;
var drawerContentstyles = react_native_1.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