// Cafe menu items. We will fetch these from the server at startup
var items;

// Order array - initially empty
var order = [];

// Search the items list for the item with the given id
function findItem(id) {
	var n, length;

	length = items.length;
	for(n = 0;n < length;n++)
		if(items[n].iditem == id)
			return items[n];

	return items[0];
}

// Event handler for order button
function orderItem(itemid) {
  // Each of the order buttons has the id of the associated
  // object hidden in its data-id attribute. Find that item
	// and push it onto the order list.
	var item = findItem(itemid);
  order.push(item);
  // The View Order button is initially hidden. As soon
  // as the user orders an item we will want to make it
  // visible.
  let viewOrderButton = document.getElementById('viewOrder');
  viewOrderButton.style.visibility = 'visible';

  // Blur the button to remove the undesirable focussed appearance
  viewOrderButton.blur();
}

// Reloads the menu table
function displayItems(items) {
  // Remove any existing entries from the table
  let tableBody = document.getElementById('menu');
  tableBody.innerHTML = '';

  // Add new rows for the items in the list
  let length = items.length;
  for(let n = 0;n < length;n++) {
    let newRow = document.createElement('tr');
		newRow.innerHTML = '<td class="align-middle">'+items[n].name+'</td><td class="align-middle">$'+items[n].cost/100+'</td>';
    let orderButton = document.createElement('button');
    orderButton.innerText = 'Order';
    orderButton.addEventListener('click',()=>orderItem(items[n].iditem));
    orderButton.setAttribute('class','btn btn-secondary align-middle');
		let buttonTD = document.createElement('td');
		buttonTD.appendChild(orderButton);
    newRow.appendChild(buttonTD);
    tableBody.appendChild(newRow);
  }
}

// Event handler for remove button
function removeItem(n) {
  order.splice(n,1);
  displayOrders();
}

// Fills the order table with items from the order array
function displayOrders() {
  // Remove any existing entries from the table
  let tableBody = document.getElementById('items');
  tableBody.innerHTML = '';

  // Add new rows for the items in the order list
  let length = order.length;
  for(let n = 0;n < length;n++) {
    let newRow = document.createElement('tr');
		newRow.innerHTML = '<td class="align-middle">'+order[n].name+'</td><td class="align-middle">$'+order[n].cost/100+'</td>';
    let removeButton = document.createElement('button');
    removeButton.innerText = 'Remove';
    removeButton.setAttribute('class','btn btn-secondary align-middle');
    removeButton.addEventListener('click',()=>removeItem(n));
    let buttonTD = document.createElement('td');
    buttonTD.appendChild(removeButton);
    newRow.appendChild(buttonTD);
		tableBody.appendChild(newRow);
  }
}

// An example of a filter function designed to filter a list of objects
function filterList(list,meal) {
  var result, n, length;

  result = []; // Make a new, empty list
  length = list.length;
  for(n = 0;n < length;n++) {
    // Search the original list for items that have the desired meal property
    if(list[n].meal == meal)
      result.push(list[n]); // Add items that match to the new list
  }

  return result;
}

// Helper function to handle displaying a different meal
function displayMeal(meal) {
  var newList;

  newList = filterList(items,meal);
  displayItems(newList);
}

// Event handler for the view order button
function showOrder() {
  let menuDiv = document.getElementById('view');
  menuDiv.style.display = 'none';
  
  let orderDiv = document.getElementById('order');
  orderDiv.style.display = 'block';
  
  displayOrders();
}

// Success callback for the place order POST
function showConfirm(data) {
  let numberSpan = document.getElementById('number');
  numberSpan.innerText = data;

  let orderDiv = document.getElementById('order');
  orderDiv.style.display = 'none';
  
	let confirmDiv = document.getElementById('confirm');
  confirmDiv.style.display = 'block';
}

// Event handler for the place order button
function placeOrder() {
	// Construct a list of id numbers for the ordered items
	var n, length, ids;
	ids = [];
	length = order.length;
	for(n = 0;n < length;n++)
		ids.push(order[n].iditem);
	// Construct the order object
  let nameField = document.getElementById('name');
  let phoneField = document.getElementById('phone');
  var toPost = {customer:nameField.value,phone:phoneField.value,items:ids};
  // POST it to the server
  fetch('https://cmsc106.net/cafe/purchase', {
    method: 'POST',
    body: JSON.stringify(toPost),
    headers: {
      'Content-type': 'application/json; charset=UTF-8'
    }
  }).then(response => response.json()).then(response => showConfirm(response));
}

// Event handler for the back to menu button
function showMenu() {
  let orderDiv = document.getElementById('order');
  orderDiv.style.display = 'none';
  
	let menuDiv = document.getElementById('view');
  menuDiv.style.display = 'block';
}

// Callback function for the fetch items query
function receiveItems(data) {
	items = data;
	
  let startingDiv = document.getElementById('starting');
  startingDiv.style.display = 'none';
  
	let menuDiv = document.getElementById('view');
  menuDiv.style.display = 'block';
  
	displayMeal('lunch');
}

function setUp() {
  // Set up event handlers for the meal buttons
  let breakfastButton = document.getElementById('breakfast');
  breakfastButton.addEventListener('click',()=>displayMeal('breakfast'));
  
  let lunchButton = document.getElementById('lunch');
  lunchButton.addEventListener('click',()=>displayMeal('lunch'));

  let dinnerButton = document.getElementById('dinner');
  dinnerButton.addEventListener('click',()=>displayMeal('dinner'));

  // Set up event handlers for the other buttons
  let viewOrderButton = document.getElementById('viewOrder');
  viewOrderButton.addEventListener('click',()=>showOrder());
  viewOrderButton.style.visibility = 'hidden';

  let placeOrderButton = document.getElementById('place');
  placeOrderButton.addEventListener('click',()=>placeOrder());

  let showMenuButton = document.getElementById('back');
  showMenuButton.addEventListener('click',()=>showMenu());

  // Hide the menu, order, and confirm divs
  let menuDiv = document.getElementById('view');
  menuDiv.style.display = 'none';
  let orderDiv = document.getElementById('order');
  orderDiv.style.display = 'none';
  let confirmDiv = document.getElementById('confirm');
  confirmDiv.style.display = 'none';

  // Start the process of loading the menu items
  fetch('https://cmsc106.net/cafe/item').then(response => response.json()).then(response => { receiveItems(response); });
}

window.addEventListener('load',setUp,false);