import cfg from './cfg.js';
import { getposall } from './helper.js';

export const eventrt = {
  track: null,
  scroll: false,
  dims: null,
  hash: window.location.hash,
};

// <track>
const tracktopevent = new CustomEvent('top', { bubbles: true });
Object.defineProperty(cfg.container.thumbs, 'top', {
  set: function(top) {
    this.style.top = top;
    this.dispatchEvent(tracktopevent);
  }
});

export const tracktop = e => {
  eventrt.track = getposall(e.target.querySelectorAll("a.thumb"));
  //console.log(eventrt.track);
};
// </track>

// <scroll>
export const scroll = e => {
  if(e.preventDefault)
    e.preventDefault();
  const deltaY = e.deltaY < 0?-1:1; // - up, + down

  if(!eventrt.scroll) {
    eventrt.scroll = true;
    const dura = 500;
    const top = parseInt(cfg.container.thumbs.style.top.replace("px",""));
    const go = `${(top + (-deltaY * ((cfg.layout.items.size + cfg.layout.items.gutter) * cfg.misc.scrollrows)))}`;
    cfg.container.thumbs.animate( [{ top: `${top}px` }, { top: `${go}px` } ], { duration: dura } );
    setTimeout(() => { // after scroll
      cfg.container.thumbs.top = `${go}px`;
      eventrt.scroll = false;

      console.log( [...new Set([...cfg.container.thumbs.querySelectorAll("a.thumb")].map(e => {
        return [e.children[0], e.parentNode].reduce((a,b) => a.offsetTop + b.offsetTop);
      }))] );


    }, dura);
  }
};
// </scroll>

// <resize>
export const resize = e => {
  let rows = Math.max(~~((window.innerHeight - cfg.layout.min_margin + cfg.layout.items.size) / (cfg.layout.items.size + cfg.layout.items.gutter)), cfg.layout.min_rows);
  let cols = Math.max(~~((window.innerWidth - cfg.layout.min_margin) / (cfg.layout.items.size + cfg.layout.items.gutter)), cfg.layout.min_cols);
  let pageWidth = cols * (cfg.layout.items.size + cfg.layout.items.gutter);
  let margin = Math.max((window.innerWidth - pageWidth + cfg.layout.items.gutter) / cfg.layout.min_rows, 0);
  cfg.container.page.style.width = pageWidth;
  cfg.container.page.style.marginLeft = margin;
  eventrt.dims = {
    rows: rows,
    cols: cols,
    eps: rows * cols,
    pageWidth: pageWidth,
    margin: margin
  };
};
// <resize>

// <hash>
export const hash = e => {
  eventrt.hash = window.location.hash;
  console.log(eventrt.hash);
};
// </hash>


// bind events
window.addEventListener("resize", resize);
window.dispatchEvent(new Event('resize'));
document.addEventListener("wheel", scroll);
cfg.container.thumbs.addEventListener('top', tracktop);
window.addEventListener("hashchange", hash);