"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DockedSidebar = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const core_1 = require("@material-ui/core");
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const material_1 = require("@mui/material");
const DockedSidebar = (props) => {
    return ((0, jsx_runtime_1.jsxs)(Wrapper, { children: [(0, jsx_runtime_1.jsx)(ContentWrapper, { open: props.open, sidebarWidth: props.sidebarWidth, children: props.content() }), props.toogleIcon && ((0, jsx_runtime_1.jsx)(StyledOpenButton, { "data-testid": `editconfig-btn-toggle`, children: props.toogleIcon() })), (0, jsx_runtime_1.jsx)(core_1.ClickAwayListener, { onClickAway: () => {
                    if (props.open) {
                        props.onClose();
                    }
                }, mouseEvent: "onMouseDown", children: (0, jsx_runtime_1.jsx)(StyledDrawer, { open: props.open, variant: "persistent", anchor: "right", onClose: props.onClose, width: props.sidebarWidth, "data-testid": `editconfig-${props.open ? "open" : "close"}`, children: (0, jsx_runtime_1.jsxs)(StyledSidebarContent, { children: [props.sidebar(), props.toogleIcon && ((0, jsx_runtime_1.jsx)(StyledCloseButton, { open: props.open, children: props.toogleIcon() }))] }) }) })] }));
};
exports.DockedSidebar = DockedSidebar;
const Wrapper = styled_components_1.default.div `
    display: flex;
    flex: 1;
    overflow: hidden;
		height: 100%;
`;
const ContentWrapper = styled_components_1.default.div `
    width: ${(props) => (props.open ? `calc(100% - ${props.sidebarWidth}px)` : "100%")};
    height: 100%;
    overflow: auto;
`;
const StyledDrawer = (0, styled_components_1.default)(material_1.Drawer) `
    && {
        .MuiDrawer-paper {
            width: ${(props) => props.width}px;
            position: absolute;
            overflow: visible;
        }
    }
`;
const StyledOpenButton = styled_components_1.default.div `
    position: absolute;
    top: 20px;
    right: 0;
`;
const StyledCloseButton = styled_components_1.default.div `
    position: absolute;
    top: 20px;
    left: -40px;
    visibility: ${(props) => (props.open ? "visible" : "hidden")};
`;
const StyledSidebarContent = styled_components_1.default.div `
    position: relative;
    width: 100%;
    height: 100%;
`;
//# sourceMappingURL=DockSidebar.js.map