import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { Grip, LayoutSideContentLeft, LayoutSideContentRight } from '@gravity-ui/icons';
import { Button, Icon } from '@gravity-ui/uikit';
import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
import { editorCn } from "../../utils/cn.js";
import './Panels.css';
const b = editorCn('panels');
export const Panels = ({ left, right, middle }) => {
    const leftPanel = React.useRef(null);
    const rightPanel = React.useRef(null);
    const expandPanel = (reference) => {
        const panel = reference.current;
        if (panel) {
            panel.expand();
        }
    };
    const isCollapsed = {
        left: leftPanel.current?.isCollapsed() || false,
        right: rightPanel.current?.isCollapsed() || false,
    };
    return (_jsxs(PanelGroup, { className: b('panel'), autoSaveId: "page-constructor-editor", direction: "horizontal", children: [_jsx(Panel, { ref: leftPanel, collapsible: true, defaultSize: 25, minSize: 15, children: left }), _jsxs(PanelResizeHandle, { className: b('draggable'), children: [_jsx(Grip, { className: b('grip') }), isCollapsed.left && (_jsx("div", { className: b('button-wrap', { left: true }), children: _jsx(Button, { className: b('button'), view: "action", onClick: () => expandPanel(leftPanel), children: _jsx(Icon, { data: LayoutSideContentLeft }) }) }))] }), _jsx(Panel, { minSize: 20, children: middle }), _jsxs(PanelResizeHandle, { className: b('draggable'), children: [_jsx(Grip, { className: b('grip') }), isCollapsed.right && (_jsx("div", { className: b('button-wrap', { right: true }), children: _jsx(Button, { className: b('button'), view: "action", onClick: () => expandPanel(rightPanel), children: _jsx(Icon, { data: LayoutSideContentRight }) }) }))] }), _jsx(Panel, { ref: rightPanel, collapsible: true, minSize: 15, defaultSize: 25, children: right })] }));
};
//# sourceMappingURL=Panels.js.map
