import Swal from "sweetalert2";
import Plugin from "./vendor/ckeditor/node_modules/@ckeditor/ckeditor5-core/src/plugin";
import imageIcon from "./vendor/ckeditor/node_modules/@ckeditor/ckeditor5-core/theme/icons/image.svg";
import ButtonView from "./vendor/ckeditor/node_modules/@ckeditor/ckeditor5-ui/src/button/buttonview";

export default class LaravelFileManager extends Plugin {
    init() {
        const editor = this.editor;

        editor.ui.componentFactory.add("laravelFileManager", (locale) => {
            const view = new ButtonView(locale);

            const _onMessage = (event) => {
                if (
                    window.location.origin
                        .toLowerCase()
                        .indexOf(event.origin.toLowerCase()) == 0
                ) {
                    if (event.data.sender == "calliopeWysiwyg") {
                        let imageURL = new URL(event.data.message).pathname
                            .replace(new RegExp("^[/]+"), "")
                            .replace(/^/, "/");

                        if (
                            !["jpg", "png", "jpeg", "gif", "mp4"].includes(
                                imageURL.split(".").pop()
                            )
                        ) {
                            if (Swal) {
                                Swal.fire({
                                    title: "Impossible d'ajouter le fichier",
                                    text: "Seule les images (jpg, jpeg, png, gif) et les vidéos (mp4) sont supportées.",
                                    icon: "error",
                                });
                            } else {
                                alert(
                                    "Impossible d'ajouter le fichier: Seule les images (jpg, jpeg, png, gif) sont supportées."
                                );
                            }
                            return;
                        }

                        if (imageURL.split(".").pop() === "mp4") {
                            editor.model.change((writer) => {
                                const oembed = writer.createElement("oembed", {
                                    url: imageURL,
                                });
                                const figure = writer.createElement(
                                    "figure",
                                    { class: "media" },
                                    [oembed]
                                );

                                const p = writer.createElement(
                                    "p",
                                    null,
                                    "fofofo"
                                );

                                // < video controls allowfullscreen style = "max-width: 90%; margin: 0 auto; display: block;" > ' +
                                //     `<source src="${path}" type="video/mp4">` +
                                //     `<p>Votre navigateur ne prend pas en charge les vidéos HTML5. Voici <a href="${path}">un lien pour télécharger la vidéo</a>.</p>` +
                                //     '</>

                                // Insert the oembed video in the current selection location.
                                // editor.model.insertContent(p, editor.model.document.selection);
                                // console.log('insert')
                                // const insertPosition = editor.model.document.selection.getFirstPosition();
                                // writer.insertText('foo', insertPosition);
                                // editor.model.insertContent(p, insertPosition);
                                // editor.model.insertContent(figure, insertPosition);
                                // console.log(imageURL)
                                editor.execute("mediaEmbed", imageURL);
                            });
                        } else {
                            editor.model.change((writer) => {
                                const imageElement = writer.createElement(
                                    "imageBlock",
                                    {
                                        src: imageURL,
                                    }
                                );

                                // Insert the image in the current selection location.
                                editor.model.insertContent(
                                    imageElement,
                                    editor.model.document.selection
                                );
                            });
                        }
                    }
                }
            };

            view.set({
                label: "Insert image",
                icon: imageIcon,
                tooltip: true,
            });

            view.on("execute", () => {
                window.removeEventListener("message", _onMessage, false);

                window.open(
                    "/file-manager/fm-button?wysiwyg=1",
                    "fm",
                    "width=1400,height=800"
                );
                window.addEventListener("message", _onMessage, false);
            });

            return view;
        });
    }
}