class f0ck {
  constructor(hash = "") {
    this.debug();
    this.tpl = {
      row: ({ items }) => `<ul class="posts">${items}</ul>`,
      item: ({ id, title, stamp }) => `<li class="post"><a href="https://f0ck.me/${id}" title="${title} ; ${stamp}"><img class="thumb" src="https://f0ck.me/t/${id}.png" /></a></li>`,
    };
    this.numitems = this.sumItems();
    this.items = {
      items: [],
      last: null,
      first: null
    };
    this.tmphash = null;
    this.hash = hash;
  }

  loadItems(init=false) {
    this.getItems().then(
      resolve => {
        console.log("resolved", this.items);
        //if(init) this.render(init);
      },
      reject => {
        console.error("REJECTED!");
      }
    );
  }

  getItems() {
    return new Promise((resolve, reject) => {
      $.getJSON(`${this.tmphash.link},${(this.numitems.ipp*2)}`, data => {
        console.log("received data", data);
        this.items.last = data.meta.last;
        this.items.first = data.meta.first;
        
        for(let item in data.items) {
          this.items.items[data.items[item].stamp] = data.items[item];
        }

        return resolve();
      }).fail(err => {
        return reject();
      });
    });
  }

  sumItems() {
    let h = $(window).innerHeight();
    let w = $(window).innerWidth();
    let itemsize = 128;
    let spacing = 10;
    let header = 90;
    let ipr = Math.floor( w / ( itemsize + spacing ) );
    let rpp = Math.floor( ( h - header ) / ( itemsize + spacing ) );
    let ipp = Math.floor( ipr * rpp );
    return {
      ipr: ipr, // items per row
      rpp: rpp, // rows per page
      ipp: ipp  // items per page
    };
  }
  
  render(init=false) {
    let tmpnum = this.sumItems();
    let container = $("div#con");
    if(this.numitems.ipp !== tmpnum.ipp || init) {
      console.log("rendering from", this.current);
      if(typeof this.current !== "number")
        return;
      container.html("");
      this.numitems = tmpnum;
      let rowtpl = "";
      let j, tmplast = 0;
      for(var i = this.current+1; j < this.numitems.ipp; i--) {
        if(this.items[i]) {
          rowtpl += [{ id: this.items[i].id, title: this.items[i].mime, stamp: this.items[i].stamp }].map(this.tpl.item).join``;
          j++;
          tmplast = this.items[i].stamp;
        }
        if(this.items.length < i) {
          j = this.numitems.ipp;
        }
      }
      this.scope.last = tmplast;
      console.log("finished rendering", container.length);
      container.append( [{ items: rowtpl }].map(this.tpl.row).join`` );
    }
  }

  set hash(val) {
    console.log("hash changed");
    let tmp = this.getlink(val);
    this.tmphash = tmp;

    //if(tmp.last < this.scope.first) {
      this.current = tmp.last;
      this.loadItems(true);
    //}
    //else if(tmp.last > this.scope.last || this.scope.last === 0) {
    //  this.current = tmp.last;
    //  this.loadItems(true);
    //}
  }

  gethash() {
    return this.tmphash;
  }

  debug() {
    $(".navbar a").on("click", event => {
      switch(event.target.innerText) {
        case "page 1":
          this.currentpage = 0;
          this.render(true);
        break;
        case "page 2":
          this.currentpage = 1;
          this.render(true);
        break;
        case "page 3":
          this.currentpage = 2;
          this.render(true);
        break;
        default:
          console.log("nope");
        break;
      }
      $(".navbar span").html(`Page ${this.currentpage}`);
    });
  }

  getlink(tmp) {
    const tpl = {
      user: ({ user, mime, last, eps }) => `user,${user},${mime},${last}`,
      mime: ({ user, mime, last, eps }) => `mime,${mime},${user},${last}`,
      new: ({ user, mime, last, eps }) => `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(",");
    console.log(tmp);
    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].length === 0 )? "" : args.l[1];
        blah.mime = ( args.l[2].length === 0 )? "" : args.l[2];
      break;
      case "mime":
        blah.user = ( args.l[2].length === 0 )? "" : args.l[2];
        blah.mime = ( args.l[1].length === 0 )? "" : args.l[1];
      break;
    }
    return {
      link: api + [{ user: blah.user, mime: blah.mime, last: blah.last, eps: this.numitems.ipp }].map(tpl[blah.mode]).join``,
      args: blah
    };
  }
}