(function (paw, utils) {
  function FinderFiltersComponent($elt) {
    this.onSearch;
    this.onClearFilters;
    this.onPinned;
    this.createFilterFromDef;
    this.finderDef;
    this.localization;
    this.filterDefs = [];
    this.pinnedFilters = {};
    this.filtersConfig = {};
    this.data = {};

    this.$elt = $elt;

    this.filters = {};
    this.$filters = null;
    this.pinnedCount = 0;
  }

  FinderFiltersComponent.prototype.markupDef = function () {
    var markup = [];
    markup.push('<div class="paw-area-v paw-holder paw-nooverflow">');
    markup.push(
      '   <div class="paw-col-d paw-finder-filters-list paw-scrollable form-horizontal">'
    );
    markup.push("   </div>");

    markup.push(
      '   <div class="paw-col paw-area-h paw-nooverflow paw-finder-filters-actions">'
    );
    markup.push('      <div class="paw-col-d">');
    markup.push("      </div>");
    markup.push('      <div class="paw-col">');
    utils.iterable.iterate(this.actions, function (action) {
      markup.push(
        '      <button id="' +
          action.id +
          '" class="paw-finder-filter-action' +
          (" " + action.styleClass || "") +
          '">'
      );
      markup.push("         <span>" + action.label + "</span>");
      markup.push("      </button>");
    });
    markup.push("      </div>");
    markup.push("   </div>");
    markup.push("</div>");
    return markup;
  };

  FinderFiltersComponent.prototype.filterMarkupDef = function (filterDef) {
    var markup = [];
    markup.push('<div class="row form-group paw-filter form-horizontals">');
    if (utils.value.isSet(filterDef.label)) {
      markup.push('   <div class="col-xs-4">');
      markup.push(
        '      <label class="control-label control-label-left">' +
          filterDef.label +
          "</label>"
      );
      markup.push("   </div>");
    }
    markup.push('   <div class="col-xs-6">');
    markup.push(
      utils.value.isFunction(filterDef.markup)
        ? filterDef.markup()
        : filterDef.markup
    );
    markup.push("   </div>");
    markup.push('   <div class="col-xs-2">');
    markup.push(
      '      <button class="paw-btn paw-filter-pin' +
        (filterDef.pinned ? " paw-active" : "") +
        '" data-filter-id="' +
        filterDef.id +
        '"><span class="fa fa-thumb-tack"></span></button>'
    );
    markup.push("   </div>");
    markup.push("</div>");
    return markup;
  };

  FinderFiltersComponent.prototype.onBinded = function () {
    var self = this;
    this.actions = [
      {
        id: "finder-filters-clear",
        label: this.localization.clear,
        styleClass: "btn btn-primary btn-outline btn-nav",
        onSelected: function () {
          $.extend(true, self.data, self.finderDef.resetValues());

          utils.iterable.iterate(self.filters, function (filter) {
            filter.inputField.refreshValue();
          });
          if (utils.value.isFunction(self.onClearFilters)) {
            self.onClearFilters();
          }
        },
      },
      {
        id: "finder-filters-search",
        label: this.localization.searchFind,
        styleClass: "btn btn-primary btn-nav",
        onSelected: function () {
          if (utils.value.isFunction(self.onSearch)) {
            self.onSearch(self.data);
          }
        },
      },
    ];
  };

  FinderFiltersComponent.prototype.init = function () {
    var self = this;
    this.$filters = this.$elt.find(".paw-finder-filters-list");

    // build filters from definition
    utils.iterable.iterate(this.filterDefs, function (filterDef) {
      var $filter = $(self.filterMarkupDef(filterDef).join("\n"));
      self.$filters.append($filter);
      var isPinned = utils.value.isSet(self.pinnedFilters[filterDef.id]);
      self.filters[filterDef.id] = self.createFilterFromDef(
        filterDef,
        self.data,
        $filter,
        isPinned,
        self.$filters
      );
      if (isPinned) {
        self.pinnedCount++;
      }
    });

    // register actions events
    utils.iterable.iterate(this.actions, function (action) {
      if (utils.value.isFunction(action.onSelected)) {
        self.$elt.find("#" + action.id).on("click", function (e) {
          action.onSelected(e);
        });
      }
    });

    // register filters pinning
    this.$filters.find(".paw-filter .paw-filter-pin").on("click", function (e) {
      self.onPinFilter($(this));
    });
  };

  FinderFiltersComponent.prototype.destroy = function () {
    this.$filters.find(".paw-filter .paw-filter-pin").off();
    utils.iterable.iterate(this.filters, function (filter) {
      filter.inputField.remove();
    });
    this.$elt
      .find(".paw-finder-filters-actions button.paw-finder-filter-action")
      .off();
  };

  FinderFiltersComponent.prototype.onPinFilter = function ($pin) {
    var filterId = $pin.attr("data-filter-id");
    var filter = this.filters[filterId];
    if (filter.def.pinned) {
      if (this.pinnedCount === 1) {
        return;
      }
      filter.def.pinned = false;
      $pin.removeClass("paw-active");
      this.pinnedCount--;
    } else {
      filter.def.pinned = true;
      $pin.addClass("paw-active");
      this.pinnedCount++;
    }

    if (utils.value.isFunction(this.onPinned)) {
      this.onPinned(filter);
    }
  };

  paw.com.finder.FinderFiltersComponent = FinderFiltersComponent;
})(paw, paw.utils);
