import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Image } from "lucide-react";
import { useState } from "react";
import { useSlate } from "slate-react";
import { Button } from "../../button";
import { ImageUpload } from "../../imageUpload";
import { Input } from "../../input";
import { ModalContainer } from "../../modal/modalContainer";
import { ModalFooter } from "../../modal/modalFooter";
import { ModalHeader } from "../../modal/modalHeader";
import { TabButton } from "../../tab/tabButton";
import { TabContainer } from "../../tab/tabContainer";
import "./styles.css";
function InsertImage(props) {
    const { action, tabLabels = ["Adicionar URL", "Upload de arquivo"], modalCancelButton = "Cancelar", modalConfirmButton = "Confirmar", modalInputImageLabel = "Imagem:", modalInputUrlLabel = "URL da imagem:", modalTitle = "Inserir imagem", } = props;
    const editor = useSlate();
    const [modalIsVisible, setModalIsVisible] = useState(false);
    const [imageURL, setImageURL] = useState("");
    const [uploadType, setUploadType] = useState("url");
    function handleMouseDown(event) {
        event.preventDefault();
        if (!imageURL || imageURL === "")
            return;
        editor.insertNodes([
            { type: "paragraph", children: [{ text: "" }] },
            { type: "image", src: imageURL, children: [{ text: "" }] },
            { type: "paragraph", children: [{ text: "" }] },
        ]);
        setModalIsVisible(false);
    }
    return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "arkynRichTextInsertImage", onMouseDown: () => setModalIsVisible(true), children: _jsx(Image, {}) }), _jsxs(ModalContainer, { isVisible: modalIsVisible, makeInvisible: () => setModalIsVisible(false), children: [_jsx(ModalHeader, { children: modalTitle }), _jsxs("div", { className: "arkynRichTextInsertImageModalContent", children: [_jsxs(TabContainer, { defaultValue: uploadType, onChange: setUploadType, children: [_jsx(TabButton, { value: "url", children: tabLabels[0] }), _jsx(TabButton, { value: "file", children: tabLabels[1] })] }), uploadType === "url" && (_jsxs(_Fragment, { children: [_jsx(Input, { type: "text", name: "richTextImageURL", label: modalInputUrlLabel, showAsterisk: true, defaultValue: imageURL, onChange: (e) => setImageURL(e.target.value) }), imageURL && (_jsx("img", { className: "arkynRichTextInsertImageModalPreviewImage", src: imageURL, alt: "preview" }))] })), uploadType === "file" && (_jsx(ImageUpload, { name: "richTextImageURL", action: action, label: modalInputImageLabel, showAsterisk: true, defaultValue: imageURL, onChange: (url) => setImageURL(url) }))] }), _jsxs(ModalFooter, { children: [_jsx(Button, { type: "button", scheme: "danger", variant: "outline", onClick: () => setModalIsVisible(false), children: modalCancelButton }), _jsx(Button, { type: "button", onClick: handleMouseDown, children: modalConfirmButton })] })] })] }));
}
export { InsertImage };
