$(function () {
  $.noConflict();
  $(document).ready(loadPage);

  function addHeaders(item) {
    var dialog = $('#dialogBox').dialog({
      autoOpen: false,
      width: "50%",
      modal: true,
      closeOnEscape: true,
      buttons: {
        Save: function () {
          var items = $("#dialogGrid").jsGrid("option", "data");
          var data = new Object();
          for (var i = 0; i < items.length; ++i) {
            data[items[i].Header] = items[i].Value;
          }
          var payload = {};
          payload.api = item.api;
          payload.pdata_headers = JSON.stringify(item.headers);
          payload.key = item.consumerid ? item.consumerid : '';
          payload.headers = JSON.stringify(data);
          payload.body_headers = $("#body_headers").val();
          if (!validate(payload.body_headers)) {
            alert("Invalid body headers");
            return false;
          }
          $.ajax({
            type: 'POST',
            url: '/clarivate/customheaders/' + item["pluginid"],
            contentType: "application/x-www-form-urlencoded",
            data: payload,
            cache: false,
          }).done(function (r) {
            $('#dialogBox').dialog("close");
          });
        },
        Cancel: function () {
          $(this).dialog("close");
        }
      },
    });
    loadHeaders(item);
    dialog.dialog("option", "title", "Add Headers (Api: " + item.api + " Application: " + item.application + ")").dialog("open");
    $("#dialogForm").html("Add headers to body (Globally) <input type='text' id='body_headers' name='body_headers' size='80'>");
    $('#dialogGrid').jsGrid('refresh');
  }

  function validate(s) {
    return (s == "" || s.split(",").indexOf("") === -1) ? true : false;
  }

  function enableSave(enable) {
    var buttons = $("#dialogBox").dialog("option", "buttons");
    if (!enable) {
      $(":button:contains('Save')").addClass("ui-state-disabled");
    } else {
      $(":button:contains('Save')").removeClass("ui-state-disabled");
    }
  }

  function loadHeaders(item) {
    $("#dialogGrid").jsGrid("destroy");
    $("#dialogGrid").jsGrid({
      height: 300,
      width: "100%",
      filtering: false,
      paging: true,
      editing: true,
      autoload: true,
      sorting: true,
      inserting: true,
      pageSize: 5,
      deleteConfirm: "Do you really want to delete this Header?",
      onItemInserting: function (args) {
        enableSave(true);
      },
      controller: {
        loadData: function () {
          var d = $.Deferred();
          $.getJSON('/clarivate/customheaders/' + item.api, function (data) {
            console.log('data', data);
            item.pluginid = data.pluginid;
            if (!data.pluginid) {
              $("#dialogGrid").jsGrid("destroy");
              $("#dialogGrid").append("Custom-Key-Headers plugin not defined for this API");
              enableSave(false);
            }
            item.headers = data.headers;
            item.body_headers = data.body_headers;
            var hdata = [];
            $.each(data.headers, function (index, val) {
              var m = this;
              console.log('data.headers', item.consumerid, data.headers[index], m.headers)
              if (item.consumerid && data.headers[index].key == item.consumerid) {
                $.each(m.headers, function (key, val) {
                  var obj = new Object();
                  obj["Header"] = key;
                  obj["Value"] = val;
                  hdata.push(obj);
                });
              }
            });
            $('#body_headers').val(item.body_headers);
            d.resolve(hdata);
          });
          return d.promise();
        }
      },

      fields: [
        {
          name: "Header", type: "text", width: "45%",
          validate: {
            validator: "pattern",
            param: "^[a-z0-9A-Z_\-]+$"
          }
        },
        {
          name: "Value", type: "text", width: "45%",
          validate: {
            validator: "pattern",
            param: "^[a-z0-9A-Z\s]+$",
            message: function (value, item) {
              return "Entered value \"" + value + "\" is not valid; It must not contain special characters. List: !#$ %& () * +, -./: ;<=>?@[\]^ _`{|}~";
            },
          }
        },
        { type: "control", width: "10%" }
      ]
    });

  }

  function loadPage() {
    $("#jsGrid").jsGrid("destroy");
    $('#jsGrid').jsGrid({
      width: "100%",
      height: "500px",
      pageSize: 10,
      pageSizes: [10, 20, 50, 100],
      filtering: true,
      sorting: true,
      paging: true,
      autoload: true,
      pageLoading: true,
      pageIndex: 1,
      editing: false,
      rowClick: function (args) {
        if ((args.event.target.cellIndex == 5) && (admin && admin == "true")) {
          this.editItem(args.event.target.closest("tr"));
        }
      },
      _createPager: function () {
        var $result = $("<div>").append(this._createPagerByFormat()).append("&nbsp;&nbsp;&nbsp;&nbsp;");
        var $selectBox = $("<select>").attr("class", "pageSize")
          .on('change', function (event) { $("#jsGrid").jsGrid("option", "pageSize", event.currentTarget.value); });
        var currentSelectBoxValue = this.pageSize;
        $.each(this.pageSizes, function (index, value) {
          var optionElement = $("<option>").attr("value", value).text(value);
          if (value === Number(currentSelectBoxValue)) {
            optionElement.attr("selected", true);
          }
          optionElement.appendTo($selectBox);
        });
        $result.append("<span>Page size: </span>").append($selectBox);
        $result.addClass(this.pagerClass);
        return $result;
      },
      onItemEditing: function (args) {
        if (!args.item.apikey) args.cancel = true;
      },
      controller: {
        updateItem: function (item) {
          var result = $.Deferred();
          var payload = {};
          payload.plan = item.plan;
          payload.apikey = item.apikey;
          payload.application = item.application;
          payload.api = item.api;
          $.ajax({
            type: 'POST',
            url: '/clarivate/' + item.application + '/subscribe/' + item.api,
            dataType: 'json',
            data: payload,
            contentType: "application/x-www-form-urlencoded",
            cache: false,
          }).done(function (r) {
            alert('Key updated....');
            $("#jsGrid").jsGrid("loadData");
          });
          return result.promise();
        },

        loadData: function (filter) {
          var d = $.Deferred();
          $.getJSON('/clarivate/subscriptions', { filter }, function (data) {
            if (data.subscriptions != null) {
              d.resolve({ data: data.subscriptions.items, itemsCount: data.subscriptions.count });
            } else {
              d.resolve({ data: 0, itemsCount: 0 });
            }
            $(".jsgrid-cell").css("overflow", "hidden");
          })
            .fail((err) => {
              if (err.status === 403) {
                window.location.reload();
              }
            });
          return d.promise();
        }
      },
      fields: [
        {
          name: "api", type: "text", title: "API", width: 50, editing: false,
          itemTemplate: function (value, item) {
            return $("<a>").attr("href", item._links.apis.href + '/' + item.api).text(value);
          }
        },
        {
          name: "application_name", type: "text", title: "Application", width: 110, editing: false,
          itemTemplate: function (value, item) {
            return $("<a>").attr("href", item._links.application.href.toLowerCase()).text(value);
          }
        },
        {
          name: "owner", type: "text", title: "Owner(s)", width: 110, editing: false,
          itemTemplate: function (value, item) {
            let resp = [];
            item.owner_data.forEach(function (owner) {
              resp.push("<a href=\'/users/" + owner.users_id + "\'>" + owner.email + "</a>");
            });
            return resp.join(', ');
          }
        },
        { name: "consumerid", type: "text", title: "Consumer ID", width: 110, editing: false, sorting: false },
        {
          name: "auth", title: "Auth", width: 30, editing: false, sorting: false,
          itemTemplate: function (value, item) {
            var $authtype = $("<img>").attr("title", "Click to view application")
              .attr("src", (item.auth == 'oauth2') ? "/images/oauth2-icon-32.png" : "/images/key-icon-32.png");
            $authtype.on("click", function () {
              window.location.href = item._links.application.href.toLowerCase();
            });
            return $("<td>").append($authtype);
          }
        },
        {
          name: "apikey", type: "text", title: "Key", width: 160, sorting: false, filtering: false,
          validate: {
            validator: function (value, item) {
              if (!value) return false;
              if (value.length < 8 || value.length > 50) return false;
              if (!value.match('^[a-zA-Z0-9_\-]*$')) return false;
              return true;
            },
            message: function (value, item) {
              if (!value) return "Key value is required";
              if (value.length < 8 || value.length > 50) return "Key cannot be less than 8 or more than 50 characters long";
              if (!value.match('^[a-zA-Z0-9_\-]*$')) return "Pattern not allowed";
              return "";
            }
          }
        },
        { name: "plan", type: "text", title: "Plan", width: 50, editing: false },
        {
          type: "control",
          _createFilterSwitchButton: function () {
            return this._createOnOffSwitchButton("filtering", this.searchModeButtonClass, false);
          },
          itemTemplate: function (value, item) {
            var $editButton = $("<input>").attr("type", "button").addClass("jsgrid-button jsgrid-edit-button")
              .on("click", function () {
                addHeaders(item)
              });
            return $("<td>").append($editButton);
          }
        }
      ]
    });
    $("#jsGrid").jsGrid("option", "filtering", false);
    $(".jsgrid-cell").css("word-wrap", "break-word")
      .css("overflow", "hidden");
  }
});