import { disableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock';
import { search, clearPrograms, updateCounter } from './catalog';
import { $ } from '@utils';

const Classes = {
  VISIBLE: `visible`
};

const Selectors = {
  EXPANDABLE: `.filter-fieldset__item--expand`,
  TOGGLE: `.filter-fieldset__toggle`
};

class FilterGroup {
  constructor (container) {
    this.container = container;

    this.toggle = container.querySelector(Selectors.TOGGLE);

    this.handleToggleClick = this.handleToggleClick.bind(this);
  }

  handleToggleClick () {
    if (this.container.classList.contains(Classes.VISIBLE)) {
      this.container.classList.remove(Classes.VISIBLE);
    } else {
      this.container.classList.add(Classes.VISIBLE);
    }
  }

  bind () {
    this.toggle.addEventListener('click', this.handleToggleClick);
  }
}

export default () => {
  const filterContainer = document.querySelector('.catalog-details__filter');

  if (!filterContainer) { return }

  const filter = filterContainer.querySelector('.filter');
  const filterToggle = filterContainer.querySelector('.catalog-details__filter-toggle');
  const filterGroups = filterContainer.querySelectorAll(Selectors.EXPANDABLE);
  //const resetFiltersToggle = filterContainer.querySelector('.filter__button-reset');
  const floatingResults = filterContainer.querySelector('.filter__results');

  const applyFiltersButton = filterContainer.querySelector('.filter__button-submit');

  if (filterGroups.length) {
    [...filterGroups].forEach((group) => {
      const groupController = new FilterGroup(group);

      groupController.bind();
    });
  }

  const resetFilters = (e) => {
    e.preventDefault();
    filter.classList.add('js-reseting');

    [...filter.elements].forEach((element) => {
      if (element.type && element.type === 'checkbox') {
        element.checked = false;
      } else if (element.classList && element.classList.contains('js-state')) {
        element.parentElement.rangeSlider && element.parentElement.rangeSlider.reset();
      }
    });

    if (floatingResults) {
      floatingResults.classList.remove('visible');
    }

    $('input[name="page"]').value = 1;
    clearPrograms();
    search();

    setTimeout(() => {
      filter.classList.remove('js-reseting');
    }, 500);
  };

  const openFilter = () => {
    disableBodyScroll(filter);
    filter.classList.add('js-open');
  };

  const closeFilter = (e) => {
    e.preventDefault();
    e.stopPropagation();

    clearAllBodyScrollLocks();
    filter.classList.remove('js-open');
    updateCounter();
    search();
  };

  filterToggle.addEventListener('click', openFilter);
  applyFiltersButton.addEventListener('click', closeFilter);
  //resetFiltersToggle.addEventListener('click', resetFilters);
};