"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Edit = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const BasicButtonClose_1 = require("nice-ui/lib/2-inline-block/BasicButton/BasicButtonClose");
const Button_1 = require("nice-ui/lib/2-inline-block/Button");
const ContextTitle_1 = require("nice-ui/lib/4-card/ContextMenu/ContextTitle");
const EmptyState_1 = require("nice-ui/lib/4-card/EmptyState");
const ContextMenu_1 = require("nice-ui/lib/4-card/ContextMenu");
const CollaborativeInput_1 = require("../../../../../components/CollaborativeInput");
const Input_1 = require("../../../../../components/Input");
const hooks_1 = require("../../../../../web/react/hooks");
const UrlDisplayCard_1 = require("../../../cards/UrlDisplayCard");
const Iconista_1 = require("nice-ui/lib/icons/Iconista");
const use_t_1 = require("use-t");
const Edit = ({ formatting, onSave }) => {
    const [t] = (0, use_t_1.useT)();
    const inpRef = React.useRef(null);
    const titleRef = React.useRef(null);
    const [showTitle, setShowTitle] = React.useState(!!formatting.conf()?.view()?.title);
    const href = React.useMemo(() => () => formatting.conf()?.str(['href']), [formatting]);
    const titleStr = React.useMemo(() => () => formatting.conf()?.str(['title']), [formatting]);
    const data = (0, hooks_1.useSyncStoreOpt)(formatting.conf().events) || { url: '' };
    if (!href())
        return null;
    const str = href;
    const title = (React.createElement("div", { style: { padding: '8px 0 0' } }, showTitle ? (React.createElement(CollaborativeInput_1.CollaborativeInput, { str: titleStr, input: (connect) => (React.createElement(Input_1.Input, { inp: (el) => {
                connect(el);
                titleRef.current = el;
            }, onKeyDown: (e) => {
                if (e.key === 'Enter') {
                    e.preventDefault();
                    onSave();
                }
            }, type: 'text', size: -1, placeholder: t('Title') })) })) : !data.href ? null : (React.createElement(Button_1.Button, { icon: React.createElement(Iconista_1.Iconista, { set: 'lucide', icon: 'plus', width: 16, height: 16 }), size: -1, outline: true, ghost: true, radius: 2, style: { borderStyle: 'dashed' }, onClick: () => {
            if (typeof formatting.conf()?.view()?.title !== 'string') {
                formatting.conf().set({ title: '' });
            }
            setShowTitle(true);
            setTimeout(() => {
                titleRef.current?.focus();
            }, 20);
        } }, t('Title')))));
    return (React.createElement("div", { style: { margin: -16 } },
        React.createElement("div", { style: { padding: 16 } },
            React.createElement(CollaborativeInput_1.CollaborativeInput, { str: str, input: (ref) => (React.createElement(Input_1.Input, { focus: true, select: true, inp: (connect) => {
                        ref(connect);
                        inpRef.current = connect;
                    }, type: 'text', size: -1, placeholder: 'https://', onKeyDown: (e) => {
                        if (e.key === 'Enter') {
                            e.preventDefault();
                            onSave();
                        }
                    }, right: React.createElement("div", { style: { paddingRight: 8, width: 24, height: 24 } }, !!data.href && (React.createElement(BasicButtonClose_1.BasicButtonClose, { onClick: () => {
                            const hrefApi = href();
                            if (hrefApi)
                                hrefApi.del(0, hrefApi.length());
                            inpRef.current?.focus();
                        } }))) })) }),
            title),
        React.createElement(ContextMenu_1.ContextSep, { line: true }),
        React.createElement(ContextMenu_1.ContextSep, null),
        React.createElement(ContextTitle_1.ContextTitle, null, "Preview"),
        !!data && data.href.length > 3 ? (React.createElement("div", { style: { display: 'flex', padding: '14px 32px 26px', alignItems: 'center', justifyContent: 'center' } },
            React.createElement(UrlDisplayCard_1.UrlDisplayCard, { url: data.href, title: data.title }))) : (React.createElement("div", { style: { margin: '-32px 0 -26px' } },
            React.createElement(EmptyState_1.EmptyState, { emoji: " ", title: " " })))));
};
exports.Edit = Edit;
//# sourceMappingURL=Edit.js.map