import {Component} from 'cmp/Component.jsx';

var x = 0;

var List = new Component({
  ctor: function(){
    this.lastBound = this.dom = document.createTextNode('');
    this.items = this.items.array();
    this.els = [];

    this.initEls();
    this.bindEvents();

    console.log(this.dom);
    console.log(window.w = this.items)
  },
  bindEvents: function() {
    var els = this.els,
        _self = this;

    this.items.on('add', function(item, after, before, pos) {
      var count = _self.items.length;
      var wrapped = _self.createItem(item, pos, count);

      if(wrapped.isLast.get()){
        els[els.length-1].isLast.set(false);
        els.push(wrapped);
        D.insertBefore(wrapped.el, _self.lastBound);
      }else{

        var where = _self.lastBound;

        // IF NEXT ITEM EL\S IS EMPTY
        for(var p = pos, _p = els.length; p < _p; p++){
          var wrappedItem = els[p];
          if(wrappedItem.el && wrappedItem.el.length){
            where = wrappedItem.el[0];
            break;
          }
        }
        els.splice(pos, 0, wrapped);
        D.insertBefore(wrapped.el, where);
      }

      if(pos === 0){
        if(els.length>1){
          els[ 1 ].isFirst.set( false );
        }
      }

      for( var i = 0, _i = els.length; i < _i; i++ ){
        var el = els[ i ];
        el.index.set(i);
      }

    });
    this.items.on('remove', function(item,before,after,pos) {
      var subEl;
      var item = _self.els[pos],
          els = item.el,
          parent;
      if(!els || !els.length){
        return;
      }
      parent = els[0].parentNode;
      var isInDOM = D.isInDOM(els[0]);

      while((subEl = els.pop())){
        isInDOM && D._recursiveCmpCall(parent, subEl, 'beforeRemoveFromDOM');
        parent.removeChild(subEl);
        isInDOM && D._recursiveCmpCall(parent, subEl, 'afterRemoveFromDOM');
      }
      _self.els.splice(pos, 1);

      for( var i = 0, _i = _self.els.length; i < _i; i++ ){
        var el = _self.els[ i ];
        el.index.set(i);
      }
      if(_self.els.length>0){
        _self.els[0].isFirst.set(true);
        _self.els[_i - 1].isLast.set(true);
      }

    });
  },
  createItem: function(item, i, _i) {
    var index = new Store.Value.Integer(i),
      isFirst = new Store.Value.Boolean(i === 0),
      isLast = new Store.Value.Boolean(i === _i-1),
      storeItem = new Store(item),
      data = {isFirst: isFirst, isLast: isLast, index: index, item: storeItem},
      fragment = [],

      children = this.children;

    storeItem.setParent(this.items, void 0, item);

    for( var j = 0, _j = children.length; j < _j; j++ ){
      var child = children[ j ],
          el = child.call(this, storeItem, index, isFirst, isLast, this);
      fragment.push(el);
    }
    data.el = fragment;

    return data;
  },
  prop: {
    items: {type: Array}
  },
  initEls: function(a,b) {
    var items = this.items.get(),
        fragment = document.createDocumentFragment();

    var arr = [];
    for( var i = 0, _i = items.length; i < _i; i++ ){
      var item = items[ i ];
      var wrapped = this.createItem(item, i, _i);
      this.els.push(wrapped);
      //D.appendChild(fragment, wrapped.el)
      arr.push(wrapped.el);
    }
    //this.dom = arr;
    //fragment.appendChild(this.dom);
    arr.push(this.dom);
    this.dom = arr;//fragment;
    //.parentNode.insertBefore(fragment, this.dom);
    //this.dom.parentNode.replaceChild(fragment, this.dom);
  }
});


export { List };