import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/*
This file is part of the Notesnook project (https://notesnook.com/)

Copyright (C) 2023 Streetwriters (Private) Limited

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/
import { Flex } from "@theme-ui/components";
import { Popup } from "../components/popup";
import { InlineInput } from "../../components/inline-input";
import { findSelectedNode } from "../../utils/prosemirror";
export function ImageProperties(props) {
    const { editor, onClose } = props;
    const image = findSelectedNode(editor, "image");
    if (!image)
        return null;
    const { width, height, aspectRatio } = image.attrs;
    return (_jsx(Popup, { title: "Image properties", onClose: onClose, children: _jsxs(Flex, { sx: { width: ["auto", 300], alignItems: "center", p: 1 }, children: [_jsx(InlineInput, { label: "width", type: "number", value: width || 0, containerProps: {
                        sx: { mr: 1 }
                    }, onChange: (e) => {
                        editor.commands.setImageSize({
                            width: e.target.valueAsNumber,
                            height: aspectRatio
                                ? e.target.valueAsNumber / aspectRatio
                                : e.target.valueAsNumber
                        });
                    } }), _jsx(InlineInput, { label: "height", type: "number", value: height || 0, onChange: (e) => {
                        editor.commands.setImageSize({
                            width: aspectRatio
                                ? e.target.valueAsNumber * aspectRatio
                                : e.target.valueAsNumber,
                            height: e.target.valueAsNumber
                        });
                    } })] }) }));
}
