(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(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);