import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
import fullscreenIcon from '../../themes/icons/fullscreen.svg';
import fullscreenExitIcon from '../../themes/icons/fullscreen_exit.svg'
import * as QMSCKEditorService from '../common/qmsCKEditorService';
import * as constant from '../common/qmsCKEditorConstant';

export default class QMSCKEditorFullscreenPlugin extends Plugin {
    init() {
        const editor = this.editor;
        editor.ui.componentFactory.add('qmsFullscreen', locale => {
            const view = new ButtonView(locale);

            view.set({
                label: 'Maximine',
                icon: fullscreenIcon,
                tooltip: true
            });
            const fullscreenClass = this.editor.config.get('fullScreenConfig.class') || 'qmsckeditor__fullscreen';

            view.on('execute', () => {
                const ck = window.document.getElementById('qmsckeditor');
                const isFullscreen = ck && ck.classList.contains(fullscreenClass);
                if (!isFullscreen) {
                    view.set({
                        label: 'Minimine',
                        icon: fullscreenExitIcon,
                        tooltip: true
                    });
                    ck.classList.add(fullscreenClass);
                }
                else {
                    view.set({
                        label: 'Maximine',
                        icon: fullscreenIcon,
                        tooltip: true
                    });
                    if (ck.classList.contains(fullscreenClass)) {
                        ck.classList.remove(fullscreenClass);
                    }
                }
                QMSCKEditorService.fullscreenNotify(isFullscreen);
            })

            return view;
        })
    }
}
