(function (f5common) {
  f5common.safeAjax = function (ajaxOptions) {
    var deferredAjax = $.Deferred();

    shell
      .getTokenDeferred()
      .done(function (token) {
        // add headers for AJAX
        if (!ajaxOptions.headers) {
          $.extend(ajaxOptions, {
            headers: {
              __RequestVerificationToken: token,
            },
          });
        } else {
          ajaxOptions.headers["__RequestVerificationToken"] = token;
        }
        $.ajax(ajaxOptions)
          .done(function (data, textStatus, jqXHR) {
            validateLoginSession(data, textStatus, jqXHR, deferredAjax.resolve);
          })
          .fail(deferredAjax.reject); //AJAX
      })
      .fail(function () {
        deferredAjax.rejectWith(this, arguments); // on token failure pass the token AJAX and args
      });

    return deferredAjax.promise();
  };

  f5common.addInstructionsBeforeField = function (fieldName, html, id) {
    if (id === null || id === undefined) {
      id = fieldName + "Instructions";
    }
    var row = $("#" + fieldName).closest("tr");
    var insertHtml = $("<tr id='" + id + "'>").append(
      $("<td>", { class: "clearfix cell form-control-cell" }).append(html)
    );
    row.before(insertHtml);
  };

  f5common.addInstructionsAfterField = function (fieldName, html, id) {
    if (id === null || id === undefined) {
      id = fieldName + "Instructions";
    }
    var row = $("#" + fieldName).closest("tr");
    var insertHtml = $("<tr id='" + id + "'>").append(
      $("<td>", { class: "clearfix cell form-control-cell" }).append(html)
    );
    row.after(insertHtml);
  };

  f5common.addInstructionsAfterLabel = function (fieldName, html) {
    var div = $("<div>", { style: "clear:both" }).append(html);
    $("#" + fieldName + "_Label,#" + fieldName + "_label").after(div);
  };

  f5common.addSectionInstructions = function (sectionname, instructions) {
    var tableSelector = "table[data-name='" + sectionname + "']";
    var table = $(tableSelector);
    var instrRow = $("<tr>").append(
      $("<td>", { class: "clearfix cell form-control-cell" }).append(
        $("<p>", { class: "section-instructions", text: instructions })
      )
    );
    table.prepend(instrRow);
  };

  f5common.addSectionInstructionsHtml = function (sectionname, html) {
    var tableSelector = "table[data-name='" + sectionname + "']";
    var table = $(tableSelector);
    var instrRow = $("<tr>").append(
      $("<td>", { class: "clearfix cell form-control-cell" }).append(html)
    );
    table.prepend(instrRow);
  };

  f5common.addRequiredFieldValidator = function (fieldName, fieldLabel) {
    if (typeof Page_Validators === "undefined") return;

    $("#" + fieldName)
      .closest("td")
      .find(".info")
      .addClass("required");

    var validatorId = fieldName + "RequiredFieldValidator";
    var newValidator = createValidator(
      validatorId,
      fieldName,
      fieldLabel + " is a required field.",
      fieldName + "_label",
      fieldName
    );

    newValidator.evaluationfunction = function () {
      var value = $("#" + fieldName).val();
      if (value === null || value === "") {
        return false;
      } else {
        return true;
      }
    };

    Page_Validators.push(newValidator);
  };

  f5common.removeRequiredFieldValidator = function (fieldName) {
    var validatorId = fieldName + "RequiredFieldValidator";
    $("#" + fieldName)
      .closest("td")
      .find(".info")
      .removeClass("required");
    removeValidator(validatorId);
  };

  f5common.addFutureDateValidator = function (fieldName, errorMessage) {
    if (typeof Page_Validators === "undefined") return;

    $("#" + fieldName)
      .next()
      .data("DateTimePicker")
      .minDate(moment());

    var validatorId = fieldName + "FutureDateValidator";
    var newValidator = createValidator(
      validatorId,
      fieldName,
      errorMessage,
      fieldName + "_label",
      fieldName
    );
    newValidator.evaluationfunction = function () {
      var returnValue = true; //set default value as true
      //get dates
      var today = new Date();
      var compareDate = $("#" + fieldName).val();

      if (compareDate === "") return true; //we can handle required date validation elsewhere.
      var compareDateValue = new Date(compareDate);

      if (today > compareDateValue) {
        returnValue = false;
      }

      return returnValue;
    };

    Page_Validators.push(newValidator);
  };

  f5common.removeFutureDateValidator = function (fieldName) {
    var validatorId = fieldName + "FutureDateValidator";
    removeValidator(validatorId);
  };

  f5common.addCustomValidator = function (
    fieldName,
    errorMessage,
    scrollToId,
    focusId,
    callback,
    required
  ) {
    if (typeof Page_Validators === "undefined") return;

    if (required) {
      $("#" + fieldName)
        .closest("td")
        .find(".info")
        .addClass("required");
    }

    var validatorId = fieldName + "CustomValidator";
    var newValidator = createValidator(
      validatorId,
      fieldName,
      errorMessage,
      scrollToId,
      focusId
    );
    newValidator.evaluationfunction = callback;

    Page_Validators.push(newValidator);
  };

  f5common.removeCustomValidator = function (fieldName) {
    var validatorId = fieldName + "CustomValidator";
    $("#" + fieldName)
      .closest("td")
      .find(".info")
      .removeClass("required");
    removeValidator(validatorId);
  };

  f5common.addSubGridValidator = function (
    subGridName,
    minRecords,
    errorMessage
  ) {
    if (typeof Page_Validators === "undefined") return;

    $("#" + subGridName)
      .closest("td")
      .find(".info")
      .addClass("required");

    var validatorId = subGridName + "SubGridValidator";
    var newValidator = createValidator(
      validatorId,
      fieldName,
      errorMessage,
      subGridName,
      subGridName
    );

    newValidator.evaluationfunction = function () {
      var noOfRecords = $("#" + subGridName + " table tbody tr").length;
      if (noOfRecords < minRecords) {
        return false;
      } else {
        return true;
      }
    };

    Page_Validators.push(newValidator);
  };

  f5common.removeSubGridValidator = function (subGridName) {
    var validatorId = subGridName + "SubGridValidator";
    $("#" + subGridName)
      .closest("td")
      .find(".info")
      .removeClass("required");
    removeValidator(validatorId);
  };

  f5common.addCheckBoxValidator = function (fieldName, fieldLabel) {
    if (typeof Page_Validators === "undefined") return;

    $("#" + fieldName)
      .closest("td")
      .find(".info")
      .addClass("required");

    var validatorId = fieldName + "CheckBoxValidator";
    var newValidator = createValidator(
      validatorId,
      fieldName,
      "Check: " + fieldLabel,
      fieldName + "_label",
      fieldName
    );

    newValidator.evaluationfunction = function () {
      var isChecked = $("#" + fieldName).is(":checked");
      if (isChecked === true) {
        return true;
      } else {
        return false;
      }
    };

    Page_Validators.push(newValidator);
  };

  f5common.removeCheckBoxValidator = function (fieldName) {
    var validatorId = fieldName + "CheckBoxValidator";
    $("#" + fieldName)
      .closest("td")
      .find(".info")
      .removeClass("required");
    removeValidator(validatorId);
  };

  f5common.addRadioValidator = function (fieldName, fieldLabel) {
    if (typeof Page_Validators === "undefined") return;

    $("#" + fieldName)
      .closest("td")
      .find(".info")
      .addClass("required");

    var validatorId = fieldName + "RadioValidator";
    var newValidator = createValidator(
      validatorId,
      fieldName,
      "Check: " + fieldLabel,
      fieldName + "_label",
      fieldName
    );

    newValidator.evaluationfunction = function () {
      var isChosen = $("input[name$='" + fieldName + "']:checked").length > 0;
      if (isChosen === true) {
        return true;
      } else {
        return false;
      }
    };

    // Add the new validator to the page validators array:
    Page_Validators.push(newValidator);
  };

  f5common.removeRadioValidator = function (fieldName) {
    var validatorId = fieldName + "RadioValidator";
    $("#" + fieldName)
      .closest("td")
      .find(".info")
      .removeClass("required");
    removeValidator(validatorId);
  };

  //used to prevent start date being set before end date
  f5common.addDateRangeValidator = function (
    startDateControl,
    endDateControl,
    errorMessage
  ) {
    if (typeof Page_Validators === "undefined") return;

    var validatorId = fieldName + "DateRangeValidator";
    var newValidator = createValidator(
      validatorId,
      endDateControl,
      errorMessage,
      endDateControl + "_label",
      endDateControl
    );

    newValidator.evaluationfunction = function () {
      var returnValue = true; //set default value as true

      //get dates
      var endDate = $("#" + endDateControl).val();
      var startDate = $("#" + startDateControl).val();

      if (endDate === "" || startDate === "") return true; //we can handle required date validation elsewhere.
      var endDateValue = new Date(endDate);
      var startDateValue = new Date(startDate);

      if (startDateValue > endDateValue) {
        returnValue = false;
      }

      return returnValue;
    };
    // Add the validator to the page validators array:
    Page_Validators.push(newValidator);
  };

  f5common.removeDateRangeValidatorr = function (fieldName) {
    var validatorId = fieldName + "DateRangeValidator";
    removeValidator(validatorId);
  };

  f5common.addPhoneValidator = function (fieldName, fieldLabel, required) {
    if (typeof Page_Validators === "undefined") return;

    if (required) {
      $("#" + fieldName)
        .closest("td")
        .find(".info")
        .addClass("required");
    }

    var validatorId = fieldName + "PhoneValidator";
    var newValidator = createValidator(
      validatorId,
      fieldName,
      fieldLabel + " is an invalid phone number.",
      fieldName + "_label",
      fieldName
    );

    newValidator.evaluationfunction = function () {
      var value = $("#" + fieldName).val();
      if (value === null || value === "") {
        if (required) {
          return false;
        } else {
          return true;
        }
      } else {
        if (value.length < 7) {
          return false;
        } else {
          return true;
        }
      }
    };

    Page_Validators.push(newValidator);
  };

  f5common.removePhoneValidator = function (fieldName) {
    var validatorId = fieldName + "PhoneValidator";
    $("#" + fieldName)
      .closest("td")
      .find(".info")
      .removeClass("required");
    removeValidator(validatorId);
  };

  function createValidator(
    validatorId,
    fieldName,
    errorMessage,
    scrollToId,
    focusId
  ) {
    var newValidator = document.createElement("span");
    newValidator.style.display = "none";
    newValidator.id = validatorId;
    newValidator.controltovalidate = fieldName;
    newValidator.errormessage =
      "<a href='#" +
      fieldName +
      "_label' onclick='scrollToAndFocus(\"" +
      scrollToId +
      '","' +
      focusId +
      "\");'>" +
      errorMessage +
      "</a>";
    newValidator.validationGroup = "";
    newValidator.initialvalue = "";
    return newValidator;
  }

  function removeValidator(validatorId) {
    if (typeof Page_Validators === "undefined") return;

    for (i = 0; i < Page_Validators.length; i++) {
      if (Page_Validators[i].id === validatorId) {
        // Remove the current fields validator from Page_Validators array
        Page_Validators.splice(i, 1);
      }
    }
  }

  f5common.showSections = function (sectionList) {
    var count = sectionList.length;
    for (i_ss = 0; i_ss < count; i_ss++) {
      var fieldString = "fieldset[aria-label='" + sectionList[i_ss] + "']";
      $(fieldString).show();
    }
  };

  f5common.hideSections = function (sectionList) {
    var count = sectionList.length;
    for (i_hs = 0; i_hs < count; i_hs++) {
      var fieldString = "fieldset[aria-label='" + sectionList[i_hs] + "']";
      $(fieldString).hide();
    }
  };

  f5common.removeValidators = function (validatorList) {
    var count = validatorList.length;
    for (i_rv = 0; i_rv < count; i_rv++) {
      f5common.removeValidator(validatorList[i_rv]);
    }
  };

  f5common.clearTextFields = function (fieldList) {
    var count = fieldList.length;
    for (i_ctf = 0; i_ctf < count; i_ctf++) {
      $("#" + fieldList[i_ctf]).val("");
    }
  };

  f5common.hideFields = function (fieldList) {
    var count = fieldList.length;
    for (i_hf = 0; i_hf < count; i_hf++) {
      $("#" + fieldList[i_hf])
        .closest("tr")
        .hide();
    }
  };

  f5common.showFields = function (fieldList) {
    var count = fieldList.length;
    for (i_sf = 0; i_sf < count; i_sf++) {
      $("#" + fieldList[i_sf])
        .closest("tr")
        .show();
    }
  };

  f5common.disableLookups = function (fieldList) {
    var count = fieldList.length;
    for (i_dl = 0; i_dl < count; i_dl++) {
      f5common.disableLookupFields([$("#" + fieldList[i_dl])]);
    }
  };

  f5common.enableLookups = function (fieldList) {
    var count = fieldList.length;
    for (i_el = 0; i_el < count; i_el++) {
      $("#" + fieldList[i_el])
        .parent()
        .find(".input-group-btn")
        .show();
    }
  };

  f5common.enableDateTimeFields = function (fieldList) {
    var count = fieldList.length;
    for (i_edtf = 0; i_edtf < count; i_edtf++) {
      $("#" + fieldList[i_edtf])
        .next()
        .data("DateTimePicker")
        .enable();
    }
  };

  f5common.disableDateTimeFields = function (fieldList) {
    var count = fieldList.length;
    for (i_ddtf = 0; i_ddtf < count; i_ddtf++) {
      $("#" + fieldList[i_ddtf])
        .next()
        .data("DateTimePicker")
        .disable();
    }
  };

  f5common.enableFields = function (fieldList) {
    var count = fieldList.length;
    for (ecf = 0; ecf < count; ecf++) {
      $("#" + fieldList[ecf]).enable(true);
    }
  };

  f5common.disableFields = function (fieldList) {
    var count = fieldList.length;
    for (i_dcf = 0; i_dcf < count; i_dcf++) {
      $("#" + fieldList[i_dcf]).enable(false);
    }
  };

  f5common.disableLookupFields = function (fieldList) {
    var count = fieldList.length;

    for (dlf = 0; dlf < count; dlf++) {
      $("#" + fieldList[dlf])
        .parent()
        .removeClass("input-group")
        .find(".input-group-btn")
        .hide();
    }
    $(".text-muted").css("color", "transparent");
  };

  f5common.enableLookupFields = function (fieldList) {
    var count = fieldList.length;
    for (elf = 0; elf < count; elf++) {
      $("#" + fieldList[elf])
        .parent()
        .addClass("input-group")
        .find(".input-group-btn")
        .show();
    }
  };

  f5common.disableRadioButtonFields = function (fieldList) {
    var count = fieldList.length;
    for (drbf = 0; drbf < count; drbf++) {
      $("#" + fieldList[drbf] + " input:radio:not(:checked)").attr(
        "disabled",
        true
      );
    }
  };

  f5common.enableRadioButtonFields = function (fieldList) {
    var count = fieldList.length;
    for (erbf = 0; erbf < count; erbf++) {
      $("#" + fieldList[erbf] + " input:radio:not(:checked)").attr(
        "disabled",
        false
      );
    }
  };

  f5common.disablePicklistFields = function (fieldList) {
    var count = fieldList.length;
    for (dplf = 0; dplf < count; dplf++) {
      $("#" + fieldList[dplf]).attr("disabled", true);
    }
  };

  f5common.enablePicklistFields = function (fieldList) {
    var count = fieldList.length;
    for (eplf = 0; eplf < count; eplf++) {
      $("#" + fieldList[eplf]).attr("disabled", false);
    }
  };

  f5common.getUrlParameter = function getUrlParameter(sParam) {
    var urlParams = new URLSearchParams(window.location.search);
    return urlParams.get(sParam);
  };

  f5common.composeTrainingExtLink = async function composeTrainingExtLink(
    baseUrl,
    trainingId,
    clientId
  ) {
    const token = await f5common.getPortalToken(clientId);

    return `${baseUrl}?key=${token}&trainingplanid=${trainingId}`;
  };

  f5common.getPortalToken = async function getPortalToken(clientId) {
    return fetch("/_services/auth/token?client_id=" + clientId, {
      method: "POST",
    })
      .then((response) => response.text())
      .then((stringToken) => stringToken);
  };

  f5common.addModalForm = function (modalId, modalTitle) {
    var modalSection = $("<section>", {
      id: modalId,
      "aria-hidden": "true",
      "aria-label":
        "<span class='fa fa-info-circle' aria-hidden='true'></span> Modal Form",
      class: "modal fade modal-form modal-form-details",
      "data-backdrop": "static",
      role: "dialog",
      tabindex: "-1",
      style: "display: none;",
    });
    $("body").prepend(modalSection);
    var modalDialog = $("<div>", { class: "modal-lg modal-dialog" });
    modalSection.append(modalDialog);
    var modalContent = $("<div>", { class: "modal-content" });
    modalDialog.append(modalContent);
    var modalHeader = $("<div>", { class: "modal-header" });
    modalContent.append(modalHeader);
    var closeButton = $("<button>", {
      "aria-label": "Close",
      class: "close",
      "data-dismiss": "modal",
      tabindex: "0",
      title: "Close",
      type: "button",
    });
    modalHeader.append(closeButton);
    closeButton.append($("<span>", { "aria-hidden": "true", text: "x" }));
    closeButton.append($("<span>", { class: "sr-only", text: "Close" }));
    modalHeader.append(
      $("<h1>", {
        id: "formModalTitle",
        class: "modal-title h4",
        title: modalTitle,
        text: modalTitle,
      })
    );

    var modalBody = $("<div>", { class: "modal-body" });
    modalContent.append(modalBody);
    var formLoading = $("<div>", {
      class: "form-loading",
      style: "display: none;",
    });
    modalBody.append(formLoading);
    formLoading.append(
      $("<span>", {
        class: "fa fa-spinner fa-spin fa-4x",
        "aria-hidden": "true",
      })
    );
    modalBody.append($("<iframe>", { src: "" }));
  };

  f5common.setPhoneField = function (fieldName, required) {
    var field = $("#" + fieldName);
    field.prop("type", "tel");
    field.prop("autocomplete", "tel");
    field.prop("autocorrect", "off");
    field.prop("maxlength", "25");
    field.prop("pattern", "[0-9]{2}-[0-9]{1}-[0-9]{3}-[0-9]{4}");
    field.on("keypress", function (event) {
      return phonecharsonly(event.target, event);
    });
    var fieldLabel = $("label[for=" + fieldName + "]").text();
    f5common.addPhoneValidator(fieldName, fieldLabel, required);
  };

  function phonecharsonly(myfield, e, dec) {
    var key;
    var keychar;

    if (window.event) key = window.event.keyCode;
    else if (e) key = e.which;
    else return true;
    keychar = String.fromCharCode(key);

    // control keys
    if (
      key === null ||
      key === 0 ||
      key === 8 ||
      key === 9 ||
      key === 13 ||
      key === 27
    )
      return true;
    // numbers
    else if ("0123456789+-".indexOf(keychar) > -1) return true;
    // decimal point
    else if (dec && keychar === "." && myfield.value.indexOf(".") === -1)
      return true;
    else return false;
  }
})((window.f5common = window.f5common || {}));