var costAmount=0;

$(document).ready(_=>{
	dta=fakeDta;
//	displayOptionChain();
	createOrderFrame();
	createMasterFilterFrame();
	let selectDataFirst=_=>{
		return {enabled:false, tooltip:"Select a Ticker!"};
	}
	$("#datePicker").datepicker({beforeShowDay:selectDataFirst});
});

let createOrderFrame=()=>{
	let theFrameDiv=document.createElement("div");
	theFrameDiv.setAttribute("id","frmOrder");
	theFrameDiv.className="container-fluid "; 
	window.document.getElementById('app').append(theFrameDiv);
	
	theFrameDiv.innerHTML=`
		<span id='lbCost' class="bold">Gain $</span><span id='lbCostAmount'>0</span>
		<ul id='listOrderItems'>
		</ul>
	`;
}

let addToOrder=(openType,optionData)=>{
	optionData=JSON.parse(optionData.replace(/'/g,'"'));
	console.log("AddToOrder",openType,optionData);
	
	let price=(openType.substr(0,1)==="b")?optionData.ask:optionData.bid;

	costAmount+=(price*100) * ((openType.substr(0,1)==="b")?-1:1);
	$("#lbCostAmount").text(costAmount.toLocaleString('en',{minimumFractionDigits: 2, maximumFractionDigits: 2}));
	
	$("#listOrderItems").append(`<li>${openType} | ${optionData.symbol} | ${price*100}</li>`);
}

let dta={};

let datesOut=(dateInp)=>{
	let date=dateInp.split(':')[0];
	let days=dateInp.split(':')[1];
	return `<li><a href="#" onclick="fillChainTable('${dateInp}')">${date}<br><center>(DTE: ${days})</center></a></li>`
}

let getCallArtifact=(callData,allColumns)=>{
	let artifact="";
	let classes=(callData.delta < 0.5)?" otm":" itm";
		
	for (let i=0;i< allColumns.length;i++){
		let cellValue=Number(callData[allColumns[i]]).toLocaleString('en',{minimumFractionDigits: 2, maximumFractionDigits: 2});
		
		artifact+=`
			<td class="${classes} ralign">${cellValue}</td>
		`;
	}	
	let strCallJSON=JSON.stringify(callData).replace(/"/g,"\\'");
	
	artifact+=`
		<td class="${classes} ralign" onclick="addToOrder('sell','${strCallJSON}')"><a href="#" title="Sell">${callData.bid}</a></td>
		<td class="${classes} ralign" onclick="addToOrder('buy','${strCallJSON}')"><a href="#" title="Buy">${callData.ask}</a></td>
	`;
	return artifact;
}

let getPutArtifact=(putData,allColumns)=>{
	let artifact="";
	let classes=(putData.delta > -0.5)?" otm":" itm";
		
	for (let i=0;i< allColumns.length;i++){
		let cellValue=Number(putData[allColumns[i]]).toLocaleString('en',{minimumFractionDigits: 2, maximumFractionDigits: 2});
		
		artifact+=`
			<td class="${classes} ralign">${cellValue}</td>
		`;
	}	
	
	let strPutJSON=JSON.stringify(putData).replace(/"/g,"\\'");
	
	artifact+=`
		<td class="${classes} ralign" onclick="addToOrder('sell','${strPutJSON}')"><a href="#" title="Sell">${putData.bid}</a></td>
		<td class="${classes} ralign" onclick="addToOrder('buy','${strPutJSON}')"><a href="#" title="Buy">${putData.ask}</a></td>
	`;
	return artifact;
}

let getStrikeArtifact=(strike)=>{
	return `
		<th class="center bold ">${strike}</th>
	`;
}

let fillChainRow=(rowData)=>{
	let theTable=document.getElementById("tblOptionChain");
	let theNewRow=theTable.insertRow(-1);
	let allColumns=["delta","theta"];
	
	theNewRow.innerHTML=getCallArtifact(rowData.call,allColumns) + getStrikeArtifact(rowData.strike) + getPutArtifact(rowData.put,allColumns);
}

let clearChainTable=()=>{
	let theTable=document.getElementById("tblOptionChain");
	for (let i=theTable.rows.length;i>3;i--){
		theTable.deleteRow(-1);
	}
}

let fillChainTable=(expirationDate)=>{
	clearChainTable();
	let allCalls=dta.callExpDateMap[expirationDate];
	let allPuts=dta.putExpDateMap[expirationDate];
	console.log(expirationDate,allCalls,allPuts);
	
	let allStrikes=Object.keys(allCalls);
	for (let i=0;i<allStrikes.length;i++){
		let theStrike=allStrikes[i];
		let singleStrikeCall=allCalls[theStrike][0];
		let singleStrikePut=allPuts[theStrike][0]; 
		let rowData={strike:theStrike,call:singleStrikeCall,put:singleStrikePut}
		fillChainRow(rowData);
	}
	
}

let displayOptionChain=()=>{
let app=window.document.getElementById('app');
$("#wrapperOptionChain").remove();
let newNode=document.createElement("div");
newNode.setAttribute("id","wrapperOptionChain");
newNode.innerHTML=`
<div class="container-fluid " id="frmOptionChainMain">
<div class="col-md-12">
<div class="tabbable">
<h1>${dta.symbol}</h1>
<hr>
<ul class="nav nav-tabs">
${Object.keys(dta.callExpDateMap).map(datesOut).join('')}
</ul
</div>
</div>
<div class="col-md-12">
<table id='tblOptionChain' class="table table-sm table-hover">
<thead>
	<tr>
		<th colspan="4" class='center'>CALLS</th><th></th><th colspan="4" class='center'>PUTS</th>
	</tr>
	<tr>
		<th class='ralign'>Delta</th><th class='ralign'>Theta</th><th class='ralign'>Bid</th><th class='ralign'>Ask</th><th class='center'>Strike</th><th class='ralign'>Delta</th><th class='ralign'>Theta</th><th class='ralign'>Bid</th><th class='ralign'>Ask</th>
	</tr>
</thead>
<tbody>
	<tr><!-- Dummy row --></tr>
</tbody>
</table>
</div>
</div>
`;

app.appendChild(newNode)
}