var primerUI = new PrimerUI(document.body);
var imagesList=new Array();
var imagesIndex=0;
var imagesInterval=1000;
var loop=null;
var stop=0;
window.onload=async() =>{
  let root = document.body;
  await primerUI.insertScriptFile('https://code.jquery.com/jquery-3.6.0.min.js');
  await primerUI.insertScriptFile('js/moment-with-locales.min.js');
  primerUI.insertCSSFile('vendor/bootstrap/css/bootstrap.min.css');
  primerUI.insertCSSFile('vendor/bootstrap-icons/bootstrap-icons.css');
  primerUI.insertCSSFile('vendor/boxicons/css/boxicons.min.css');
  primerUI.insertCSSFile('css/bootstrap-datetimepicker.min.css');
  primerUI.insertScriptFile('vendor/bootstrap/js/bootstrap.bundle.min.js');
  await primerUI.insertScriptFile('js/bootstrap-datetimepicker.min.js');

  makeLogin(root);
}

function makeLogin(root) {
  $(root).css('background','url("img/bg.jpeg")');
  $(root).css('background-size','cover');
  $(root).css('background-position','center center');
  let section = primerUI.div({tag:'section',id:'login',style:'margin-top:10%'});
  let container = primerUI.div({class:'container'},section);
  let center=primerUI.center(container);
  if (primerUI.width()>=1000)
    primerUI.image({src:'img/acer.svg',style:'width:20%'},center);
  else
    primerUI.image({src:'img/acer.svg',style:'width:30%'},center);
  primerUI.br(2,center);
  primerUI.label({text:'海洋大學 - 歷史影像管理系統',style:'font-weight:800;font-size:1.5em;color:gray'},center);
  primerUI.br(3,center);
	let row = primerUI.row(null);
	let col = primerUI.colClass(12,12,2,2,row);
	//primerUI.select({options:{'選擇事件':0},id:'selectEvent'},col);
	setTimeout(async ()=>{
		let data = await new Promise((resolve) => {
    	$.ajax({
      	url:'https://history.ntou.xtaiwan.org/getEvents',
      	type: 'POST',
      	data: { token: 'aaa'},
      	success: (data)=>{ resolve(data);},
      	error: (err)=>{ console.log(err);resolve(null);}
    	});
  	});

		$('#selectEvent').empty();
		let select=document.getElementById('selectEvent');
		primerUI.div({tag:'option',value:0,text:'請選擇事件日期'},select);
		for (let dev in data) {
			if (String(data[dev]).length==0)
				continue;
			primerUI.div({tag:'option',value:data[dev],text:data[dev]},select);
		}
		$(select).on('change',async ()=>{
			let data = await new Promise((resolve) => {
    		$.ajax({
      		url:'https://history.ntou.xtaiwan.org/getEventDevices',
      		type: 'POST',
      		data: { token: 'aaa', date:$(select).val()},
      		success: (data)=>{ resolve(data);},
      		error: (err)=>{ console.log(err);resolve(null);}
    		});
			});
			$('#selectDevice').empty();
    	let ss =document.getElementById('selectDevice');
    	primerUI.div({tag:'option',value:0,text:'請選擇裝置'},ss);
    	for (let dev in data) {
      	if (String(data[dev]).length==0)
        	continue;
      	primerUI.div({tag:'option',value:data[dev],text:data[dev]},ss);
    	}
			$(ss).on('change',async ()=>{
      	let data = await new Promise((resolve) => {
        	$.ajax({
          	url:'https://history.ntou.xtaiwan.org/getEventImages',
          	type: 'POST',
          	data: { token: 'aaa', date:$('#selectEvent').val(), device: $('#selectDevice').val()},
          	success: (data)=>{ resolve(data);},
          	error: (err)=>{ console.log(err);resolve(null);}
        	});
      	});
      	if (data==null) {
        	$('#images').attr('src','img/404.gif');
        	return ;
      	}
      	stop=0;
      	imagesIndex=0;
      	imagesList=data;
      	if (loop!=null)
        	clearInterval(loop);
      	loop=setInterval(()=>{
        	if (stop)
          	return ;
        	$('#images').attr('src',imagesList[imagesIndex++]);
        	imagesIndex%=imagesList.length;
      	},imagesInterval);
    	});
		});
	},100);
	if (primerUI.width()<800) {
		center.appendChild(row);
		primerUI.br(1,center);
		row=primerUI.row(null);	
	}
	col = primerUI.colClass(12,12,4,4,row);
	let form=primerUI.div({class:'from-group'},col);
	let g = primerUI.div({class:'input-group date',id:'dateTime'},form);
	let input=primerUI.input({class:'form-control',id:'id_end_time'},g);	
	if (primerUI.width()<800) {
		center.appendChild(row);
		primerUI.br(1,center);
		row=primerUI.row(null);	
	}
	col = primerUI.colClass(12,12,4,4,row);
	primerUI.select({options:{'尚無裝置':0},id:'selectDevice'},col);
	center.appendChild(row);
	row=primerUI.row(null);
	col=primerUI.colXL(row);
	setTimeout(()=>{ $(input).val(' 選擇日期');},10);
  primerUI.br(1,center);
	primerUI.image({style:'width:100%;',id:'images',click:()=>{stop=(stop==0)? 1:0;}},col);
	center.appendChild(row);
  primerUI.br(5,center);
	root.appendChild(section);
	$('#dateTime').datetimepicker({
  	"allowInputToggle": true,
   	"showClose": true,
    "showClear": true,
    "showTodayButton": true,
    "format": "MM/DD/YYYY",
  });
	$('#dateTime').on('dp.change',async ()=>{
		let data = await new Promise((resolve) => {
    	$.ajax({
      	url:'https://history.ntou.xtaiwan.org/getDateDevices',
      	type: 'POST',
      	data: { token: 'aaa', date:$('#id_end_time').val()},
      	success: (data)=>{ resolve(data);},
      	error: (err)=>{ console.log(err);resolve(null);}
    	});
  	});
		$('#selectDevice').empty();
		let select=document.getElementById('selectDevice');
		primerUI.div({tag:'option',value:0,text:'請選擇裝置'},select);
		for (let dev in data) {
			if (String(data[dev]).length==0)
				continue;
			primerUI.div({tag:'option',value:data[dev],text:data[dev]},select);
		}
		
		$(select).on('change',async ()=>{
			console.log($('#id_end_time').val()," => ",$('#selectDevice').val());
			let data = await new Promise((resolve) => {
    		$.ajax({
      		url:'https://history.ntou.xtaiwan.org/getDeviceImages',
      		type: 'POST',
      		data: { token: 'aaa', date:$('#id_end_time').val(), device: $('#selectDevice').val()},
      		success: (data)=>{ resolve(data);},
      		error: (err)=>{ console.log(err);resolve(null);}
    		});
			});
			console.log(data);
			if (data==null) {
				$('#images').attr('src','img/404.gif');
				return ;
			}
			stop=0;
			imagesIndex=0;
			imagesList=data;		
			if (loop!=null)	
				clearInterval(loop);
			loop=setInterval(()=>{ 
				if (stop)
					return ;
				$('#images').attr('src',imagesList[imagesIndex++]); 
				imagesIndex%=imagesList.length;
			},imagesInterval);
		});
	});
}