import { Plugin } from '@ckeditor/ckeditor5-core';
import { ButtonView, ContextualBalloon } from '@ckeditor/ckeditor5-ui';
import imageMapIcon from '../../themes/icons/imagemap.svg';
import { IMAGEMAP_COMMANDS } from './utils';

 export default class ImageMapUI extends Plugin {

     static get requires() {
         return [ ContextualBalloon];
     }

     static get pluginName() {
         return 'ImageMapUI';
     }

     init() {
        this._createButton();

     }

     destroy() {
        super.destroy();
     }

     _createButton() {
         const editor = this.editor;
         const t = editor.t;

         editor.ui.componentFactory.add('imageMap', locale => {
             const command = editor.commands.get(IMAGEMAP_COMMANDS.IMAGEMAP_DIALOG);
             const view = new ButtonView(locale);

             view.set({
                 label: t('Image Map'),
                 icon: imageMapIcon,
                 tooltip: true
             });

             view.bind('isEnabled').to(command, 'isEnabled');

             this.listenTo(view, 'execute', () => {
                editor.execute(IMAGEMAP_COMMANDS.IMAGEMAP_DIALOG);
             });

             return view;
         });
     }
 }
