import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { memo, useEffect, useState } from 'react';
import { ArrowUpRightFromSquare as LinkIcon, LinkSlash as UnlinkIcon } from '@gravity-ui/icons';
import { ActionTooltip, Button, Icon, Popup, } from '@gravity-ui/uikit';
import { cn } from "../../../../../classname.js";
import { TextInputFixed } from "../../../../../forms/TextInput.js";
import { i18n } from "../../../../../i18n/forms/index.js";
import { enterKeyHandler } from "../../../../../utils/handlers.js";
import "./TooltipView.css";
const b = cn('link-tooltip-view');
export const Link = memo(function Link({ href, anchorElement, placement, onOpenChange, onChange, onRemove, onUrlChange, autoFocus, onOpenInNewTab, }) {
    const [url, setUrl] = useState(href);
    const handleUrlUpdate = (v) => {
        setUrl(v);
        onUrlChange?.(v);
    };
    const handleSubmit = () => {
        onChange?.({ href: url });
    };
    const inputEnterKeyHandler = enterKeyHandler(handleSubmit);
    useEffect(() => {
        setUrl(href);
        onUrlChange?.(href);
    }, [href, onUrlChange]);
    return (_jsx(Popup, { open: true, anchorElement: anchorElement, className: b('popup'), placement: placement, onOpenChange: onOpenChange, children: _jsxs("div", { className: b(), children: [_jsx(TextInputFixed, { size: "l", hasClear: true, view: "clear", value: url, className: b('input', { empty: !url }), onUpdate: handleUrlUpdate, placeholder: i18n('link-href-placeholder'), autoFocus: autoFocus, onKeyDown: inputEnterKeyHandler }), url && onRemove && (_jsx(ActionTooltip, { title: i18n('link_remove_help'), children: _jsx(Button, { className: b('button'), view: "flat", size: "m", onClick: onRemove, children: _jsx(Icon, { data: UnlinkIcon, size: 16 }) }) })), url && (_jsx(ActionTooltip, { title: i18n('link_open_help'), children: _jsx(Button, { className: b('button'), view: "flat", size: "m", href: url, target: "_blank", rel: "noopener noreferrer", onClick: onOpenInNewTab, children: _jsx(Icon, { data: LinkIcon, size: 16 }) }) }))] }) }));
});
//# sourceMappingURL=TooltipView.js.map
