var app = new Vue({
  el: '#wrapper',
  data: {
    hit: {}
  },
})


var hits = {};
var hitIds = [];

// fetch ?all in database
let ws = new ReconnectingWebSocket('ws://localhost:8888/status/ws?all')


ws.addEventListener('open', () => {
  // ws.send('hi server')
})

ws.addEventListener('message', (event) => {
  console.log('message: ')

  let load_hits = JSON.parse(event.data)
  for(let hit of load_hits) {
	  console.log(hit);
	  hits[hit.id] = hit;
	  if(hit.scanned_at && hitIds.indexOf(hit.id) < 0){
		  // only add if indeed scanned
		  hitIds.push(hit.id);
	  }
  }
})

var currentI = 0;
setInterval(function(e){
	if(hitIds.length < 1) {
		return;
	}
	
	currentI = (currentI + 1) % hitIds.length;
	let currentHitId = hitIds[currentI];
	console.log(currentHitId);
	let hit = hits[currentHitId];
	hit['visible'] = false;
	app.hit['visible'] = false;
	setTimeout(() => {
		app.hit = hits[currentHitId]
	}, 1000);
	setTimeout(() => {
		app.hit['visible'] = true;
		let wrapperEl = document.getElementById("collaborators");
		let innerEl = document.getElementById("collab_items");
		let size = 100;
		do {
			innerEl.style.fontSize = size + "%";
			size --;
		} while(innerEl.clientHeight > wrapperEl.clientHeight && size > 10);
	}, 1100);
	
}, 4000);