export default (editor, options) => {
  editor.TraitManager.addType('imageSelector', {
    events: {
      'click button': 'handleClick'
    },

    handleClick() {
      const self = this;
      editor.runCommand('open-assets', {
          target: self.model,
          types: ['image'],
          accept: 'image/*',
          onSelect(model) {
              const src = model.id;
              self.$el.find('input').val(src);
              self.model.set('value', src);
              editor.Modal.close();
              editor.AssetManager.setTarget(null);
          }
      });
    },

    setInputValue(value) {
      this.$input.get(0).children[0].children.value = value;
    },

    getInputEl() {
      if (!this.$input) {
        const { model, ppfx } = this;
        const value = this.getModelValue(); 
        const className = `${ppfx}image-selector`;
        const input = `<div class=${className}><div class="${ppfx}input-holder"><input type="text" value="${value}" /></div> <button class="${ppfx}btn-prim"><i class="fa fa-image"></i></button></div>`;
        this.input = input;
        this.$input = $(input);
      }
  
      return this.$input.get(0);
    },
    renderField() {
      if (!this.$input) {
        this.getInputEl();
        this.$el.find('.' + this.ppfx + 'field').html(this.input);
      }
    },
  })
}