{{ define "serviceAlias" }}

<script>
  const defaultServiceAliasSetUIID = -1;
  const serviceAliasSessionKeys = {
    SERVICE_ALIAS_SET: "serviceAliasSet"
  };

  document.addEventListener('DOMContentLoaded', function () {
    window.addEventListener(DBMODE_TABLE, handleDatabaseModeChange);
    // This value will get overwritten when data from getServicesAliasSetUiid is fetched and ensures a UI update
    sessionStorage.setItem(serviceAliasSessionKeys.SERVICE_ALIAS_SET, "Invalid UIID");
    getServicesAliasSetUiid();
  });

  function handleDatabaseModeChange(eventData) {
    if (eventData.detail.dbMode == DBMode_Protect) {
      disableButtonIds(["applyServicesAlias", "clearServicesAlias"]);
      updateServicesAliasSetDetails()
    } else {
      enableUiButton("addAlias", "addAliasMenu");
    }
  }

  function updateServicesAliasSetDetails() {
    const serviceAliasSetUIID = sessionStorage.getItem(serviceAliasSessionKeys.SERVICE_ALIAS_SET);
    if (serviceAliasSetUIID == defaultServiceAliasSetUIID) {
      document.getElementById("servicesAliasName").value = "None";
      updateServiceAliasSetToolbarButtons();
    } else {
      // Fetch the data need directly from the source and not the alias set table
      fetch("/aliasset/agdata")
        .then(response => response.json())
        .then(data => {
          for (let i = 0; i < data.length; i++) {
            if (serviceAliasSetUIID == data[i].uiid) {
              document.getElementById("servicesAliasName").value = data[i].name;
              updateServiceAliasSetToolbarButtons();
              return;
            }
          }

          // If no matching Alias Set is found, fix the system by removing the service alias set for the user but give them a warning about it
          displayWarningDialog("The alias set currently assigned as the service alias set no longer exists in the system.  To ensure proper operation, this alias set assignment was removed from the system.");
          setServicesAliasSetUiid(defaultServiceAliasSetUIID);
        });
    }
  }

  function applyServicesAliasSet() {
    const selectedData = aliasGridOptions.api.getSelectedRows();
    if (selectedData.length > 0) {
      if (selectedData[0].id != defaultServiceAliasSetUIID) {
        setServicesAliasSetUiid(selectedData[0].uiid);
      } else {
        displayWarningDialog("Please select an alias set to set as the service alias set.");
        getServicesAliasSetUiid();
      }
    } else {
      displayWarningDialog("Please select an alias set to be used for third party services.");
    }
  }

  function setNewServiceAliasUIID (uiid) {
      const currentServiceAliasSet = sessionStorage.getItem(serviceAliasSessionKeys.SERVICE_ALIAS_SET);
      if (currentServiceAliasSet != uiid) {
          sessionStorage.setItem(serviceAliasSessionKeys.SERVICE_ALIAS_SET, uiid);
          updateServicesAliasSetDetails();
      }
  }

  function getServicesAliasSetUiid() {
    fetch("/servicealias/get")
      .then(response => response.json())
      .then(data => {
          setNewServiceAliasUIID (data.uiid);
      })
      .catch(err => {
        displayErrorDialog(err.responseText || JSON.stringify(err));
      });
  }

  function setServicesAliasSetUiid(uiid) {
    uiid = parseInt(uiid);
    $.post("/servicealias/set?uiid=" + uiid)
      .done(function () {
        sessionStorage.setItem(serviceAliasSessionKeys.SERVICE_ALIAS_SET, uiid);
        updateServicesAliasSetDetails();
      })
      .fail((err) => {
        displayErrorDialog(err.responseText || JSON.stringify(err));
        getServicesAliasSetUiid();
      });
  }

  function updateServiceAliasSetToolbarButtons() {
    if (dbMode == DBMode_Protect) {
      disableUiButton("applyServicesAlias");
      disableUiButton("clearServicesAlias");
      return;
    }

    const currentServiceAliasSet = sessionStorage.getItem(serviceAliasSessionKeys.SERVICE_ALIAS_SET);
    if (currentServiceAliasSet != defaultServiceAliasSetUIID) {
      enableUiButton("clearServicesAlias");
    } else {
      disableUiButton("clearServicesAlias");
    }

    const selectedData = aliasGridOptions.api.getSelectedRows();
    if ((selectedData.length > 0) && (selectedData[0].uiid != currentServiceAliasSet)) {
      enableUiButton("applyServicesAlias");
    } else {
      disableUiButton("applyServicesAlias");
    }
  }
</script>

<nav class="navbar navbar-expand">
  <div class="container-fluid">
    <ul class="navbar-nav me-auto">
      <li>
        <button class="btn btn-nav-icon-text" onclick="setServicesAliasSetUiid(defaultServiceAliasSetUIID);" id="clearServicesAliasButton" disabled>Clear</button>
      </li>
      <li>
        <button class="btn btn-nav-icon-text" onclick="applyServicesAliasSet();" id="applyServicesAliasButton" disabled>Apply</button>
      </li>
    </ul>
  </div>
</nav>
<table class="container-data">
  <tr class="row-data">
    <td class="col-data-label">Services Alias Set:</td>
    <td class="col-data-input"><input class="form-control rounded-0 file-name-size" id="servicesAliasName" readonly></td>
  </tr>
  <tr class="row-data">
    <td colspan="2" class="note-under-input auto-size">The selected alias set is used by the protocol services for source/destination labels.</td>
  </tr>
</table>
{{ end }}