"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DrawerDefault = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const react_native_1 = require("react-native");
const avatar_1 = require("@fluentui-react-native/avatar");
const button_1 = require("@fluentui-react-native/button");
const drawer_1 = require("@fluentui-react-native/drawer");
const stack_1 = require("@fluentui-react-native/stack");
const switch_1 = require("@fluentui-react-native/switch");
const text_1 = require("@fluentui-react-native/text");
const styles_1 = require("../Common/styles");
const DrawerDefault = () => {
    const [isDrawerVisible, setIsDrawerVisible] = React.useState(false);
    const [drawerPosition, setDrawerPosition] = React.useState('left');
    const handleDrawerClose = React.useCallback(() => {
        setIsDrawerVisible(false);
    }, []);
    const handleDrawerOpen = React.useCallback((behavior) => {
        setDrawerPosition(behavior);
        setIsDrawerVisible(true);
    }, []);
    const handleChildrenClick = React.useCallback(() => {
        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: () => handleDrawerOpen('left') }, "Open Drawer (Left)"),
                React.createElement(button_1.ButtonV1, { appearance: "outline", onClick: () => handleDrawerOpen('right') }, "Open Drawer (Right)"),
                React.createElement(button_1.ButtonV1, { appearance: "outline", onClick: () => 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;
const 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