import React from 'react';
import { Resizable } from 're-resizable';
import { makeStyles } from '@material-ui/core';
import { OpenPage } from '../templates/OpenPage';
const useStyles = makeStyles((theme) => ({
    root: {},
    stage: {
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        width: '100%',
        marginTop: 16,
        gap: 16
    },
    gridColumn: {
        width: '100%',
        height: '100vh',
        border: 0
    },
    arrow: {
        transform: 'rotate(180deg)'
    },
    buttonContainer: {
        background: theme.palette.common.white,
        borderRadius: '50px 0px 0px 50px',
        marginTop: theme.spacing(1),
        height: 39,
        // @todo: fix this padding hack
        paddingTop: (props) => (props.removePadding ? 0 : 10)
    },
    hide: {
        display: 'none'
    }
}));
export const DraggableSidebarTemplate = (props) => {
    const { body, sidebar, divide, width, setWidth, handleToggleClick, handleToggleClickClose, expanded, hideSidebarButton, hide, maxWidth, enable = {
        top: true,
        right: true,
        bottom: true,
        left: true,
        topRight: false,
        bottomRight: false,
        bottomLeft: false,
        topLeft: false
    }, splitScreenStyle = {} } = props;
    const classes = useStyles(props);
    return (React.createElement("div", { style: Object.assign(Object.assign({ width: '100%', display: 'flex', flex: 1 }, (hide ? {} : { overflow: 'hidden' })), { border: 0 }) }, React.createElement(OpenPage, { disableGutters: true, style: {
            position: 'relative',
            top: 0
        } }, React.createElement("div", { className: divide && classes.stage, style: { flex: 1, display: 'flex', flexDirection: 'column' } }, React.createElement("div", { style: { flex: 1, display: 'flex', flexDirection: 'column' } }, body))), React.createElement("div", { className: divide && classes.stage }), !hide && (React.createElement(Resizable, { style: splitScreenStyle, onResizeStop: (e, direction, ref, d) => {
            setWidth(width + d.width);
        }, defaultSize: {
            width: width
        }, size: {
            width: width
        }, maxWidth: maxWidth || '50%', enable: enable }, sidebar))));
};
//# sourceMappingURL=DraggableSidebarTemplate.js.map