"use strict";

/**
 * Show a loading indicator at the start of an async task. The indicator consists of a spinner and a transluscent mask placed on top of page elements
 * @returns {undefined} undefined
 */
const showLoadingSpinner = function () {
  const loadingIndicatorMask = document.querySelector("#loadingIndicator");
  const loadingIconSpinner = document.querySelector("#loadingIcon");

  loadingIndicatorMask.style.display = "block";
  loadingIconSpinner.style.display = "block";
};

/**
 * Hide the loading indicator after completion of the async tasks
 * @returns {undefined} undefined
 */
const hideLoadingSpinner = function () {
  const loadingIndicatorMask = document.querySelector("#loadingIndicator");
  const loadingIconSpinner = document.querySelector("#loadingIcon");

  loadingIndicatorMask.style.display = "none";
  loadingIconSpinner.style.display = "none";
};

/**
 * Disable the button used to trigger the drawing of charts
 *
 * @returns {undefined} undefined
 */
const disableDrawChartButton = function () {
  document.querySelector("#btn-draw-chart").disabled = true;
};

/**
 * Enable the button used to trigger the drawing of charts
 *
 * @returns {undefined} undefined
 */
const enableDrawChartButton = function () {
  document.querySelector("#btn-draw-chart").disabled = false;
};

export {
  showLoadingSpinner,
  hideLoadingSpinner,
  disableDrawChartButton,
  enableDrawChartButton,
};
