// 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 item;

  for(item of items)
    if(item.iditem == id)
      return item;

  return items[0];
}

// Event handler for order button
function orderItem() {
  // 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(this.getAttribute('data-id'));
  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.
  document.getElementById('viewOrder').style.display = '';
  // Blur the button to remove the undesirable focussed appearance
  this.blur();
}

// Reloads the menu table
function displayItems(items) {
  var table, newRow, button_td, orderButton;
  var entry;

  // Remove any existing entries from the table
  table = document.getElementById('menu');
  table.innerHTML = '';

  // Add new rows for the items in the list
  for(entry of items) {
    newRow = document.createElement('tr');
    newRow.innerHTML = '<td class="align-middle">'+entry.name+'</td><td class="align-middle">'+entry.cost+'</td>';
    orderButton = document.createElement('button');
    orderButton.textContent = 'Order';
    orderButton.setAttribute('data-id', entry.iditem);
    orderButton.addEventListener('click', orderItem);
    orderButton.classList.add('btn', 'btn-secondary', 'align-middle');
    button_td = document.createElement('td');
    button_td.appendChild(orderButton);
    newRow.appendChild(button_td);
    table.appendChild(newRow);
  }
}

// Event handler for remove button
function removeItem() {
  var newOrder = [];
  var idToRemove = this.getAttribute('data-id');
  var item;
  for(item of order) {
    if(item.iditem != idToRemove)
      newOrder.push(item);
    else 
      idToRemove = -1;
  }
  order = newOrder;
  displayOrders();
}

// Fills the order table with items from the order array
function displayOrders() {
  var table, newRow, button_td, removeButton;
  var entry;
  
  // Remove any existing entries from the table
  table = document.getElementById('items');
  table.innerHTML = '';

  // Add new rows for the items in the order list
  for(entry of order) {
    newRow = document.createElement('tr');
    newRow.innerHTML = '<td class="align-middle">'+entry.name+'</td><td class="align-middle">'+entry.cost+'</td>';
    removeButton = document.createElement('button');
    removeButton.textContent = 'Remove';
    removeButton.setAttribute('data-id', entry.iditem);
    removeButton.addEventListener('click', removeItem);
    removeButton.classList.add('btn', 'btn-secondary', 'align-middle');
    button_td = document.createElement('td');
    button_td.appendChild(removeButton);
    newRow.appendChild(button_td);
    table.appendChild(newRow);
  }
}

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

  result = []; // Make a new, empty list
  for(item of list) {
    // Search the original list for items that have the desired meal property
    if(item.meal == meal)
      result.push(item); // 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() {
  document.getElementById('view').style.display = 'none';
  document.getElementById('order').style.display = '';

  displayOrders();
}

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

  document.getElementById('order').style.display = 'none';
  document.getElementById('confirm').style.display = '';
 
}

// Event handler for the place order button
function placeOrder() {
  // Construct a list of id numbers for the ordered items
  var item, ids;
  ids = [];
  for(item of order)
    ids.push(item.iditem);
  // Construct the order object
  var name = document.getElementById('name').value;
  var number = document.getElementById('phone').value;
  var toPost = {customer:name,phone:number,items:ids};
  // POST it to the server
  fetch('https://cmsc106.net/cafe/purchase',{
    method:'POST',
    headers:{'Content-Type':'application/json'},
    body:JSON.stringify(toPost)
  })
  .then(function(response) {
    // Convert the JSON response and pass it to showConfirm
    return response.json();
  })
  .then(showConfirm);
}

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

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

function setUp() {
  // Set up event handlers for the meal buttons by using
  // a set of anonymous functions.
  document.getElementById('breakfast').addEventListener('click',function(){displayMeal('breakfast');});
  document.getElementById('lunch').addEventListener('click',function(){displayMeal('lunch');});
  document.getElementById('dinner').addEventListener('click',function(){displayMeal('dinner');});
  // Set up event handlers for the other buttons
  document.getElementById('viewOrder').addEventListener('click',showOrder);
  document.getElementById('place').addEventListener('click',placeOrder);
  document.getElementById('back').addEventListener('click',showMenu);
  // Hide all but the first div
  document.getElementById('view').style.display = 'none';
  document.getElementById('order').style.display = 'none';
  document.getElementById('confirm').style.display = 'none';
  // Also hide the View Order button
  document.getElementById('viewOrder').style.display = 'none';
  // Start the process of loading the menu items
  fetch('https://cmsc106.net/cafe/item')
  .then(function(response) {
    // Convert the JSON response and pass it to receiveItems
    return response.json();
  })
  .then(receiveItems);
}

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