import { jsx, jsxs } from "react/jsx-runtime";
import { useMemo, useState } from "react";
import { Button, CloseIcon, IconButton, Input, Modal } from "@byline/ui/react";
import { URL_MATCHER } from "@lexical/react/LexicalAutoEmbedPlugin";
import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
import "./auto-embed-modal.css";
const debounce = (callback, delay)=>{
    let timeoutId;
    return (text)=>{
        window.clearTimeout(timeoutId);
        timeoutId = window.setTimeout(()=>{
            callback(text);
        }, delay);
    };
};
function AutoEmbedModal({ open, embedConfig, onClose }) {
    const [text, setText] = useState('');
    const [editor] = useLexicalComposerContext();
    const [embedResult, setEmbedResult] = useState(null);
    const validateText = useMemo(()=>debounce((inputText)=>{
            const urlMatch = URL_MATCHER.exec(inputText);
            if (null != embedConfig && null != inputText && null != urlMatch) Promise.resolve(embedConfig.parseUrl(inputText)).then((parseResult)=>{
                setEmbedResult(parseResult);
            });
            else if (null == embedResult) setEmbedResult(null);
        }, 200), [
        embedConfig,
        embedResult
    ]);
    const handleOnSubmit = ()=>{
        if (null != embedResult) {
            embedConfig.insertNode(editor, embedResult);
            onClose();
        }
    };
    const handleOnClose = ()=>{
        setText('');
        setEmbedResult(null);
        onClose();
    };
    if (null == embedConfig) return null;
    return /*#__PURE__*/ jsx(Modal, {
        isOpen: open,
        onDismiss: handleOnClose,
        closeOnOverlayClick: false,
        children: /*#__PURE__*/ jsxs(Modal.Container, {
            className: "auto-embed-modal-container",
            children: [
                /*#__PURE__*/ jsxs(Modal.Header, {
                    className: "auto-embed-modal-header",
                    children: [
                        /*#__PURE__*/ jsx("h3", {
                            children: embedConfig.contentName
                        }),
                        /*#__PURE__*/ jsx(IconButton, {
                            "arial-label": "Close",
                            size: "sm",
                            onClick: handleOnClose,
                            children: /*#__PURE__*/ jsx(CloseIcon, {
                                width: "16px",
                                height: "16px",
                                svgClassName: "white-icon"
                            })
                        })
                    ]
                }),
                /*#__PURE__*/ jsx(Modal.Content, {
                    className: "auto-embed-modal-content",
                    children: /*#__PURE__*/ jsx(Input, {
                        id: "text",
                        name: "text",
                        placeholder: embedConfig.exampleUrl,
                        value: text,
                        "data-test-id": `${embedConfig.type}-embed-modal-url`,
                        onChange: (e)=>{
                            const { value } = e.target;
                            setText(value);
                            validateText(value);
                        }
                    })
                }),
                /*#__PURE__*/ jsxs(Modal.Actions, {
                    className: "auto-embed-modal-actions",
                    children: [
                        /*#__PURE__*/ jsx(Button, {
                            size: "sm",
                            intent: "noeffect",
                            onClick: handleOnClose,
                            "data-test-id": `${embedConfig.type}-embed-modal-cancel-btn`,
                            children: "Cancel"
                        }),
                        /*#__PURE__*/ jsx(Button, {
                            size: "sm",
                            disabled: null == embedResult,
                            onClick: handleOnSubmit,
                            "data-test-id": `${embedConfig.type}-embed-modal-submit-btn`,
                            children: "Embed"
                        })
                    ]
                })
            ]
        })
    });
}
export { AutoEmbedModal };
