import { jsx as _jsx } from "react/jsx-runtime";
import { Resizable } from "re-resizable";
import { Icons } from "../../toolbar";
import { Icon } from "@notesnook/ui";
import { Flex } from "@theme-ui/components";
import { getEditorDOM } from "../../toolbar/utils/dom";
export function Resizer(props) {
    const { enabled, selected, onResize, width, height, children, handleColor, style } = props;
    if (!enabled)
        return _jsx(Flex, { sx: { position: "relative", width }, children: children });
    return (_jsx(Resizable, { style: style, enable: {
            bottom: false,
            left: false,
            right: false,
            top: false,
            bottomLeft: false,
            bottomRight: selected,
            topLeft: false,
            topRight: false
        }, size: {
            height: height || "auto",
            width: width || "auto"
        }, className: "resizer", maxWidth: "100%", bounds: getEditorDOM(), minWidth: 135, handleStyles: {
            bottomRight: {
                right: 0,
                bottom: 0,
                width: 30,
                height: 30,
                zIndex: 2
            }
        }, handleComponent: {
            bottomRight: (_jsx(Icon, { sx: {
                    width: 25,
                    height: 25
                }, path: Icons.resize, size: 25, color: handleColor || "black" }))
        }, onResizeStop: (_e, _direction, ref) => {
            try {
                onResize(ref.clientWidth, ref.clientHeight);
            }
            catch (_a) {
                // ignore
            }
        }, onResizeStart: (e) => e.preventDefault(), lockAspectRatio: true, children: children }));
}
