import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useLayoutEffect, useState } from 'react';
import { TextInput } from '@gravity-ui/uikit';
import { Tabs } from '@gravity-ui/uikit/legacy';
import { cn } from "../classname.js";
import { i18n } from "../i18n/forms/index.js";
import { isFunction } from "../lodash.js";
import { enterKeyHandler } from "../utils/handlers.js";
import { TextInputFixed } from "./TextInput.js";
import Form from "./base/index.js";
import { ButtonAttach, NumberInput } from "./components/index.js";
import "./ImageForm.css";
const b = cn('image-form');
var ImageTabId;
(function (ImageTabId) {
    ImageTabId["Attach"] = "attach";
    ImageTabId["Link"] = "link";
})(ImageTabId || (ImageTabId = {}));
export const ImageForm = ({ className, autoFocus, onCancel, onSubmit, onAttach, loading, }) => {
    const [tabId, setTabId] = useState(() => isFunction(onAttach) ? ImageTabId.Attach : ImageTabId.Link);
    const [url, setUrl] = useState('');
    const [name, setName] = useState('');
    const [alt, setAlt] = useState('');
    const [width, setWidth] = useState();
    const [height, setHeight] = useState();
    const shouldRenderTabs = isFunction(onAttach);
    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 = enterKeyHandler(handleSubmit);
    return (_jsxs(Form.Form, { className: b(null, [className]), children: [shouldRenderTabs && (_jsx(Tabs, { activeTab: tabId, onSelectTab: setTabId, items: [
                    { id: ImageTabId.Attach, title: i18n('common_tab_attach') },
                    { id: ImageTabId.Link, title: i18n('common_tab_link') },
                ] })), tabId === ImageTabId.Attach && onAttach && (_jsxs(_Fragment, { children: [_jsx(Form.Layout, { children: i18n('image_upload_help') }), _jsx(Form.Footer, { onCancel: onCancel, children: _jsx(ButtonAttach, { multiple: true, accept: "image/*", onUpdate: onAttach, buttonProps: { size: 's', view: 'action', loading }, children: i18n('common_action_upload') }) })] })), tabId === ImageTabId.Link && (_jsxs(_Fragment, { children: [_jsxs(Form.Layout, { children: [_jsx(Form.Row, { label: i18n('common_link'), control: _jsx(TextInputFixed, { size: "s", view: "normal", value: url, onUpdate: setUrl, placeholder: "https://", autoFocus: autoFocus, className: b('input', { type: 'link' }), onKeyPress: inputEnterKeyHandler }) }), _jsx(Form.Row, { label: i18n('image_name'), control: _jsx(TextInput, { 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' }), onKeyDown: inputEnterKeyHandler }), "x", _jsx(NumberInput, { min: 0, size: "s", view: "normal", value: height, onUpdate: setHeight, placeholder: i18n('image_size_height'), className: b('input', { type: 'height' }), onKeyDown: inputEnterKeyHandler })] }) })] }), _jsx(Form.Footer, { onCancel: onCancel, onSubmit: handleSubmit })] }))] }));
};
//# sourceMappingURL=ImageForm.js.map
