.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 60px;
  padding: 6px 10px 7px;
  @include media-breakpoint-up(lg) {
    padding: 5px 10px 6px;
  }

  &-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: $white;
    padding: 5px 10px;
    border: 1px solid $stroke-gray;
    transition: border-color 0.2s ease;
    cursor: pointer;

    @include media-breakpoint-down(md) {
      padding: 4px 10px 5px;
    }

    label {
      cursor: pointer;
    }
  }
}

const Util = {
  getSelectorFromElement(element) {
    var selector = element.getAttribute('data-target')
    if (!selector || selector === '#') {
      selector = element.getAttribute('href') || ''
    }

    try {
      return document.querySelector(selector) ? selector : null
    } catch (err) {
      return null
    }
  },
  getIdFromDropdown(element) {
    var selector = element.parentElement.getAttribute('data-id')

    try {
      return document.getElementById(selector) ? document.getElementById(selector) : null
    } catch (err) {
      return null
    }
  },
  getFilterTarget(element) {
    var selector = element.getAttribute('data-filter-target')
    if (!selector || selector === '#') {
      selector = element.getAttribute('href') || ''
    }

    try {
      return document.querySelector(selector) ? selector : null
    } catch (err) {
      return null
    }
  },
  /**
   * Loop through selectors object.
   * @param {object} selectors
   * @param {object} $this
   */
  loopSelectors(selectors) {
    // Loop selectors
    $(selectors).each(function () {
      const $target = $(this)
      let target_query = $target.data('filter-query');
      if (typeof (target_query) === 'undefined') {
        return; //continue;
      } else if (typeof (target_query) === 'number'){
        target_query = '' + target_query;
      }

      let querys = target_query.split(',');

      querys.forEach(function (query) {
        query = query.replace(/\s/g, '');
        if (_.indexOf(filters, query) != -1) {
          $target.removeClass('filter-off');
        }
      })

    })
  },
  /**
   * Reset all filters and toggle all off.
   * @param {object} selectors
   */
  filterOff(selectors) {
    // Get filter-off chip and remove siblings active class
    var chip = $('[data-filter='+'filter-off'+']')
    // chip.siblings().removeClass('active');
    $('[data-filter]').removeClass('active');
    chip.addClass('active')

    //remove 'selectize' active class
    $('.select-chip').removeClass('active');
    var select = $('select.select-chip');
    select.each(function (i, e) {
      let selector = e.selectize
      if (selector.currentResults != null) {
        setValueId = selector.currentResults.items[0].id;
        selector.setValue(setValueId, true);
      }
    })


    //Reset filters array 
    filters = [];

    //Remove all filters on selectors 
    $(selectors).removeClass('filter-off');
  }
}

// Filter information [data-filter=] on HTML tags
/* PARAMS: 
  Data filter pivot: data-filter='info-to-filter'
  Targets to filter: data-filter-target='css selector'
*/
var filters = [];
$(function () {
  console.log('$this')

  $(document).on('click', '[data-filter]', function () {
    var $this = $(this);
    console.log($this)
    // Get target selectors to filter
    const selector = Util.getFilterTarget(this)
    const selectors = [].slice.call(document.querySelectorAll(selector))
    // Get filter query data
    var filter = $this.data('filter');

    if (typeof (filter) === 'number'){
      filter = '' + filter;
    }

    // If [data-filter='filter-off'] → remove all filters from selectors.
    if (filter == 'filter-off') {
      Util.filterOff(selectors);
      return false;
    }

    // Remove active clases and set active the new element
    $this.toggleClass('active');

    // Reset all filters from selectors.
    $(selectors).addClass('filter-off');

    if (_.indexOf(filters, filter) == -1) {
      filters.push(filter)
    } else {
      filters = _.without(filters, filter)
      if (filters.length === 0) {
        Util.filterOff(selectors);
        return false;
      }
    }

    $('[data-filter='+'filter-off'+']').removeClass('active')
    Util.loopSelectors(selectors)
  })
})