import React from 'react';
import { Paper, makeStyles } from '@material-ui/core';
import clsx from 'clsx';
import { FluentIconButton } from '../../UI/inputs/buttons/FluentIconButton';
import { ChevronRightIcon, ChevronLeftIcon } from '@fluentui/react-icons';
const useStyles = makeStyles((theme) => ({
    root: {
        position: 'absolute',
        zIndex: 9999,
        top: 50,
        right: 0
    },
    mapPage: {
        overflow: 'hidden'
    },
    collapsed: {
        width: 0,
        transition: theme.transitions.create('width', {
            easing: theme.transitions.easing.easeOut,
            duration: theme.transitions.duration.leavingScreen
        })
    },
    expanded: {
        width: 300,
        transition: theme.transitions.create('width', {
            easing: theme.transitions.easing.easeIn,
            duration: theme.transitions.duration.enteringScreen
        })
    },
    wrapper: {
        padding: theme.spacing(2)
    },
    sheetWrapper: {
        display: 'flex',
        flexDirection: 'row'
    },
    toggle: {
        padding: theme.spacing(1),
        background: theme.palette.common.white,
        height: theme.spacing(6)
    }
}));
export const MapSheet = (props) => {
    const classes = useStyles();
    const { children, collapsed, toggle } = props;
    return (React.createElement("div", { className: clsx(classes.root, collapsed ? classes.collapsed : classes.expanded) }, React.createElement("div", { className: classes.sheetWrapper }, React.createElement("div", { className: classes.toggle }, React.createElement(FluentIconButton, { className: classes.extendedButton, onClick: toggle, color: "primary", icon: collapsed ? ChevronLeftIcon : ChevronRightIcon })), React.createElement("div", null, React.createElement(Paper, { square: true }, React.createElement("div", { className: classes.wrapper }, children))))));
};
//# sourceMappingURL=MapSheet.js.map