import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { ToolButton } from "../components/tool-button";
import { useRef, useState } from "react";
import { ResponsivePresenter } from "../../components/responsive";
import { MoreTools } from "../components/more-tools";
import { useToolbarLocation } from "../stores/toolbar-store";
import { ImageProperties as ImagePropertiesPopup } from "../popups/image-properties";
import { findSelectedNode } from "../../utils/prosemirror";
export function ImageSettings(props) {
    const { editor } = props;
    const isBottom = useToolbarLocation() === "bottom";
    if (!editor.isActive("image") || !isBottom)
        return null;
    return (_jsx(MoreTools, Object.assign({}, props, { autoCloseOnUnmount: true, popupId: "imageSettings", tools: editor.isEditable
            ? [
                "downloadAttachment",
                "imageAlignLeft",
                "imageAlignCenter",
                "imageAlignRight",
                "imageFloat",
                "imageProperties"
            ]
            : ["downloadAttachment"] })));
}
export function ImageAlignLeft(props) {
    const { editor } = props;
    const image = findSelectedNode(editor, "image");
    if (!image)
        return null;
    const { align } = image.attrs;
    return (_jsx(ToolButton, Object.assign({}, props, { toggled: !align || align === "left", onClick: () => editor.chain().focus().setImageAlignment({ align: "left" }).run() })));
}
export function ImageAlignRight(props) {
    const { editor } = props;
    const image = findSelectedNode(editor, "image");
    if (!image)
        return null;
    const { align } = image.attrs;
    return (_jsx(ToolButton, Object.assign({}, props, { toggled: align === "right", onClick: () => editor.chain().focus().setImageAlignment({ align: "right" }).run() })));
}
export function ImageAlignCenter(props) {
    const { editor } = props;
    const image = findSelectedNode(editor, "image");
    if (!image)
        return null;
    const { align } = image.attrs;
    return (_jsx(ToolButton, Object.assign({}, props, { toggled: align === "center", onClick: () => editor.chain().focus().setImageAlignment({ align: "center" }).run() })));
}
export function ImageFloat(props) {
    const { editor } = props;
    const image = findSelectedNode(editor, "image");
    if (!image)
        return null;
    const { float } = image.attrs;
    return (_jsx(ToolButton, Object.assign({}, props, { toggled: !!float, onClick: () => editor.chain().focus().setImageAlignment({ float: !float }).run() })));
}
export function ImageProperties(props) {
    const { editor } = props;
    const [isOpen, setIsOpen] = useState(false);
    const buttonRef = useRef(null);
    return (_jsxs(_Fragment, { children: [_jsx(ToolButton, Object.assign({ buttonRef: buttonRef, toggled: isOpen }, props, { onClick: () => setIsOpen((s) => !s) })), _jsx(ResponsivePresenter, { isOpen: isOpen, desktop: "popup", mobile: "sheet", onClose: () => setIsOpen(false), blocking: true, focusOnRender: false, position: {
                    target: buttonRef.current || "mouse",
                    align: "start",
                    location: "below",
                    yOffset: 10,
                    isTargetAbsolute: true
                }, children: _jsx(ImagePropertiesPopup, { editor: editor, onClose: () => setIsOpen(false) }) })] }));
}
