import Card from "../card/Card";
import './CardSlider.scss';

const CardSlider = D.declare( 'view.cmp.CardSlider', (cfg) => {
  let current = [],
    hash = {},
    items = [],
    cardWidth = 160,
    minPadding = 20,
    wrap,
    width,
    fullCardsCount,
    padding,
    updateSize = function() {
      width = dom.clientWidth;
      fullCardsCount = width/(cardWidth+minPadding)|0;
      padding = (width-fullCardsCount*cardWidth)/(fullCardsCount-1);
      wrap.style.width = (items.length*(padding+cardWidth)-padding)+'px';
    },
    update = function() {
      updateSize();
      updateVisibleDom();

      /*D.removeChildren(wrap);
      D.appendChild(wrap, items.map(function(item, n) {
        return <div className="cards-list__item">
          <Card
            type={'product,info,other'.split( ',' )[ n % 3 ]}
            disabled={n % 5 === 0}
            seen={n % 4 === 0}
            title={item.name}
            image={item.image}
          />
        </div>
      }));*/
    };


  tmpStore.sub('width', Store.debounce(function(w) {
    //console.log(w)
    update();
  }, 30));


  let dom = <div class='cmp-CardSlider'>
    {wrap = <div class='slides-wrap'>{' '}</div>}
  </div>;

  let lastFrom, lastTo, last = false;
  let updateVisibleDom = function() {
    let from = Math.floor(dom.scrollLeft/(cardWidth+padding)-1),
        count = Math.ceil(dom.clientWidth/(cardWidth+padding)),
        to;
    to = from + count *2;
    from -=count;
    from = Math.max(0, from);
    to = Math.min(to, items.length);

//console.log({from, to, cardWidth, padding})
    for(let i = from; i< to; i++){
      if(!(i in hash)){
        hash[i] = {
          dom: (function(item, n) {
            return <div className="cards-list__item">
              <Card
                type={'product,info,other'.split( ',' )[ n % 3 ]}
                disabled={n % 5 === 0}
                seen={n % 4 === 0}
                title={item.name}
                image={item.image}
              />
            </div>
          })(items[i], i),
          inDOM: false,
          x: 0
        };
      }
    }
    if(last){
      for( let i = lastFrom; i < lastTo; i++ ){
        if(i < from || i >= to){
          if(hash[i].inDOM){
            hash[i].inDOM = false;
            wrap.removeChild(hash[i].dom);
          }
        }
      }
    }
    for(let i = from; i< to; i++){
      let x = i*(cardWidth+padding);
      if(hash[i].x !== x){
        hash[i].dom.style.left = (hash[i].x = x)+'px';
      }
      if(!hash[i].inDOM){
        wrap.appendChild(hash[i].dom);
        hash[i].inDOM = true;
      }
    }


    lastFrom = from;
    lastTo = to;
    last = true;

  };

  dom.addEventListener('scroll', Store.debounce(function() {
    requestAnimationFrame(updateVisibleDom)
  }, 1000/60));
  cfg.items(function(i) {
    items = i;
    //update();

    update();

  });

  return dom;
} );

export default CardSlider;
export { CardSlider };