import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useRef, useState } from 'react';
import { Popup, TextInput } from '@gravity-ui/uikit';
import isNumber from 'is-number';
import { cn } from "../../../../../../classname.js";
import Form from "../../../../../../forms/base/index.js";
import { NumberInput } from "../../../../../../forms/components/index.js";
import { i18n } from "../../../../../../i18n/forms/index.js";
import { useAutoFocus } from "../../../../../../react-utils/useAutoFocus.js";
import { enterKeyHandler } from "../../../../../../utils/handlers.js";
import { LinkAttr, linkType } from "../../../../../markdown/index.js";
import { ImgSizeAttr } from "../../../../../specs.js";
import "./ImageForm.css";
const b = cn('image-tooltip-form');
export const ImageForm = ({ node, updateAttributes, view, unsetEdit, anchorElement }) => {
    const { attrs, marks } = node;
    const link = marks.find((m) => m.type.name === linkType(view.state.schema).name);
    const [name, setName] = useState(attrs[ImgSizeAttr.Title] || '');
    const [alt, setAlt] = useState(attrs[ImgSizeAttr.Alt] || '');
    const [width, setWidth] = useState(attrs[ImgSizeAttr.Width] || '');
    const [height, setHeight] = useState(attrs[ImgSizeAttr.Height] || '');
    const [linkHref, setLinkHref] = useState(link?.attrs.href || '');
    const handleSubmit = () => {
        updateAttributes({
            title: name.trim(),
            alt: alt.trim(),
            width: isNumber(width) && Number(width) >= 0 ? String(width) : '',
            height: isNumber(height) && Number(height) >= 0 ? String(height) : '',
        }, link
            ? [
                linkType(view.state.schema).create({
                    ...link.attrs,
                    [LinkAttr.Href]: linkHref,
                }),
            ]
            : []);
        unsetEdit();
    };
    const linkRef = useRef(null);
    const imageNameRef = useRef(null);
    useAutoFocus(link ? linkRef : imageNameRef);
    const inputEnterKeyHandler = enterKeyHandler(handleSubmit);
    return (_jsx(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: _jsxs(Form.Form, { className: b(), children: [_jsxs(Form.Layout, { children: [link && (_jsx(Form.Row, { label: i18n('image_link_href'), help: i18n('image_link_href_help'), control: _jsx(TextInput, { controlRef: linkRef, size: "s", view: "normal", value: linkHref, onUpdate: setLinkHref, className: b('input', { type: 'link' }), onKeyPress: inputEnterKeyHandler }) })), _jsx(Form.Row, { label: i18n('image_name'), control: _jsx(TextInput, { controlRef: imageNameRef, size: "s", view: "normal", value: name, onUpdate: setName, className: b('input', { type: 'name' }), onKeyPress: inputEnterKeyHandler }) }), _jsx(Form.Row, { label: i18n('image_alt'), help: i18n('image_alt_help'), control: _jsx(TextInput, { size: "s", view: "normal", value: alt, onUpdate: setAlt, className: b('input', { type: 'alt' }), onKeyPress: inputEnterKeyHandler }) }), _jsx(Form.Row, { label: i18n('common_sizes'), control: _jsxs("div", { className: b('size-controls'), children: [_jsx(NumberInput, { min: 0, size: "s", view: "normal", value: width, onUpdate: setWidth, placeholder: i18n('image_size_width'), className: b('input', { type: 'width' }), onKeyPress: inputEnterKeyHandler }), "x", _jsx(NumberInput, { min: 0, size: "s", view: "normal", value: height, onUpdate: setHeight, placeholder: i18n('image_size_height'), className: b('input', { type: 'height' }), onKeyPress: inputEnterKeyHandler })] }) })] }), _jsx(Form.Footer, { onSubmit: handleSubmit })] }) }));
};
//# sourceMappingURL=ImageForm.js.map
