import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Video } from "lucide-react";
import { useEffect, useState } from "react";
import { useSlate } from "slate-react";
import { Button } from "../../button";
import { Input } from "../../input";
import { ModalContainer } from "../../modal/modalContainer";
import { ModalFooter } from "../../modal/modalFooter";
import { ModalHeader } from "../../modal/modalHeader";
import "./styles.css";
function InsertVideo(props) {
    const { modalCancelButton = "Cancelar", modalConfirmButton = "Confirmar", modalInputUrlLabel = "URL do vídeo:", modalTitle = "Inserir vídeo", invalidUrlMessage = "URL inválida", } = props;
    const editor = useSlate();
    const [modalIsVisible, setModalIsVisible] = useState(false);
    const [videoId, setVideoId] = useState("");
    const [videoRawURL, setVideoRawURL] = useState("");
    const [errorMessage, setErrorMessage] = useState("");
    function handleMouseDown(event) {
        event.preventDefault();
        if (!videoId || videoId === "")
            return;
        const videoUrl = `https://www.youtube.com/embed/${videoId}`;
        editor.insertNodes([
            { type: "paragraph", children: [{ text: "" }] },
            { type: "video", src: videoUrl, children: [{ text: "" }] },
            { type: "paragraph", children: [{ text: "" }] },
        ]);
        setModalIsVisible(false);
    }
    useEffect(() => {
        if (!videoRawURL || videoRawURL === "")
            return;
        setVideoId("");
        setErrorMessage("");
        const searchParams = new URLSearchParams(videoRawURL.split("?")[1]);
        const vParam = searchParams.get("v");
        if (vParam)
            setVideoId(vParam);
        else
            setErrorMessage(invalidUrlMessage);
    }, [videoRawURL]);
    useEffect(() => {
        if (!modalIsVisible) {
            setVideoId("");
            setVideoRawURL("");
            setErrorMessage("");
        }
    }, [modalIsVisible]);
    return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "arkynRichTextInsertVideo", onMouseDown: () => setModalIsVisible(true), children: _jsx(Video, {}) }), _jsxs(ModalContainer, { isVisible: modalIsVisible, makeInvisible: () => setModalIsVisible(false), children: [_jsx(ModalHeader, { children: modalTitle }), _jsxs("div", { className: "arkynRichTextInsertVideoModalContent", children: [_jsx(Input, { type: "text", name: "richTextVideoURL", label: modalInputUrlLabel, showAsterisk: true, defaultValue: videoRawURL, onChange: (e) => setVideoRawURL(e.target.value), errorMessage: errorMessage }), videoId && (_jsx("iframe", { width: "auto", height: "315", src: `https://www.youtube.com/embed/${videoId}`, title: "YouTube video player", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share", referrerPolicy: "strict-origin-when-cross-origin", allowFullScreen: true }))] }), _jsxs(ModalFooter, { children: [_jsx(Button, { type: "button", scheme: "danger", variant: "outline", onClick: () => setModalIsVisible(false), children: modalCancelButton }), _jsx(Button, { disabled: !videoId, type: "button", onClick: handleMouseDown, children: modalConfirmButton })] })] })] }));
}
export { InsertVideo };
