"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 legacy_1 = require("@gravity-ui/uikit/legacy");
const classname_1 = require("../classname.js");
const forms_1 = require("../i18n/forms/index.js");
const lodash_1 = require("../lodash.js");
const handlers_1 = require("../utils/handlers.js");
const TextInput_1 = require("./TextInput.js");
const base_1 = tslib_1.__importDefault(require("./base/index.js"));
const components_1 = require("./components/index.js");
require("./ImageForm.css");
const b = (0, classname_1.cn)('image-form');
var ImageTabId;
(function (ImageTabId) {
    ImageTabId["Attach"] = "attach";
    ImageTabId["Link"] = "link";
})(ImageTabId || (ImageTabId = {}));
const ImageForm = ({ className, autoFocus, onCancel, onSubmit, onAttach, loading, }) => {
    const [tabId, setTabId] = (0, react_1.useState)(() => (0, lodash_1.isFunction)(onAttach) ? ImageTabId.Attach : ImageTabId.Link);
    const [url, setUrl] = (0, react_1.useState)('');
    const [name, setName] = (0, react_1.useState)('');
    const [alt, setAlt] = (0, react_1.useState)('');
    const [width, setWidth] = (0, react_1.useState)();
    const [height, setHeight] = (0, react_1.useState)();
    const shouldRenderTabs = (0, lodash_1.isFunction)(onAttach);
    (0, react_1.useLayoutEffect)(() => {
        if (!shouldRenderTabs && tabId === ImageTabId.Attach) {
            setTabId(ImageTabId.Link);
        }
    }, [shouldRenderTabs, tabId]);
    const handleSubmit = () => {
        const data = {
            url: url.trim(),
            name: name.trim(),
            alt: alt.trim(),
        };
        if (typeof width === 'number' && width >= 0)
            data.width = width;
        if (typeof height === 'number' && height >= 0)
            data.height = height;
        onSubmit(data);
    };
    const inputEnterKeyHandler = (0, handlers_1.enterKeyHandler)(handleSubmit);
    return ((0, jsx_runtime_1.jsxs)(base_1.default.Form, { className: b(null, [className]), children: [shouldRenderTabs && ((0, jsx_runtime_1.jsx)(legacy_1.Tabs, { activeTab: tabId, onSelectTab: setTabId, items: [
                    { id: ImageTabId.Attach, title: (0, forms_1.i18n)('common_tab_attach') },
                    { id: ImageTabId.Link, title: (0, forms_1.i18n)('common_tab_link') },
                ] })), tabId === ImageTabId.Attach && onAttach && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(base_1.default.Layout, { children: (0, forms_1.i18n)('image_upload_help') }), (0, jsx_runtime_1.jsx)(base_1.default.Footer, { onCancel: onCancel, children: (0, jsx_runtime_1.jsx)(components_1.ButtonAttach, { multiple: true, accept: "image/*", onUpdate: onAttach, buttonProps: { size: 's', view: 'action', loading }, children: (0, forms_1.i18n)('common_action_upload') }) })] })), tabId === ImageTabId.Link && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(base_1.default.Layout, { children: [(0, jsx_runtime_1.jsx)(base_1.default.Row, { label: (0, forms_1.i18n)('common_link'), control: (0, jsx_runtime_1.jsx)(TextInput_1.TextInputFixed, { size: "s", view: "normal", value: url, onUpdate: setUrl, placeholder: "https://", autoFocus: autoFocus, 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, { 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' }), onKeyDown: 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' }), onKeyDown: inputEnterKeyHandler })] }) })] }), (0, jsx_runtime_1.jsx)(base_1.default.Footer, { onCancel: onCancel, onSubmit: handleSubmit })] }))] }));
};
exports.ImageForm = ImageForm;
//# sourceMappingURL=ImageForm.js.map
