import { $$, $ } from 'utils';

let programs = [];

const allProgramToggles = [...$$('.js-toggle-program-all')];
const groupsProgramToggles = [...$$('.js-toggle-program-group')];
const programToggles = [...$$('[name="subcategories[]"]')];

const filters = [...$$('.params')];
const searchInput = $('input.search');

const page = $('input[name="page"]');

const toggleAllPrograms = (state) => {
  if (state) {
    programs = [];
  }
  renderPrograms();
};

const toggleProgramsGroup = (item) => {
  const values = JSON.parse(item.dataset.values);
  const state = item.checked;

  if (state) {
    programs = programs.concat(values);
  } else {
    programs = programs.filter((program) => {
      return values.indexOf(program) < 0;
    });
  }

  renderPrograms();
};

const toggleProgram = (value, state) => {
  if (state) {
    programs.push(value);
  } else {
    programs = programs.filter((program) => {
      return program !== value;
    });
  }

  renderPrograms();
};

const renderFilters = () => {

};

const renderPrograms = () => {
  // Check all
  allProgramToggles.forEach((item) => {
    item.checked = !programs.length;
  });

  // Check groups
  groupsProgramToggles.forEach((item) => {
    const values = JSON.parse(item.dataset.values);
    const state = !values.some(function (value) {
      return !programs.includes(value);
    });
    item.checked = state;
  });

  // Check programs
  programToggles.forEach((item) => {
    item.checked = programs.includes(item.value);
  });

  page.value = 1;
  window.search();
};

const initFilters = () => {
  if (groupsProgramToggles) {
    groupsProgramToggles.forEach((item) => {
      item.addEventListener('change', () => {
        toggleProgramsGroup(item);
      });
    });
  }

  if (programToggles) {
    programToggles.forEach((item) => {
      item.addEventListener('change', () => {
        const currentValue = item.value;
        const state = item.checked;
        toggleProgram(currentValue, state);
      });
    });
  }

  [...$$('.js-clear')].forEach((item) => {
    item.addEventListener('click', (ev) => {
      ev.preventDefault();

      switch (item.dataset.type) {
        case 'programs':
          programs = [];
          renderPrograms();
          break;
        case 'filters':
          filters.forEach((item) => {
            item.value = '';
          });
          renderFilters();
          break;
        case 'search':
          searchInput.value = '';
          break;
      }

      page.value = 1;
      window.search();
    });
  });

  filters.forEach((item) => {
    item.addEventListener('change', (ev) => {
      const value = item.value;
      [...$$(`[name="${item.getAttribute('name')}"]`)].forEach((subItem) => {
        subItem.value = value;
      });
      page.value = 1;
      window.search();
    });
  });
};

export default () => {
  initFilters();
};