"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ImageForm = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const uikit_1 = require("@gravity-ui/uikit");
const is_number_1 = tslib_1.__importDefault(require("is-number"));
const classname_1 = require("../../../../../../classname.js");
const base_1 = tslib_1.__importDefault(require("../../../../../../forms/base/index.js"));
const components_1 = require("../../../../../../forms/components/index.js");
const forms_1 = require("../../../../../../i18n/forms/index.js");
const useAutoFocus_1 = require("../../../../../../react-utils/useAutoFocus.js");
const handlers_1 = require("../../../../../../utils/handlers.js");
const markdown_1 = require("../../../../../markdown/index.js");
const specs_1 = require("../../../../../specs.js");
require("./ImageForm.css");
const b = (0, classname_1.cn)('image-tooltip-form');
const ImageForm = ({ node, updateAttributes, view, unsetEdit, anchorElement }) => {
    const { attrs, marks } = node;
    const link = marks.find((m) => m.type.name === (0, markdown_1.linkType)(view.state.schema).name);
    const [name, setName] = (0, react_1.useState)(attrs[specs_1.ImgSizeAttr.Title] || '');
    const [alt, setAlt] = (0, react_1.useState)(attrs[specs_1.ImgSizeAttr.Alt] || '');
    const [width, setWidth] = (0, react_1.useState)(attrs[specs_1.ImgSizeAttr.Width] || '');
    const [height, setHeight] = (0, react_1.useState)(attrs[specs_1.ImgSizeAttr.Height] || '');
    const [linkHref, setLinkHref] = (0, react_1.useState)(link?.attrs.href || '');
    const handleSubmit = () => {
        updateAttributes({
            title: name.trim(),
            alt: alt.trim(),
            width: (0, is_number_1.default)(width) && Number(width) >= 0 ? String(width) : '',
            height: (0, is_number_1.default)(height) && Number(height) >= 0 ? String(height) : '',
        }, link
            ? [
                (0, markdown_1.linkType)(view.state.schema).create({
                    ...link.attrs,
                    [markdown_1.LinkAttr.Href]: linkHref,
                }),
            ]
            : []);
        unsetEdit();
    };
    const linkRef = (0, react_1.useRef)(null);
    const imageNameRef = (0, react_1.useRef)(null);
    (0, useAutoFocus_1.useAutoFocus)(link ? linkRef : imageNameRef);
    const inputEnterKeyHandler = (0, handlers_1.enterKeyHandler)(handleSubmit);
    return ((0, jsx_runtime_1.jsx)(uikit_1.Popup, { open: true, modal: true, anchorElement: anchorElement, placement: ['bottom-start', 'top-start', 'bottom-end', 'top-end'], onOpenChange: (_open, _event, reason) => {
            if (reason !== 'escape-key')
                unsetEdit();
        }, children: (0, jsx_runtime_1.jsxs)(base_1.default.Form, { className: b(), children: [(0, jsx_runtime_1.jsxs)(base_1.default.Layout, { children: [link && ((0, jsx_runtime_1.jsx)(base_1.default.Row, { label: (0, forms_1.i18n)('image_link_href'), help: (0, forms_1.i18n)('image_link_href_help'), control: (0, jsx_runtime_1.jsx)(uikit_1.TextInput, { controlRef: linkRef, size: "s", view: "normal", value: linkHref, onUpdate: setLinkHref, className: b('input', { type: 'link' }), onKeyPress: inputEnterKeyHandler }) })), (0, jsx_runtime_1.jsx)(base_1.default.Row, { label: (0, forms_1.i18n)('image_name'), control: (0, jsx_runtime_1.jsx)(uikit_1.TextInput, { controlRef: imageNameRef, size: "s", view: "normal", value: name, onUpdate: setName, className: b('input', { type: 'name' }), onKeyPress: inputEnterKeyHandler }) }), (0, jsx_runtime_1.jsx)(base_1.default.Row, { label: (0, forms_1.i18n)('image_alt'), help: (0, forms_1.i18n)('image_alt_help'), control: (0, jsx_runtime_1.jsx)(uikit_1.TextInput, { size: "s", view: "normal", value: alt, onUpdate: setAlt, className: b('input', { type: 'alt' }), onKeyPress: inputEnterKeyHandler }) }), (0, jsx_runtime_1.jsx)(base_1.default.Row, { label: (0, forms_1.i18n)('common_sizes'), control: (0, jsx_runtime_1.jsxs)("div", { className: b('size-controls'), children: [(0, jsx_runtime_1.jsx)(components_1.NumberInput, { min: 0, size: "s", view: "normal", value: width, onUpdate: setWidth, placeholder: (0, forms_1.i18n)('image_size_width'), className: b('input', { type: 'width' }), onKeyPress: inputEnterKeyHandler }), "x", (0, jsx_runtime_1.jsx)(components_1.NumberInput, { min: 0, size: "s", view: "normal", value: height, onUpdate: setHeight, placeholder: (0, forms_1.i18n)('image_size_height'), className: b('input', { type: 'height' }), onKeyPress: inputEnterKeyHandler })] }) })] }), (0, jsx_runtime_1.jsx)(base_1.default.Footer, { onSubmit: handleSubmit })] }) }));
};
exports.ImageForm = ImageForm;
//# sourceMappingURL=ImageForm.js.map
