import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { filenameFromURL, } from "@endexai/blocknote-core";
import { useCallback, useState } from "react";
import { useComponentsContext } from "../../../editor/ComponentsContext.js";
import { useBlockNoteEditor } from "../../../hooks/useBlockNoteEditor.js";
import { useDictionary } from "../../../i18n/dictionary.js";
export const EmbedTab = (props) => {
    const Components = useComponentsContext();
    const dict = useDictionary();
    const { block } = props;
    const editor = useBlockNoteEditor();
    const [currentURL, setCurrentURL] = useState("");
    const handleURLChange = useCallback((event) => {
        setCurrentURL(event.currentTarget.value);
    }, []);
    const handleURLEnter = useCallback((event) => {
        if (event.key === "Enter") {
            event.preventDefault();
            editor.updateBlock(block, {
                props: {
                    name: filenameFromURL(currentURL),
                    url: currentURL,
                },
            });
        }
    }, [editor, block, currentURL]);
    const handleURLClick = useCallback(() => {
        editor.updateBlock(block, {
            props: {
                name: filenameFromURL(currentURL),
                url: currentURL,
            },
        });
    }, [editor, block, currentURL]);
    return (_jsxs(Components.FilePanel.TabPanel, { className: "bn-tab-panel", children: [_jsx(Components.FilePanel.TextInput, { className: "bn-text-input", placeholder: dict.file_panel.embed.url_placeholder, value: currentURL, onChange: handleURLChange, onKeyDown: handleURLEnter, "data-test": "embed-input" }), _jsx(Components.FilePanel.Button, { className: "bn-button", onClick: handleURLClick, "data-test": "embed-input-button", children: dict.file_panel.embed.embed_button[block.type] ||
                    dict.file_panel.embed.embed_button["file"] })] }));
};
//# sourceMappingURL=EmbedTab.js.map