var filterContext={};

let createMasterFilterFrame=()=>{
	let theFrameDiv=document.createElement("div");
	theFrameDiv.setAttribute("id","frmMasterFilter");
	theFrameDiv.className="container-fluid " 
	window.document.getElementById('app').append(theFrameDiv);
	
    theFrameDiv.innerHTML=`
        <div id='datePicker'></div>

		<select size='5' onchange='symbolChanged()' id='lbSymbol'>
			<option>[LOADING]</option>
        </select>	
        
        <select size='5' onchange='timeChanged()' id='lbTime'>
            <option>[WAITING]</option>
        </select>

		<!--button onclick='rq()'>LOAD</button-->
    `;
    
    fetchSymbols();

	return true;
}

let beforeShowDay=(theDate)=>{
    let isoDate=theDate.toISOString().substr(0,10);
    console.log("BeforeShow",isoDate,theDate);

    if (!filterContext.availableDates.dates[isoDate]) {
        return {enabled:false, tooltip:"No data"};
    }
}

let fetchSymbols=()=>{
	$.ajax({
		url:"https://netsquat.ddns.kawomi.com/wc/raw/tosym"
	}).done(response=>{
		let allSymbols=JSON.parse(response);
		console.log(allSymbols);
		refreshSymbolList(allSymbols.symbols);
	});
}

let getCurrentSymbol=()=>{
    return(filterContext.theSymbol=$("#lbSymbol").val());
}
let symbolChanged=_=>{
    console.log("symbolChanged",getCurrentSymbol());
    getAvailDatesForSymbol(getCurrentSymbol).done(_=>{
        $("#datePicker").datepicker('destroy');
        $("#datePicker").datepicker({beforeShowDay:beforeShowDay})
        .on('changeDate', (e)=>{
            console.log("DatePicker changed date",e.date);
            filterContext.selectedDate=e.date.toISOString().substr(0,10);
            showTimesForDay(filterContext.selectedDate);
        });
    });
}

let timeChanged=()=>{
    console.log("Time changed", filterContext.selectedTime=$("#lbTime").val());
    requestOptionChain();
    
}

let requestOptionChain=()=>{
	$.ajax({
		url:"https://netsquat.ddns.kawomi.com/wc/raw/spy"
	}).done(response=>{
		dta=JSON.parse(response);
		console.log("received",dta);
		displayOptionChain();
	});
}

let showTimesForDay=(theDate)=>{
    let lbTime=$("#lbTime");
    lbTime.empty();
    allTimes = filterContext.availableDates.dates[theDate];
    for (let i=0;i<allTimes.length;i++){
        theTime=allTimes[i];
        lbTime.append($(`<option>${theTime}</option>`))
    }
}

let getAvailDatesForSymbol=(theSymbol)=>{
    return $.ajax({
		url:"https://netsquat.ddns.kawomi.com/wc/raw/availDates"
	}).done(response=>{
		let availableDates=JSON.parse(response);
		console.log(availableDates);
		filterContext.availableDates=availableDates;
	});
}

let refreshSymbolList=(allSymbols)=>{
    let lbSymbol=$("#lbSymbol");
    lbSymbol.empty();
    for (let i=0;i<allSymbols.length;i++){
        theSymbol=allSymbols[i];
        console.log(theSymbol);
        lbSymbol.append($(`<option>${theSymbol}</option>`))
    }
}