import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useRef, useState } from 'react';
import styled from '@darajs/styled-components';
import { useBackendErrors } from './backend-errors';
import DevToolsContent from './devtools-content';
import FloatingButton, { BUTTON_SIZE } from './floating-button';
import Resizer from './resizer';
import useMove from './use-move';
const MIN_WIDTH = 350;
const MAX_WIDTH = 600;
/**
 * Fit a given width value between the sidebar bounds
 *
 * @param width to fit in bounds
 */
function fitInBounds(width) {
    if (width > MAX_WIDTH) {
        return MAX_WIDTH;
    }
    if (width < MIN_WIDTH) {
        return MIN_WIDTH;
    }
    return width;
}
const SidebarWrapper = styled.div `
    display: flex;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;

    min-width: ${MIN_WIDTH}px;
    max-width: ${MAX_WIDTH}px;
    height: 100%;

    box-shadow: 8px 2px 32px -2px rgb(0 0 0 / 25%);
`;
/**
 * DevTools parent display component.
 * Displays an absolutely-positioned floating button to toggle the view of the devtools sidebar,
 * and a sidebar with the devtools content.
 */
function DevToolsWrapper() {
    const [showDevtools, setShowDevtools] = useState(false);
    const { errors } = useBackendErrors();
    const sidebarRef = useRef(null);
    const [sidebarWidth, setSidebarWidth] = useState(MIN_WIDTH);
    // invoked on resizer move
    const resize = useCallback((mouseMoveEvent) => {
        setSidebarWidth(fitInBounds(sidebarRef.current.getBoundingClientRect().right - mouseMoveEvent.clientX));
    }, []);
    const { startMoving: startResizing } = useMove(resize);
    // Button state lifted out of button component so the position doesn't reset when opening/closing sidebar
    const buttonState = useState([
        window.innerWidth - BUTTON_SIZE * 2,
        window.innerHeight - BUTTON_SIZE * 2,
    ]);
    // If not showing devtools, don't include the sidebar in the dom at all
    if (!showDevtools) {
        return (_jsx(FloatingButton, { buttonState: buttonState, onClick: () => setShowDevtools(true), showErrorBadge: errors.length > 0 }));
    }
    return (_jsxs(SidebarWrapper, { ref: sidebarRef, style: { width: sidebarWidth }, children: [_jsx(Resizer, { onGrab: startResizing, sidebarWidth: sidebarWidth }), _jsx(DevToolsContent, { onCloseDevtools: () => setShowDevtools(false), style: { width: sidebarWidth } })] }));
}
export default DevToolsWrapper;
//# sourceMappingURL=devtools-wrapper.js.map