import rt from "./rt.js";
import events from "./events.js";

const calcItems = () => {
  const cs = window.getComputedStyle(rt.ct.content);
  const height = parseInt(cs.height.replace("px", ""));
  const width = parseInt(cs.width.replace("px", ""));
  const cols = ~~(width  / ( rt.layout.itemsize + rt.layout.margin ));
  const rows = ~~(height / ( rt.layout.itemsize + rt.layout.margin ));
  
  rt.ct.wrapper.pages.forEach(e => {
    e.style.marginLeft = Math.max((width  - (cols * (rt.layout.itemsize + rt.layout.margin)) + rt.layout.margin) / rt.layout.min_rows, 0) * 1.5 + "px";
    e.style.paddingTop = Math.max((height - (rows * (rt.layout.itemsize + rt.layout.margin)) + rt.layout.margin) / rt.layout.min_rows, 0) * 3 + "px";
  });

  return {
    rows: rows,
    cols: cols,
    eps: rows * cols,
    width: width,
    height: height
  };
};

const getItems = async ({ el, opt = "" }) => {
  const tmp = calcItems();
  if(tmp.eps === rt.items.eps)
    return;
  rt.items.eps = tmp.eps;
  el.innerHTML = "";
  const i = await (await fetch(`${rt.api}/p?eps=${tmp.eps}&${opt}`)).json();
  
  const items = i.items.sort((a, b) => b.id - a.id);
  items.forEach(item => {
    const _a = document.createElement("a");
    _a.title = item.mime;
    _a.href = `#${item.id}`;//`${rt.url}/${item.id}`;
    const _img = document.createElement("img");
    _img.classList.add("thumb");
    _img.src = `${rt.url}/t/${item.id}.png`;
    _a.insertAdjacentElement("afterbegin", _img);
    el.insertAdjacentElement("beforeend", _a);
  });
  rt.items.first = items[0].id;
  rt.items.last = items[items.length - 1].id;
  rt.items.oldest = i.oldest;
  rt.items.newest = i.newest;

  rt.tmp.hash = false;
  window.history.pushState(rt.items.first, `f0ck.me! page ${rt.items.first}`, `/page/${rt.items.first}${(window.location.hash?window.location.hash:"")}`);
  rt.tmp.hash = true;

  rt.ct.header.pagepos.innerHTML = `items ${rt.items.first} - ${rt.items.last}`;
};

const getItem = async itemid => {
  return await (await fetch(`${rt.api}/item/${itemid}`)).json();
};

const scrolltomiddle = el => {
  el[0].scrollIntoView({ block: rt.vars.block });
  el[2].scrollIntoView({ block: rt.vars.block });
  el[1].scrollIntoView({ block: rt.vars.block });
};

const closeItemview = () => {
  rt.tmp.hash = false;
  window.location.hash = "";
  rt.ct.tabs.item.removeEventListener("click", closeItemview);
  rt.ct.wrapper.pages[1].querySelectorAll("a > img").forEach(f => {
    f.style.boxShadow = null;
    f.style.borderRadius = null;
    f.style.transition = ".1s ease-out";
  });
  rt.ct.wrapper.items[1].innerHTML = "";
  showLayer("page", true);
};

const showLayer = (layer, scroll = true) => {
  // hide all pages
  console.log(layer, rt.tmp.layer);
  if(layer === rt.tmp.layer)
    return;
  rt.tmp.layer = layer;
  for(let e in rt.ct.tabs)
    rt.ct.tabs[e].style.display = "none";

  rt.tmp.events.page = false;
  rt.tmp.events.item = false;
  
  switch(layer) {
    case "page":
      rt.tmp.events.page = true;
      if(scroll)
        scrolltomiddle(rt.ct.wrapper.pages);

      rt.ct.header.pagepos.style.display = "block";
      rt.ct.header.itempos.style.display = "none";
      rt.ct.header.iteminfo.style.display = "none";
    break;
    case "item":
      rt.ct.tabs.item.style.display = "block";
      rt.tmp.events.item = true;

      rt.ct.tabs.item.addEventListener("click", closeItemview);

      if(scroll)
        scrolltomiddle(rt.ct.wrapper.items);

      rt.ct.header.pagepos.style.display = "none";
      rt.ct.header.itempos.style.display = "block";
      rt.ct.header.iteminfo.style.display = "block";
    break;
    case "howto":
      rt.ct.tabs.howto.style.display = "block";
    break;
  }
  rt.tmp.scroll = false;
};

export default { // oof
  calcItems: calcItems,
  getItems: getItems,
  getItem: getItem,
  showLayer: showLayer,
  scrolltomiddle: scrolltomiddle,
  closeItemview: closeItemview
};