(function (paw, utils, Popup, FinderFiltersComponent) {
  function HostSupportSessionsFilters(context) {
    var self = this;

    this.context = context;
    this.filterDefs = [
      {
        id: "search",
        pinned: true,
        label: this.context.localization.searchFind,
        ignoreStoreValue: false,
        markup:
          '<div class="paw-holder-rel"><input id="search" class="form-control paw-finder-input" type="text" placeholder="' +
          this.context.localization.searchFind +
          '" autocomplete="off" data-field-search /> <div class="paw-abs paw-abs-right paw-abs-middle paw-transform-y-middle paw-alpha-50 p-r-3x"><span class="fa fa-search"></span></div></div>',
        inputField: function ($elt, data) {
          return new paw.com.Input($elt, "search", data, undefined, function (
            e,
            val
          ) {
            return self.context.filterSessions();
          });
        },
      },
      {
        id: "company",
        pinned: true,
        label: this.context.localization.company,
        ignoreStoreValue: false,
        markup: function () {
          return (
            '<select id="company" class="form-control selectpicker" type="text" autocomplete="off" multiple="multiple" data-live-search="true" title="' +
            self.context.localization.company +
            '" data-custom-class="paw-finder-select" data-field-company>' +
            self.companyOptions +
            "</select>"
          );
        },
        inputField: function ($elt, data) {
          return new paw.com.Input(
            $elt,
            "company",
            data,
            {
              settings: {
                container: "body",
              },
            },
            function () {
              return self.context.filterSessions();
            }
          );
        },
      },
      {
        id: "user",
        pinned: true,
        label: this.context.localization.user,
        ignoreStoreValue: false,
        markup: function () {
          return (
            '<select id="user" class="form-control selectpicker" type="text" autocomplete="off" multiple="multiple" data-live-search="true" title="' +
            self.context.localization.user +
            '" data-custom-class="paw-finder-select" data-field-user>' +
            self.userOptions +
            "</select>"
          );
        },
        inputField: function ($elt, data) {
          return new paw.com.Input(
            $elt,
            "user",
            data,
            {
              settings: {
                container: "body",
              },
            },
            function () {
              return self.context.filterSessions();
            }
          );
        },
      },
      {
        id: "database",
        pinned: false,
        label: this.context.localization.database,
        ignoreStoreValue: false,
        markup: function () {
          return (
            '<select id="database" class="form-control selectpicker" type="text" autocomplete="off" multiple="multiple" data-live-search="true" title="' +
            self.context.localization.database +
            '" data-custom-class="paw-finder-select" data-field-database>' +
            self.databaseOptions +
            "</select>"
          );
        },
        inputField: function ($elt, data) {
          return new paw.com.Input(
            $elt,
            "database",
            data,
            {
              settings: {
                container: "body",
              },
            },
            function () {
              return self.context.filterSessions();
            }
          );
        },
      },
    ];

    this.filterModel = {
      search: "",
      company: [],
      user: [],
      database: [],
    };

    this.pinnedFilters = {};

    this.companyOptions = "";
    this.userOptions = "";
    this.databaseOptions = "";

    this.$filtersHolder = null;
    this.$finderFiltersAction = null;
  }

  HostSupportSessionsFilters.prototype.markupDef = function (filter) {
    var markup = [];
    markup.push('<div class="paw-col-d paw-finder-filter-slot">');
    markup.push("   <div>");
    markup.push(
      utils.value.isFunction(filter.markup) ? filter.markup() : filter.markup
    );
    markup.push("   </div>");
    markup.push("</div>");
    return markup;
  };

  HostSupportSessionsFilters.prototype.init = function () {
    var self = this;
    this.$filtersHolder = this.context.$elt.find(".paw-finder-pinned-filters");
    this.createPinnedFilters();

    this.$finderFiltersAction = this.context.$elt.find(
      "#support-sessions-filters"
    );
    this.$finderFiltersAction.on("click", function () {
      self.context.findOnChange = false;
      self.openFiltersPopup();
    });
  };

  HostSupportSessionsFilters.prototype.destroy = function () {
    this.destroyPinnedFilters();
    if (this.$finderFiltersAction) {
      this.$finderFiltersAction.off();
    }
    if (this.filtersPopup) {
      this.filtersPopup.hide();
    }
  };

  HostSupportSessionsFilters.prototype.unload = function () {
    this.filterModel = $.extend(
      true,
      this.filterModel,
      this.resetFilterModel()
    );
    this.compileFilterData();
  };

  HostSupportSessionsFilters.prototype.resetFilterModel = function () {
    return {
      search: "",
      company: [],
      user: [],
      database: [],
    };
  };

  HostSupportSessionsFilters.prototype.compileFilterData = function () {
    var self = this;
    self.companyOptions = "";
    utils.iterable.iterate(self.context.companies, function (company) {
      self.companyOptions +=
        "<option value=" +
        utils.value.strReplace(company, " ", "_") +
        ">" +
        company +
        "</option>";
    });
    self.$filtersHolder.find("#company").html(self.companyOptions);
    self.$filtersHolder.find("#company").selectpicker("refresh");

    self.userOptions = "";
    utils.iterable.iterate(self.context.users, function (user) {
      self.userOptions +=
        "<option value=" +
        utils.value.strReplace(user, " ", "_") +
        ">" +
        user +
        "</option>";
    });
    self.$filtersHolder.find("#user").html(self.userOptions);
    self.$filtersHolder.find("#user").selectpicker("refresh");

    self.databaseOptions = "";
    utils.iterable.iterate(self.context.databases, function (db) {
      self.databaseOptions +=
        "<option value=" +
        utils.value.strReplace(db, " ", "_") +
        ">" +
        db +
        "</option>";
    });
    self.$filtersHolder.find("#database").html(self.databaseOptions);
    self.$filtersHolder.find("#database").selectpicker("refresh");
  };

  HostSupportSessionsFilters.prototype.createFilterFromDef = function (
    filterDef,
    data,
    $elt,
    pinned,
    $filtersHolder
  ) {
    filterDef.pinned = pinned;
    return {
      id: filterDef.id,
      $elt: $elt,
      inputField: filterDef.inputField(
        $elt.find("#" + filterDef.id),
        data,
        $filtersHolder
      ),
      def: filterDef,
    };
  };

  HostSupportSessionsFilters.prototype.createPinnedFilters = function () {
    var self = this;
    var pinnedFiltersCount = 0;
    utils.iterable.iterate(this.filterDefs, function (filterDef) {
      if (!filterDef.pinned) {
        return;
      }
      var $filter = $(self.markupDef(filterDef).join("\n"));
      self.$filtersHolder.append($filter);
      self.pinnedFilters[filterDef.id] = self.createFilterFromDef(
        filterDef,
        self.filterModel,
        $filter,
        true,
        self.$filtersHolder
      );
      pinnedFiltersCount++;
    });

    this.adjustPinnedFiltersWidth(pinnedFiltersCount);
  };

  HostSupportSessionsFilters.prototype.adjustPinnedFiltersWidth = function (
    pinnedFiltersCount
  ) {
    if (pinnedFiltersCount <= 1) {
      return;
    }
    var pinnedFilterMaxW = 100 / pinnedFiltersCount;
    utils.iterable.iterate(this.pinnedFilters, function (pinnedFilter) {
      pinnedFilter.$elt.css("max-width", pinnedFilterMaxW + "%");
    });
  };

  HostSupportSessionsFilters.prototype.openFiltersPopup = function () {
    var self = this;
    this.filtersPopup = new Popup("support-sessions-filters-popup", {
      Component: FinderFiltersComponent,
      bind: {
        finderDef: {
          resetValues: function () {
            return self.resetFilterModel();
          },
        },
        filterDefs: self.filterDefs,
        pinnedFilters: self.pinnedFilters,
        data: $.extend(true, {}, self.filterModel),
        localization: self.context.localization,
        onSearch: function (data) {
          self.context.findOnChange = true;
          $.extend(true, self.filterModel, data);
          utils.iterable.iterate(self.filterDefs, function (filterDef) {
            var pinnedFilter = self.pinnedFilters[filterDef.id];
            if (utils.value.isSet(pinnedFilter)) {
              pinnedFilter.inputField.refreshValue();
              return;
            }
          });

          self.filtersPopup.hide();
          self.context.filterSessions();
        },
        onClear: function () {
          utils.iterable.iterate(self.pinnedFilters, function (filter) {
            filter.refreshValue();
          });
        },
        onPinned: function (filter) {
          self.destroyPinnedFilters();
          self.createPinnedFilters();
        },
        createFilterFromDef: function (
          filterDef,
          data,
          $filter,
          pinned,
          $filtersHolder
        ) {
          return self.createFilterFromDef(
            filterDef,
            data,
            $filter,
            pinned,
            $filtersHolder
          );
        },
      },
      styleClass: "paw-finder-filters-popup",
      title: self.context.localization.filters,
      onClose: function () {
        self.context.findOnChange = true;
        self.filtersPopup = null;
      },
    });
    this.filtersPopup.show();
  };

  HostSupportSessionsFilters.prototype.destroyPinnedFilters = function () {
    var self = this;
    utils.iterable.iterate(self.pinnedFilters, function (pinnedFilter) {
      pinnedFilter.inputField.remove();
      pinnedFilter.$elt.remove();
      delete self.pinnedFilters[pinnedFilter.id];
    });
  };

  paw.com.login.hostSupport.HostSupportSessionsFilters =
    HostSupportSessionsFilters;
})(paw, paw.utils, paw.com.Popup, paw.com.finder.FinderFiltersComponent);
