// Copyright 2019 Google LLC
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//     https://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

/** Fetches receipt properties from the server and adds them to the page. */
function loadReceiptAnalysis() {
  const parameters = new URLSearchParams(location.search);

  const date = getDateFromTimestamp(parameters.get('timestamp'));
  const storeName = capitalizeFirstLetters(parameters.get('store'));
  const total = parameters.get('price');
  const categories =
      capitalizeFirstLetters(parameters.get('categories').replace(/,/gi, ', '));
  const imageUrl = parameters.get('image-url');

  document.getElementById('date').innerText = `Transaction Date: ${date}`;
  document.getElementById('store-input').value = storeName;
  document.getElementById('total').innerText = `Total Price: $${total}`;
  document.getElementById('categories-input').value = categories;

  document.getElementById('receipt-image').src = imageUrl;
}

/** Converts a timestamp string into the equivalent date string. */
function getDateFromTimestamp(timestamp) {
  const time = parseInt(timestamp);

  // Only return the year, month, and day
  return new Date(time).toISOString().substring(0, 10);
}

/** Builds the div element for a category along with its children. */
function buildCategoryElement(category) {
  const categoryElement = document.createElement('div');
  categoryElement.className = 'col d-flex justify-content-center';
  categoryElement.innerHTML =
      '<h4><span class="badge badge-pill badge-secondary text-wrap">' +
      `${category}</span></h4>`;

  return categoryElement;
}

/**
 * Sends a request to update the receipt.
 */
async function updateReceipt(event) {
  // Prevent the default action of reloading the page on form submission.
  event.preventDefault();

  // TODO: Get other input values.
  const store = document.getElementById('store-input').value;

  const formData = new FormData();

  formData.append('store', store);

  // TODO: Send request to servlet.
}

/** Capitalize the first letter of each word in a string. */
function capitalizeFirstLetters(lowercasedString) {
  return lowercasedString.split(' ')
      .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
      .join(' ');
}

@@ -2351,16 +2351,88 @@
 ).value;
+%0A  const categories = document.getElementById('categories-input').value;
 %0A%0A  cons
@@ -2493,24 +2493,133 @@
 ', store);%0A%0A
+  createCategoryList(categories).forEach((category) =%3E %7B%0A    formData.append('categories', category);%0A  %7D);%0A%0A
   // TODO: S
@@ -2659,16 +2659,17 @@
 pitalize
+s
  the fir
@@ -2879,12 +2879,205 @@
 oin(' ');%0A%7D%0A
+%0A/** Converts the comma-separated categories string into a list of categories. */%0Afunction createCategoryList(categories) %7B%0A  return categories.split(',').map((category) =%3E category.trim());%0A%7D%0A

Add categories to formData