import { ButtonView, Plugin } from '../../ckeditor/5-43.3.1/ckeditor5.js';

/**
 * Plugin para permitir exibir o editor em tela-cheia.
 */
export default class FullScreen extends Plugin {
    async init() {
        const icones = await (await fetch(new URL('../../imgs/fa/6.6.0/fa-solid.svg', import.meta.url))).text();
        const parser = new DOMParser();
        const doc = parser.parseFromString(icones, 'image/svg+xml');
        const iconeMaximize = doc.querySelector('#maximize');
        this.editor.ui.componentFactory.add(
            'fullScreen',
            /**
             * @param {string} locale
             */
            (locale) => {
                const view = new ButtonView(locale);
                const icone = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="' + iconeMaximize.getAttribute('viewBox') + '">' + iconeMaximize.innerHTML + '</svg>';
                const iconeSair = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="' + iconeMaximize.getAttribute('viewBox') + '">' + iconeMaximize.innerHTML + '</use></svg>';

                view.set({
                    label: 'Tela-Cheia',
                    icon: icone,
                    tooltip: true,
                    isToggleable: true,
                });

                if (document.addEventListener) {
                    document.addEventListener(
                        'fullscreenchange',
                        () => {
                            if (!document.fullscreenElement) {
                                const editorElement = this.editor.ui.view.element;
                                editorElement.classList.remove('govbr-editor-fullscreen');
                                view.set({
                                    label: 'Tela-Cheia',
                                    icon: icone,
                                });
                            }
                        },
                        false
                    );
                }

                view.on('execute', () => {
                    const editorElement = this.editor.ui.view.element;

                    if (editorElement.classList.contains('govbr-editor-fullscreen')) {
                        editorElement.classList.remove('govbr-editor-fullscreen');
                        view.set({
                            label: 'Tela-Cheia',
                            icon: icone,
                        });
                        (async () => {
                            if (document.fullscreenElement) {
                                await document.exitFullscreen();
                            }
                        })();
                    } else {
                        editorElement.classList.add('govbr-editor-fullscreen');
                        view.set({
                            label: 'Sair da Tela-Cheia',
                            icon: iconeSair,
                        });
                        (async () => {
                            if (document.fullscreenElement) {
                                await document.exitFullscreen();
                            }
                            await editorElement.requestFullscreen();
                        })();
                    }
                });

                return view;
            }
        );
    }
}
