class f0ck {
  constructor(hash = "") {
    /*this.tpl = {
      row: ({ rowid, items }) => `<div class="row" data-row="${rowid}">${items}</div>`,
      item: ({ id, title, stamp }) => `<a href="//f0ck.me/${id}" data-stamp="${stamp}" class="thumb" style="background-image:url('//f0ck.me/t/${id}.png')"></a>`,
    };*/

    this.tpl = {
      row: ({ rowid, items }) => `<div class="row" data-row="${rowid}">${items}</div>`,
      item: ({ stamp }) => `<a href="#" data-stamp="${stamp}" class="thumb" style="background-color: #0f0;"></a>`,
    };
    this._layout = {
      items: {
        size: 128,
        gutter: 8
      },
      min_margin: 16,
      min_rows: 2,
      min_cols: 3
    };
    this.tmp = {
      first: 0,
      last: 0
    }
    this._lastmode = "desc";
    this.scrollrows = 4;
    this._dims = null;
    this.init_events();
    this._scroll = false;
    this._items = new Map();
    this.tmphash = null;
    this.hash = hash; //setter
  }

  render(tmp = null) {
    if(tmp !== null) {
      tmp.forEach(e => {
        this._items.set(e.stamp, e);
      });

      /*let tmprow = "";
      for(let rows = 0; rows < this._dims.rows; rows++) {
        tmprow += [{ }]
        for(let cols = 0; cols < this._dims.cols; cols++) {

        }
      }*/

      
    }
  }

  init_events() {
    let that = this;
    function resize() {
      let rows = Math.max(~~((window.innerHeight - that._layout.min_margin + that._layout.items.size) / (that._layout.items.size + that._layout.items.gutter)), that._layout.min_rows);
      let cols = Math.max(~~((window.innerWidth - that._layout.min_margin) / (that._layout.items.size + that._layout.items.gutter)), that._layout.min_cols);
      let pageWidth = cols * (that._layout.items.size + that._layout.items.gutter);
      let margin = Math.max((window.innerWidth - pageWidth + that._layout.items.gutter) / that._layout.min_rows, 0);
      let page = document.querySelector("div#page");
      page.style.width = pageWidth;
      page.style.marginLeft = margin;
      that._dims = {
        rows: rows,
        cols: cols,
        eps: rows * cols,
        pageWidth: pageWidth,
        margin: margin
      };
      that.render();
    }
    resize();

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

    }
    window.addEventListener('resize', resize); // onresize
    document.addEventListener("wheel", scroll); // mousewheel
    document.querySelectorAll("div.pscroll").forEach(elem => elem.addEventListener("click", e => scroll({ deltaY: e.target.id === "up"?-1:1 }))); // buttons
    window.addEventListener("hashchange", () => { this.hash = window.location.hash }, false); // hashchange
  }

  set hash(val) {
    console.log("hash changed");
    this.tmphash = this.getlink(val);
    this.firstrun = false;
    fetch(`/api/`, {
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      method: 'POST',
      body: JSON.stringify(this.tmphash)
    })
    .then(res => {
      if(res.status === 200)
        return res.json();
      else
        return { error: true };
    })
    .then(data => {
      if(!data.error) {
        this.tmp = {
          first: data.meta.atFirst,
          last: data.meta.atLast
        };
        //const tmpmap = new Map();
        //data.items.forEach(e => tmpmap.set(e.stamp, e));
        //this.render(tmpmap);
        this.render(data.items);
      }
    });
  }

  getlink(tmp) {
    const tpl = {
      user: ({ user, mime, last }) => `user,${user},${mime},${last}`,
      mime: ({ user, mime, last }) => `mime,${mime},${user},${last}`,
      new: ({ user, mime, last }) => `items,${last}`,
    };
    let blah = {
      mode: "",
      user: "",
      mime: "",
      last: 0,
      post: 0
    };
    let api = "/api/";

    if(!tmp.match(/\,/)) {
      tmp = "#new";
    }

    tmp = (tmp.match(/,/)?tmp:`${tmp},`).substr(1).split(",");
    const args = {
      l: tmp[0].split("/"),
      r: tmp[1].split("/")
    };
    
    blah.mode = ( args.l[0].length === 0 )? "new" : args.l[0];
    blah.last = parseInt(args.r[0]) || 0;
    blah.post = parseInt(args.r[1]) || 0;
    switch(blah.mode) {
      case "user":
        blah.user = ( args.l[1] )? args.l[1] : "";
        blah.mime = ( args.l[2] )? args.l[2] : "";
      break;
      case "mime":
        blah.user = ( args.l[2] )? args.l[2] : "";
        blah.mime = ( args.l[1] )? args.l[1] : "";
      break;
    }
    console.log(this._lastmode);
    return {
      mode: blah.mode,
      user: blah.user,
      stamp: blah.last,
      mime: blah.mime,
      eps: this._dims.eps,
      sort: this._lastmode
    };
  }
}

function getKey(_map, _search) {
  let i = 0;
  for(let [key] of _map) {
    if(key === _search)
      return i;
    i++;
  }
}