import * as React from 'react';
import { BasicButtonClose } from 'nice-ui/lib/2-inline-block/BasicButton/BasicButtonClose';
import { Button } from 'nice-ui/lib/2-inline-block/Button';
import { ContextTitle } from 'nice-ui/lib/4-card/ContextMenu/ContextTitle';
import { EmptyState } from 'nice-ui/lib/4-card/EmptyState';
import { ContextSep } from 'nice-ui/lib/4-card/ContextMenu';
import { CollaborativeInput } from '../../../../../components/CollaborativeInput';
import { Input } from '../../../../../components/Input';
import { useSyncStoreOpt } from '../../../../../web/react/hooks';
import { UrlDisplayCard } from '../../../cards/UrlDisplayCard';
import { Iconista } from 'nice-ui/lib/icons/Iconista';
import { useT } from 'use-t';
export const Edit = ({ formatting, onSave }) => {
    const [t] = 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 = 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, { str: titleStr, input: (connect) => (React.createElement(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, { icon: React.createElement(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, { str: str, input: (ref) => (React.createElement(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, { onClick: () => {
                            const hrefApi = href();
                            if (hrefApi)
                                hrefApi.del(0, hrefApi.length());
                            inpRef.current?.focus();
                        } }))) })) }),
            title),
        React.createElement(ContextSep, { line: true }),
        React.createElement(ContextSep, null),
        React.createElement(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, { url: data.href, title: data.title }))) : (React.createElement("div", { style: { margin: '-32px 0 -26px' } },
            React.createElement(EmptyState, { emoji: " ", title: " " })))));
};
//# sourceMappingURL=Edit.js.map