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', () => {
                if (window.removeEventListener) {
                    window.removeEventListener('message', _onMessage, false)
                } else {
                    window.detachEvent('onmessage', _onMessage)
                }
                window.open('/file-manager/fm-button?wysiwyg=1', 'fm', 'width=1400,height=800');
                if (window.addEventListener) {
                    window.addEventListener('message', _onMessage, false);
                } else {
                    window.attachEvent('onmessage', _onMessage)
                }
            });

            return view;
        });
    }
}