text: import snippet from 'tui-code-snippet';
  import Colorpicker from './tools/colorpicker';
  import Submenu from './submenuBase';
  import templateHtml from './template/submenu/icon';
  import {isSupportFileApi} from '../util';
  import {defaultIconPath} from '../consts';
  
  /**
   * Icon ui class
   * @class
   * @ignore
   */
  class Icon extends Submenu {
      constructor(subMenuElement, {locale, iconStyle, menuBarPosition}) {
          super(subMenuElement, {
              locale,
              name: 'icon',
              iconStyle,
              menuBarPosition,
              templateHtml
          });
  
          this.iconType = null;
          this._iconMap = {};
  
          this._els = {
              registIconButton: this.selector('#tie-icon-image-file'),
              addIconButton: this.selector('#tie-icon-add-button'),
              iconColorpicker: new Colorpicker(this.selector('#tie-icon-color'), '#ffbb3b', this.toggleDirection)
          };
      }
  
      /**
       * Add event for icon
       * @param {Object} actions - actions for icon
       *   @param {Function} actions.registCustomIcon - register icon
       *   @param {Function} actions.addIcon - add icon
       *   @param {Function} actions.changeColor - change icon color
       */
      addEvent(actions) {
          this.actions = actions;
  
          this._els.iconColorpicker.on('change', this._changeColorHandler.bind(this));
          this._els.registIconButton.addEventListener('change', this._registeIconHandler.bind(this));
          this._els.addIconButton.addEventListener('click', this._addIconHandler.bind(this));
      }
  
      /**
       * Clear icon type
       */
      clearIconType() {
          this._els.addIconButton.classList.remove(this.iconType);
          this.iconType = null;
      }
  
      /**
       * Register default icon
       */
      registDefaultIcon() {
          snippet.forEach(defaultIconPath, (path, type) => {
              this.actions.registDefalutIcons(type, path);
          });
      }
  
      /**
       * Set icon picker color
       * @param {string} iconColor - rgb color string
       */
      setIconPickerColor(iconColor) {
          this._els.iconColorpicker.color = iconColor;
      }
  
      /**
       * Returns the menu to its default state.
       */
      changeStandbyMode() {
          this.clearIconType();
          this.actions.cancelAddIcon();
      }
  
      /**
       * Change icon color
       * @param {string} color - color for change
       * @private
       */
      _changeColorHandler(color) {
          color = color || 'transparent';
          this.actions.changeColor(color);
      }
  
      /**
       * Change icon color
       * @param {object} event - add button event object
       * @private
       */
      _addIconHandler(event) {
          const button = event.target.closest('.tui-image-editor-button');
  
          if (button) {
              const iconType = button.getAttribute('data-icontype');
              const iconColor = this._els.iconColorpicker.color;
              this.actions.discardSelection();
              this.actions.changeSelectableAll(false);
              this._els.addIconButton.classList.remove(this.iconType);
              this._els.addIconButton.classList.add(iconType);
  
              if (this.iconType === iconType) {
                  this.changeStandbyMode();
              } else {
                  this.actions.addIcon(iconType, iconColor);
                  this.iconType = iconType;
              }
          }
      }
  
      /**
       * register icon
       * @param {object} event - file change event object
       * @private
       */
      _registeIconHandler(event) {
          let imgUrl;
  
          if (!isSupportFileApi) {
              alert('This browser does not support file-api');
          }
  
          const [file] = event.target.files;
  
          if (file) {
              imgUrl = URL.createObjectURL(file);
              this.actions.registCustomIcon(imgUrl, file);
          }
      }
  }
  
  export default Icon;
  