"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ImageNodeView = exports.cnImgSizeNodeView = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const uikit_1 = require("@gravity-ui/uikit");
const classname_1 = require("../../../../../classname.js");
const react_utils_1 = require("../../../../../react-utils/index.js");
const useNodeResizing_1 = require("../../../../../react-utils/useNodeResizing.js");
const utils_1 = require("../../../../../utils/index.js");
const Resizable_1 = require("../../../../behavior/Resizable/Resizable.js");
const ImgSizeSpecs_1 = require("../../ImgSizeSpecs/index.js");
const const_1 = require("../../const.js");
const ImgSettingsButton_1 = require("./ImgSettingsButton.js");
require("./ImgNodeView.css");
exports.cnImgSizeNodeView = (0, classname_1.cn)('img-size-node-view');
const ImageNodeView = ({ node, view, getPos, updateAttributes, }) => {
    const imageContainerRef = (0, react_1.useRef)(null);
    const imageRef = (0, react_1.useRef)(null);
    const [imageElement, setImageElement] = (0, react_utils_1.useElementState)();
    const alt = node.attrs[ImgSizeSpecs_1.ImgSizeAttr.Alt] || '';
    const initialHeight = node.attrs[ImgSizeSpecs_1.ImgSizeAttr.Height];
    const initialWidth = node.attrs[ImgSizeSpecs_1.ImgSizeAttr.Width];
    const src = node.attrs[ImgSizeSpecs_1.ImgSizeAttr.Src] || '';
    const title = node.attrs[ImgSizeSpecs_1.ImgSizeAttr.Title] || '';
    const isNodeHovered = (0, react_utils_1.useNodeHovered)(imageContainerRef);
    const [edit, setEditing, unsetEdit, toggleEdit] = (0, react_utils_1.useNodeEditing)({
        nodeRef: imageContainerRef,
        view,
    });
    const handleResize = (0, react_1.useCallback)(({ width, height }) => {
        updateAttributes({
            width: width === undefined ? undefined : String(Math.round(width)),
            height: height === undefined ? undefined : String(Math.round(height)),
            name: title,
            alt,
        });
    }, [alt, title, updateAttributes]);
    const { state, startResizing } = (0, useNodeResizing_1.useNodeResizing)({
        width: initialWidth,
        height: initialHeight,
        ref: imageRef,
        onResize: handleResize,
    });
    const style = {
        transition: 'width 0.15s ease-out, height 0.15s ease-out',
    };
    if (state.width) {
        style.width = `${state.width}px`;
        if (state.height) {
            style.aspectRatio = state.width / state.height;
            style.height = 'auto;';
        }
    }
    else if (state.height) {
        style.height = `${state.height}px`;
    }
    const handleDelete = (0, react_1.useCallback)(() => {
        const pos = getPos();
        if (pos === undefined)
            return;
        (0, utils_1.removeNode)({
            node,
            pos,
            tr: view.state.tr,
            dispatch: view.dispatch,
        });
        view.focus();
    }, [getPos, node, view]);
    const createHandleResize = (direction) => (event) => {
        startResizing(event, direction);
    };
    (0, react_1.useEffect)(() => {
        if (const_1.imageRendererKey.getState(view.state)?.linkAdded) {
            setEditing();
        }
    }, [view, setEditing]);
    const refFn = (0, react_1.useCallback)((elem) => {
        (0, uikit_1.setRef)(imageRef, elem);
        setImageElement(elem);
    }, [setImageElement]);
    return ((0, jsx_runtime_1.jsx)("div", { ref: imageContainerRef, "data-qa": "g-md-image", children: (0, jsx_runtime_1.jsxs)(Resizable_1.Resizable, { hover: isNodeHovered, resizing: state.resizing, onResizeLeft: createHandleResize('left'), onResizeRight: createHandleResize('right'), children: [(0, jsx_runtime_1.jsx)(ImgSettingsButton_1.ImgSettingsButton, { node: node, view: view, getPos: getPos, updateAttributes: updateAttributes, visible: isNodeHovered && !edit && !state.resizing, edit: edit, toggleEdit: toggleEdit, nodeElement: imageElement, onDelete: handleDelete, unsetEdit: unsetEdit }), (0, jsx_runtime_1.jsx)("img", { ref: refFn, src: src, alt: alt, style: style })] }) }));
};
exports.ImageNodeView = ImageNodeView;
//# sourceMappingURL=NodeView.js.map
