import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useEffect, useRef, useState } from "react";
import { useUploadLoading } from "../../../../hooks/useUploadLoading.js";
import { FileBlockWrapper } from "./FileBlockWrapper.js";
export const ResizableFileBlockWrapper = (props) => {
    // Temporary parameters set when the user begins resizing the element, used to
    // calculate the new width of the element.
    const [resizeParams, setResizeParams] = useState(undefined);
    const [width, setWidth] = useState(props.block.props.previewWidth);
    const [hovered, setHovered] = useState(false);
    const ref = useRef(null);
    useEffect(() => {
        // Updates the child width with an updated width depending on the cursor X
        // offset from when the resize began, and which resize handle is being used.
        const windowMouseMoveHandler = (event) => {
            let newWidth;
            if (props.block.props.textAlignment === "center") {
                if (resizeParams.handleUsed === "left") {
                    newWidth =
                        resizeParams.initialWidth +
                            (resizeParams.initialClientX - event.clientX) * 2;
                }
                else {
                    newWidth =
                        resizeParams.initialWidth +
                            (event.clientX - resizeParams.initialClientX) * 2;
                }
            }
            else {
                if (resizeParams.handleUsed === "left") {
                    newWidth =
                        resizeParams.initialWidth +
                            resizeParams.initialClientX -
                            event.clientX;
                }
                else {
                    newWidth =
                        resizeParams.initialWidth +
                            event.clientX -
                            resizeParams.initialClientX;
                }
            }
            // Min child width in px.
            const minWidth = 64;
            // Ensures the child is not wider than the editor and not narrower than a
            // predetermined minimum width.
            if (newWidth < minWidth) {
                setWidth(minWidth);
            }
            else {
                setWidth(newWidth);
            }
        };
        // Stops mouse movements from resizing the child and updates the block's
        // `width` prop to the new value.
        const windowMouseUpHandler = () => {
            setResizeParams(undefined);
            props.editor.updateBlock(props.block, {
                props: {
                    previewWidth: width,
                },
            });
        };
        if (resizeParams) {
            window.addEventListener("mousemove", windowMouseMoveHandler);
            window.addEventListener("mouseup", windowMouseUpHandler);
        }
        return () => {
            window.removeEventListener("mousemove", windowMouseMoveHandler);
            window.removeEventListener("mouseup", windowMouseUpHandler);
        };
    }, [props, resizeParams, width]);
    // Shows the resize handles when hovering over the child with the cursor.
    const wrapperMouseEnterHandler = useCallback(() => {
        if (props.editor.isEditable) {
            setHovered(true);
        }
    }, [props.editor.isEditable]);
    // Hides the resize handles when the cursor leaves the child, unless the
    // cursor moves to one of the resize handles.
    const wrapperMouseLeaveHandler = useCallback(() => {
        setHovered(false);
    }, []);
    // Sets the resize params, allowing the user to begin resizing the child by
    // moving the cursor left or right.
    const leftResizeHandleMouseDownHandler = useCallback((event) => {
        event.preventDefault();
        setResizeParams({
            handleUsed: "left",
            initialWidth: ref.current.clientWidth,
            initialClientX: event.clientX,
        });
    }, []);
    const rightResizeHandleMouseDownHandler = useCallback((event) => {
        event.preventDefault();
        setResizeParams({
            handleUsed: "right",
            initialWidth: ref.current.clientWidth,
            initialClientX: event.clientX,
        });
    }, []);
    const showLoader = useUploadLoading(props.block.id);
    return (_jsx(FileBlockWrapper, { ...props, onMouseEnter: wrapperMouseEnterHandler, onMouseLeave: wrapperMouseLeaveHandler, style: props.block.props.url && !showLoader && props.block.props.showPreview
            ? { width: `${width}px` }
            : undefined, children: _jsxs("div", { className: "bn-visual-media-wrapper", ref: ref, children: [props.children, (hovered || resizeParams) && (_jsxs(_Fragment, { children: [_jsx("div", { className: "bn-resize-handle", style: { left: "4px" }, onMouseDown: leftResizeHandleMouseDownHandler }), _jsx("div", { className: "bn-resize-handle", style: { right: "4px" }, onMouseDown: rightResizeHandleMouseDownHandler })] }))] }) }));
};
//# sourceMappingURL=ResizableFileBlockWrapper.js.map