(function() {
const { log, warn, error } = console;
const BM = editor.BlockManager;
const DC = editor.DomComponents;

var defaultType = DC.getType('default');
var defaultModel = defaultType.model;
var defaultView = defaultType.view;


// test video component
DC.addType( 'my-video-comp', {
  model: defaultModel.extend( {
    defaults: Object.assign( {}, defaultModel.prototype.defaults, {
      draggable: true,
      droppable: true,
      traits: [ 'src' ],
      content: '<video class="my-video-player"></video>',
      style: { position: 'relative', width: '10cm', height: '6cm' },
    } ),
  },
  {
    isComponent( el ) {
      return el.classList.contains('my-video');
    }
  } ),
  view: defaultView.extend( {
    events: {
    },
    render() {
      defaultView.prototype.render.apply(this, arguments);
      let el = this.el;
      let attr = el.attributes;
      let videoel = el.firstChild;
      videoel.src = attr.src.value;
      videoel.autoplay = true;
      // styles must be in right place
      videoel.style = "position: absolute; width: inherit; height: auto; top: 0; left: 0; z-index: -1;";
      el.style.position = 'relative';
      el.style[ 'z-index' ] = 2;
      return this;
    }
  } )
} );

// replace builtin component
BM.get('video').attributes.content.type = 'my-video-comp';


editor.on('component:add', function( ...args ) {
  log( 'component add', ...args )
} );
editor.on('component:remove', function( ...args ) {
  log( 'component remove', ...args )
} );

})();