"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DrawerLayout = exports.DrawerLayoutComponent = void 0;
const tslib_1 = require("tslib");
const components_1 = require("@bluebase/components");
const Drawer_1 = tslib_1.__importDefault(require("@material-ui/core/Drawer"));
const DrawerContext_1 = require("./DrawerContext");
const react_1 = tslib_1.__importDefault(require("react"));
const styles_1 = require("@material-ui/styles");
Drawer_1.default.displayName = 'Drawer';
class DrawerLayoutComponent extends react_1.default.Component {
    constructor() {
        super(...arguments);
        this.state = {
            closeDrawer: () => this.setState({ open: false }),
            open: this.props.open !== undefined ? this.props.open : false,
            openDrawer: () => this.setState({ open: true }),
            toggleDrawer: () => this.setState({ open: !this.state.open }),
        };
    }
    render() {
        const { children, classes, drawerPosition, drawerType, onDrawerClose, 
        // onDrawerOpen,
        renderNavigationView, style, } = this.props;
        const variant = drawerType === 'slide' ? 'persistent' : 'temporary';
        const drawerProps = {
            anchor: drawerPosition,
            children: renderNavigationView && renderNavigationView(),
            className: classes.drawer,
            classes: variant === 'persistent' ? { paper: classes.drawerPaper } : {},
            onClose: onDrawerClose,
            // onRendered: onDrawerOpen,
            open: this.state.open,
            variant,
        };
        if (variant === 'temporary') {
            drawerProps.onBackdropClick = () => this.state.toggleDrawer();
        }
        const contentClassName = drawerType === 'slide'
            ? `${classes.content} ${this.state.open ? classes.contentShift : ''}`
            : '';
        // The entire state is passed to the provider
        return (react_1.default.createElement(DrawerContext_1.DrawerContext.Provider, { value: this.state },
            react_1.default.createElement(components_1.View, { style: [{ flex: 1, overflow: 'hidden' }, style] },
                react_1.default.createElement(Drawer_1.default, Object.assign({}, drawerProps)),
                react_1.default.createElement("div", { className: contentClassName, style: { height: '100%' } }, children))));
    }
}
exports.DrawerLayoutComponent = DrawerLayoutComponent;
DrawerLayoutComponent.displayName = 'DrawerLayout';
const styles = (theme) => ({
    content: {
        display: 'flex',
        flexGrow: 1,
        marginLeft: 0,
        overflowY: 'auto',
        transition: theme.transitions.create('margin', {
            duration: theme.transitions.duration.leavingScreen,
            easing: theme.transitions.easing.sharp,
        }),
    },
    contentShift: (props) => ({
        marginLeft: props.drawerWidth,
        transition: theme.transitions.create('margin', {
            duration: theme.transitions.duration.enteringScreen,
            easing: theme.transitions.easing.easeOut,
        }),
    }),
    drawer: (props) => ({
        flexShrink: 0,
        width: props.drawerWidth,
    }),
    drawerPaper: (props) => ({
        position: 'absolute',
        width: props.drawerWidth,
    }),
});
exports.DrawerLayout = styles_1.withStyles(styles)(DrawerLayoutComponent);
