/* eslint-disable */
import { $$, $, plural_ru, plural_en, isMobile, pll } from '@utils';
import { initButtons } from './compare';
import {updateFormState} from './cart';
import {reachGoal} from './yandexCounter';
import axios from 'axios';
import qs from 'qs';
import Modal from "./modal";

let programs = [];

const groupsProgramToggles = [...$$('.js-toggle-program-group')];
const programToggles = [...$$('[name="subcategories[]"]')];
const brandToggles = [...$$('[name="brand_id[]"]')];
const floatingCounter = $('.filter__results');
const filterItems = $$('.filter-fieldset__item');

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

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

const filterAmountEl = document.querySelector('.catalog-details__amount');
const filterSubChecks = document.querySelectorAll('.filter .filter-fieldset__subitem input[type="checkbox"]');
const filterUpChecks = document.querySelectorAll('.filter .filter-fieldset__item:not(.filter-fieldset__item--expand) > input[type="checkbox"]');
const filterRanges = document.querySelectorAll('.filter .filter-fieldset__range-box');

const calculateFilters = () => {
  const subCheckboxCount = [...filterSubChecks].filter((check) => check.checked).length;
  const upCheckboxCount = [...filterUpChecks].filter((check) => check.checked).length;
  const rangesCount = [...filterRanges].filter((range) => !range.rangeSlider.defaultState).length;

  return subCheckboxCount + upCheckboxCount + rangesCount;
};

const setFiltersAmount = () => {
  if (!filterAmountEl) { return };

  filterAmountEl.textContent = calculateFilters() || 0;
};

export const clearPrograms = () => {
  programs = [];
};

const buildPagination = (currentPage, total, limit) => {
  const pages = Math.ceil(total / limit);
  currentPage = parseInt(currentPage);

  let pagination = [];
  let spacer = false;
  for (let i = 1; i <= pages; i++) {
    if ((i < currentPage && i >= (currentPage - 5)) || (i > currentPage && i <= (currentPage + 5)) || i === 1 || i === pages || i === currentPage) {
      if (i === currentPage) {
        pagination.push('<li><a class="current" href="">' + i + '</a></li>');
        spacer = false;
      } else {
        if (i === 1) {
          pagination.push('<li><a href="/' + window.currentPageUrl + '" class="js-page" data-page="' + i + '">' + i + '</a></li>');
        } else {
          pagination.push('<li><a href="/' + window.currentPageUrl + 'page/' + i + '" class="js-page" data-page="' + i + '">' + i + '</a></li>');
        }

        spacer = false;
      }
    } else {
      if (!spacer) {
        spacer = true;
        pagination.push('<li><a>...</a></li>');
      }
    }
  }

  if (currentPage === pages) {
    $('.pagination__control--next').classList.add('disabled');
  } else {
    $('.pagination__control--next').classList.remove('disabled');
  }

  if (currentPage === 1) {
    $('.pagination__control--prev').classList.add('disabled');
  } else {
    $('.pagination__control--prev').classList.remove('disabled');
  }

  return '<ul class="pagination__page-links">' + pagination.join('') + '</ul>';
};

let loader;
let alertBlock;

const toCart = (productId, quantity, button) => {
  button.classList.add('js-loading');

  if (!loader) {
    loader = $('.spinner')
  }

  if (!alertBlock) {
    alertBlock = $('.alerts');
  }

  loader.spinner.run();

  axios
    .post(
      '/wp-json/cart/add', qs.stringify({
        'productId': productId,
        'quantity': quantity
      }))
    .then(function (res) {
      loader.spinner.stop();

      if (res.data.status === 'ok') {
        reachGoal('AddGoodsCart');
        button.classList.add('js-in-cart');
        button.classList.remove('js-loading');
        updateCartCounter(res.data.count);
        alertBlock.alert.showSuccess(null, true);
      }
    })
    .catch((err) => {
      loader.spinner.stop();
      alertBlock.alert.showError(err.message);
    })
  ;
};

export const updateCartCounter = (count) => {
  $('.user-nav__button--cart .user-nav__amount').textContent = count;
};

export const clearCart = () => {
  updateCartCounter(0);

  [...$$('.js-to-cart[data-id]')].forEach((button) => button.classList.remove('js-in-cart'));

  $('.modal__order-list').innerHTML = '';
};

export const search = () => {
  const form = $('#search_catalog');

  if (!form || form.tagName.toLowerCase() !== 'form') { return}

  const formData = new FormData(form);

  if (!loader) {
    loader = $('.spinner')
  }

  loader.spinner.run();

  const TEMPLATE = '<article class="product-card">\n' +
    '                    <h3 class="product-card__title"><a href="{URL}">{TITLE}</a></h3>\n' +
    '                    <div class="product-card__img-wrp">\n' +
    '                        <picture>\n' +
    '                            <source media="(max-width: 0px)" srcset="{IMAGE.WEB}"><img src="{IMAGE}" alt="">\n' +
    '                        </picture>\n' +
    '                    </div>\n' +
    '                    <div class="product-card__chars">\n' +
    '                        <div class="product-card__table">\n' +
    '                            <table>\n' +
    '                                <tbody><tr><td>{PRICE}</td><td>{ON_REQUEST}</td></tr><tr data-brand-id="{BRAND_ID}"><td>{PART_NUMBER}</td><td>{SKU}</td></tr>' +
    '{PARAMS}\n' +
    '                                </tbody>\n' +
    '                            </table>\n' +
    '                        </div>\n' +
    '                        <div class="product-card__buttons card-buttons">\n' +
    '                            <div class="card-buttons__row">\n' +
    '                                <div class="card-buttons__quant">\n' +
    '                                    <button>-</button>\n' +
    '                                    <button>+</button>\n' +
    '                                    <input type="number" placeholder="1" value="1">\n' +
    '                                </div>\n' +
    '                                <a class="button-link card-buttons__button card-buttons__button--cart js-to-cart {INCART}" data-id="{ID}"><span class="text-default">' + pll('To cart') + '</span><noindex><span class="text-active">' + pll('At cart') + '</span></noindex></a>\n' +
    '                            </div>\n' +
    '                            <div class="card-buttons__row">\n' +
    '                                <button class="button-link button-link--inverse button-link--with-icon card-buttons__button card-buttons__button--compare js-compare" data-id="{ID}">\n' +
    '                                    <svg class="icon" width="18" height="18" viewBox="0 0 18 18">\n' +
    '                                        <use xlink:href="/wp-content/themes/innodrive/assets/sprite/sprite.svg#icon-search"></use>\n' +
    '                                    </svg><span class="text-default">' + pll('To compare') + '</span><noindex><span class="text-active">' + pll('At compare') + '</span></noindex>\n' +
    '                                </button>\n' +
    '                            </div>\n' +
    '                        </div>\n' +
    '                    </div>\n' +
    '                </article>'
  ;

  axios
    .post(
      '/wp-json/catalog/search', formData, {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      }
    )
    .then(function (res) {
      if (!isMobile()) {
        loader.spinner.stop();
        form.classList.remove('js-progress');
        form.disabled = false;
      }

      if (res.data.success == 'ok') {
        // load form
        if (isMobile()) {
          let url = '/';
          window.location = url + res.data.url;
        } else {
          $('.catalog-details__cards').innerHTML = '';
          [...res.data.data].forEach((row) => {
            let groups = row.groups;
            let dimensions = [];
            Object.keys(groups).forEach((name) => {
              const list = groups[name];
              Object.keys(list).forEach((paramsName) => {
                const dimension = list[paramsName];
                dimensions[paramsName] = dimension;
              });
            });

            let line = TEMPLATE;
            line = line.split('{PRICE}').join(window.translations['Price']);
            line = line.split('{MANUFACTURER}').join(window.translations['Manufacturer']);
            line = line.split('{ON_REQUEST}').join(window.translations['on request']);
            line = line.split('{PART_NUMBER}').join(window.translations['Part number']);
            line = line.split('{TITLE}').join(pll(row.title));
            line = line.split('{BRAND_LINK}').join(pll(row.brandLink));
            line = line.split('{URL}').join(row.url);
            line = line.split('{ID}').join(row.id);

            const placeholderImage = window.brandsLogos.find(item => item.id === parseInt(row.brand_id));
            const image = row.image ? row.image : (placeholderImage ? placeholderImage.img : `${window.templateDirectory}/img/logo_${window.currentLanguage}.svg`);
            line = line.replace('{IMAGE}', image);
            line = line.replace('{IMAGE.WEB}', row.image);
            line = line.replace('{SKU}', row.sku);
            line = line.replace('{BRAND_ID}', row.brand_id);

            line = line.replace('{INCART}', row.isInCart ? 'js-in-cart' : '');
            let params = '';

            const names = Object.keys(res.data.params);
            names.forEach((paramName) => {
              const paramDBName = res.data.params[paramName];

              if (row[paramDBName] !== null && row[paramDBName] !== '') {
                params += '<tr><td>' + pll(paramName) + '</td><td>' + pll(row[paramDBName]) + ' ' + pll(dimensions[paramName]) + '</td></tr>';
              }
            });

            line = line.replace('{PARAMS}', params);
            $('.catalog-details__cards').insertAdjacentHTML('beforeEnd', line);
          });

          [...$$('[data-brand-id="10"], [data-brand-id="2"], [data-brand-id="9"], [data-brand-id="8"], [data-brand-id="10"], [data-brand-id="11"], [data-brand-id="12"]')].forEach(
            (numberRow) => numberRow.style.display = 'none'
          );

          [...$$('[data-brand-id="1"], [data-brand-id="3"], [data-brand-id="6"], [data-brand-id="7"]')].forEach(
            (numberRow) => {
              const card = numberRow.closest('.product-card');
              const button = card.querySelector('.js-to-cart');
              button.classList.remove('js-to-cart');
              button.classList.remove('js-in-cart');
              button.classList.add('js-analog-form');
              button.innerText = pll('Find analog');
            }
          );

          const modalAnalogElement = $('#modal-analog');
          if (modalAnalogElement) {
            new Modal(modalAnalogElement, {
              trigger: $$('.js-analog-form')
            });
          }

          $('.pagination__page-links').outerHTML = buildPagination(res.data.page, res.data.total, res.data.limit);
          initPagination();
          initButtons();
        }
      } else {
        // Show error message from res.data.msg;
      }
    })
    .catch((err) => {
      loader.spinner.stop();
    });
};

const initPagination = () => {
  [...$$('.js-page')].forEach((item) => {
    item.addEventListener('click', (ev) => {
      ev.preventDefault();
      ev.stopPropagation();
      page.value = item.dataset.page;

      if (item.getAttribute('href')) {
        window.history.pushState({}, '', item.getAttribute('href'));
      }
      search();
    });
  });

  [...$$('.js-limit')].forEach((item) => {
    item.addEventListener('change', (ev) => {
      ev.preventDefault();
      ev.stopPropagation();
      limit.value = item.value;
      page.value = 1;

      search();
    });
  });
};

const showMore = () => {
  const more = document.querySelector('.catalog-details__button-more');
  const pages = document.querySelectorAll('.js-page');

  if (!more) return;

  if (pages && pages.length <= 1) {
    more.classList.add('hide');
  }

  more.addEventListener('click', () => {
    const form = $('#search_catalog');

    page.value = Number(page.value) + 1;

    if (!form || form.tagName.toLowerCase() !== 'form') return;

    const formData = new FormData(form);

    if (!loader) {
      loader = $('.spinner')
    }

    loader.spinner.run();

    const TEMPLATE = '<article class="product-card">\n' +
        '                    <h3 class="product-card__title"><a href="{URL}">{TITLE}</a></h3>\n' +
        '                    <div class="product-card__img-wrp">\n' +
        '                        <picture>\n' +
        '                            <source media="(max-width: 0px)" srcset="{IMAGE.WEB}"><img src="{IMAGE}" alt="">\n' +
        '                        </picture>\n' +
        '                    </div>\n' +
        '                    <div class="product-card__chars">\n' +
        '                        <div class="product-card__table">\n' +
        '                            <table>\n' +
        '                                <tbody><tr><td>{PRICE}</td><td>{ON_REQUEST}</td></tr><tr data-brand-id="{BRAND_ID}"><td>{PART_NUMBER}</td><td>{SKU}</td></tr>' +
        '{PARAMS}\n' +
        '                                </tbody>\n' +
        '                            </table>\n' +
        '                        </div>\n' +
        '                        <div class="product-card__buttons card-buttons">\n' +
        '                            <div class="card-buttons__row">\n' +
        '                                <div class="card-buttons__quant">\n' +
        '                                    <button>-</button>\n' +
        '                                    <button>+</button>\n' +
        '                                    <input type="number" placeholder="1" value="1">\n' +
        '                                </div>\n' +
        '                                <a class="button-link card-buttons__button card-buttons__button--cart js-to-cart {INCART}" data-id="{ID}"><span class="text-default">' + pll('To cart') + '</span><noindex><span class="text-active">' + pll('At cart') + '</span></noindex></a>\n' +
        '                            </div>\n' +
        '                            <div class="card-buttons__row">\n' +
        '                                <button class="button-link button-link--inverse button-link--with-icon card-buttons__button card-buttons__button--compare js-compare" data-id="{ID}">\n' +
        '                                    <svg class="icon" width="18" height="18" viewBox="0 0 18 18">\n' +
        '                                        <use xlink:href="/wp-content/themes/innodrive/assets/sprite/sprite.svg#icon-search"></use>\n' +
        '                                    </svg><span class="text-default">' + pll('To compare') + '</span><noindex><span class="text-active">' + pll('At compare') + '</span></noindex>\n' +
        '                                </button>\n' +
        '                            </div>\n' +
        '                        </div>\n' +
        '                    </div>\n' +
        '                </article>'
    ;

    axios
        .post(
            '/wp-json/catalog/search', formData, {
              headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
              }
            }
        )
        .then(function (res) {
          if (!isMobile()) {
            loader.spinner.stop();
            form.classList.remove('js-progress');
            form.disabled = false;
          }

          if (res.data.success == 'ok') {
            // load form
            if (isMobile()) {
              let url = '/';
              window.location = url + res.data.url;
            } else {
              [...res.data.data].forEach((row) => {
                let groups = row.groups;
                let dimensions = [];
                Object.keys(groups).forEach((name) => {
                  const list = groups[name];
                  Object.keys(list).forEach((paramsName) => {
                    const dimension = list[paramsName];
                    dimensions[paramsName] = dimension;
                  });
                });

                let line = TEMPLATE;
                line = line.split('{PRICE}').join(window.translations['Price']);
                line = line.split('{MANUFACTURER}').join(window.translations['Manufacturer']);
                line = line.split('{ON_REQUEST}').join(window.translations['on request']);
                line = line.split('{PART_NUMBER}').join(window.translations['Part number']);
                line = line.split('{TITLE}').join(pll(row.title));
                line = line.split('{BRAND_LINK}').join(pll(row.brandLink));
                line = line.split('{URL}').join(row.url);
                line = line.split('{ID}').join(row.id);

                const placeholderImage = window.brandsLogos.find(item => item.id === parseInt(row.brand_id));
                const image = row.image ? row.image : (placeholderImage ? placeholderImage.img : `${window.templateDirectory}/img/logo_${window.currentLanguage}.svg`);
                line = line.replace('{IMAGE}', image);
                line = line.replace('{IMAGE.WEB}', row.image);
                line = line.replace('{SKU}', row.sku);
                line = line.replace('{BRAND_ID}', row.brand_id);

                line = line.replace('{INCART}', row.isInCart ? 'js-in-cart' : '');
                let params = '';

                const names = Object.keys(res.data.params);
                names.forEach((paramName) => {
                  const paramDBName = res.data.params[paramName];

                  if (row[paramDBName] !== null && row[paramDBName] !== '') {
                    params += '<tr><td>' + pll(paramName) + '</td><td>' + pll(row[paramDBName]) + ' ' + pll(dimensions[paramName]) + '</td></tr>';
                  }
                });

                line = line.replace('{PARAMS}', params);
                $('.catalog-details__cards').insertAdjacentHTML('beforeEnd', line);
              });

              (() => {
                const cards = document.querySelectorAll('.product-card');

                if (cards.length >= res.data.total) {
                  more.classList.add('hide');
                }
              })();

              [...$$('[data-brand-id="10"], [data-brand-id="2"], [data-brand-id="9"], [data-brand-id="8"], [data-brand-id="10"], [data-brand-id="11"], [data-brand-id="12"]')].forEach(
                  (numberRow) => numberRow.style.display = 'none'
              );

              [...$$('[data-brand-id="1"], [data-brand-id="3"], [data-brand-id="6"], [data-brand-id="7"]')].forEach(
                  (numberRow) => {
                    const card = numberRow.closest('.product-card');
                    const button = card.querySelector('.js-to-cart');
                    button.classList.remove('js-to-cart');
                    button.classList.remove('js-in-cart');
                    button.classList.add('js-analog-form');
                    button.innerText = pll('Find analog');
                  }
              );

              const modalAnalogElement = $('#modal-analog');
              if (modalAnalogElement) {
                new Modal(modalAnalogElement, {
                  trigger: $$('.js-analog-form')
                });
              }

              $('.pagination__page-links').outerHTML = buildPagination(res.data.page, res.data.total, res.data.limit);
              initPagination();
              initButtons();
            }
          } else {
            // Show error message from res.data.msg;
          }
        })
        .catch((err) => {
          loader.spinner.stop();
        });
  });
};

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 collectPrograms = () => {
  programToggles.forEach((item) => {
    if (item.checked) {
      programs.push(item.value);
    }
  });
}

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

  renderPrograms();
};

const brandsBlock = () => {
  let selectedPrograms = [];
  programToggles.forEach((item) => {
    if (item.checked) {
      selectedPrograms.push(item.value);
    }
  });

  brandToggles.forEach((item) => {
    debugger;
    if (item.dataset.rules) {
      const showRules = JSON.parse(item.dataset.rules);
      let show = selectedPrograms.length === 0;

      selectedPrograms.forEach((program) => {
        show |= showRules.indexOf(program) !== -1;
      });

      item.disabled = !show;
      item.closest('.filter-fieldset__item').classList.toggle('disabled', !show);
    }
  });
}

const programsBlock = () => {
  // TODO: refactor this, should take data from the backend
  const brands = ['', 'maxon', 'npoat', 'gysin', 'parvalux', 'micronel', 'elmo', 'harmonic', 'fulling-motor',
    'eds', 'leaderdrive', 'langyi', 'constar', 'intek', 'innodrive', 'kingkong'
  ];

  let selectedBrands = [];
  brandToggles.forEach((item) => {
    if (item.checked) {
      selectedBrands.push(item.value);
    }
  });

  programToggles.forEach((item) => {
    if (item.dataset.rules) {
      const showRules = JSON.parse(item.dataset.rules);
      let show = selectedBrands.length === 0;

      selectedBrands.forEach((brandId) => {
        show |= showRules.indexOf(brands[brandId]) !== -1;
      });

      item.disabled = !show;
      if (item.disabled) {
        item.checked = false;
        programs = programs.filter((program) => {
          return program !== item.value;
        });
      }
      item.closest('.filter-fieldset__item').classList.toggle('disabled', !show);
    }
  });
}

const filtersBlock = () => {
  let selectedPrograms = [];
  programToggles.forEach((item) => {
    if (item.checked) {
      selectedPrograms.push(item.value);
    }
  });

  let visibleCount = 0;

  filterItems.forEach((item) => {
    if (item.dataset.rules) {
      const showRules = JSON.parse(item.dataset.rules);
      let show = selectedPrograms.length !== 0;

      selectedPrograms.forEach((program) => {
        show &= showRules.indexOf(program) !== -1;
      });

      if (show) visibleCount++;

      item.disabled = !show;
      item.classList.toggle('disabled', !show);
      [...item.querySelectorAll('input')].forEach((input) => {
        input.disabled = !show;
      });
    }
  });

  if (visibleCount == 0) {
    $('.filter-fieldset--chars').style.display = 'none';
  } else {
    $('.filter-fieldset--chars').style.display = 'block';
  }
}

const renderPrograms = () => {
  // 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);
  });

  if (!isMobile()) {
    updateCounter();
  }
};

export const updateCounter = () => {
  const form = $('#search_catalog:not(.js-reseting)');

  if (!form) { return }
  setFiltersAmount();

  const formData = new FormData(form);
  const url = new URL(window.location);

  if (!loader) {
    loader = $('.spinner')
  }

  const utmSource = localStorage.getItem('utm_source');
  const utmMedium = localStorage.getItem('utm_medium');
  const utmTerm = localStorage.getItem('utm_term');
  const utmContent = localStorage.getItem('utm_content');
  const referer = url.host + url.pathname

  if(utmSource) {
    formData.append('utm_source', utmSource)
  }
  if(utmMedium) {
    formData.append('utm_medium', utmMedium)
  }
  if(utmTerm) {
    formData.append('utm_term', utmTerm)
  }
  if(utmContent) {
    formData.append('utm_content', utmContent)
  }
  formData.append('referer', referer);


  loader.spinner.run();

  axios
    .post(
      '/wp-json/catalog/count', formData, {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      }
    )
    .then(function (res) {
      loader.spinner.stop();

      if (res.data.success == 'ok') {
        let message = '';
        if (res.data.total > 0) {
          if (window.currentLanguage == 'en') {
            message = res.data.total + ' ' + plural_en(res.data.total, 'item', 'items') + ' found';
          } else {
            message = 'Выбрано ' + res.data.total + ' ' + plural_ru(res.data.total, 'вариант', 'варианта', 'вариантов');
          }

        } else {
          message = pll('Nothing found');
        }
        floatingCounter.querySelector('span').innerText = message;
        floatingCounter.classList.add('visible');
        floatingCounter.style.top = lastMouseActionPosition + 'px';


        let url = '/';

        floatingCounter.querySelector('.filter__submit-link').href = url + res.data.url;
      } else {
        // Nothing
      }
    })
    .catch((err) => {
      loader.spinner.stop();
    })
  ;
};

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

  if (programToggles) {
    programToggles.forEach((item) => {
      item.addEventListener('change', (ev) => {
        const currentValue = item.value;
        const state = item.checked;
        toggleProgram(currentValue, state, item.type == 'radio');
        brandsBlock();
        filtersBlock();
        updateCounter();
      });
    });
  }

  collectPrograms();

  if (brandToggles) {
    brandToggles.forEach((item) => {
      item.addEventListener('change', (ev) => {
        programsBlock();
        filtersBlock();
        updateCounter();
      });
    });
  }

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

      const rangeBox = item.parentElement.querySelector('.filter-fieldset__range-box');

      if (rangeBox && rangeBox.rangeSlider) {
        rangeBox.rangeSlider.reset();
      }

      brandsBlock();
      programsBlock();
      filtersBlock();
    });
  });

  filters.forEach((item) => {
    item.addEventListener('change', (ev) => {
      if (!isMobile()) {
        updateCounter();
      }
    });
  });

  if ($('#search_catalog')) {
    $('#search_catalog').addEventListener('mousemove', (ev) => {
      lastMouseActionPosition = ev.pageY - 282;
    });

    $('.pagination__control--next').addEventListener('click', (ev) => {
      ev.preventDefault();
      if ($('.pagination__control--next').classList.contains('disabled')) {
        return false;
      }

      page.value = parseInt(page.value) + 1;

      search();
    });

    $('.pagination__control--prev').addEventListener('click', (ev) => {
      ev.preventDefault();
      if ($('.pagination__control--prev').classList.contains('disabled')) {
        return false;
      }

      page.value = parseInt(page.value) - 1;

      search();
    });
  }
};

const updateAddToCartButtonRender = (id) => {
  if (!id) { return }

  [...$$('.js-to-cart[data-id]')]
    .find((button) => button.dataset.id === id)
    .classList.remove('js-in-cart');
};

export default () => {
  if ($('.catalog-details')) {
    initFilters();
    initPagination();
    initButtons();
    showMore();
  }

  $('body').addEventListener('click', (ev) => {
    const item = ev.target;

    if (!loader) {
      loader = $('.spinner')
    }

    if (item.classList && item.classList.contains('js-to-cart') && !item.classList.contains('js-in-cart')) {
      ev.preventDefault();
      const productId = item.dataset.id;
      const productCard = item.closest('.product-card');
      let quantity = 1;
      if (productCard) {
        quantity = productCard.querySelector('.card-buttons__quant input').value;
      } else {
        const productBlock = item.closest('.product');
        if (productBlock) {
          quantity = productBlock.querySelector('.card-buttons__quant input').value;
        } else {
          const productArticle = item.closest('.article-product');
          quantity = productArticle.querySelector('.card-buttons__quant input').value;
        }
      }
      toCart(productId, quantity, item);
    }

    if (item.classList && item.classList.contains('card-buttons__quant-hand')) {
      ev.preventDefault();
      ev.stopPropagation();

      const input = item.parentElement.querySelector('input');
      let value = parseInt(input.value);
      if (item.textContent === '+') {
        value++;
      } else {
        value--;
      }

      if (value <= 0) {
        value = 1;
      }

      input.value = '' + value;

      if (input.classList.contains('js-cart-quantity')) {
        loader.spinner.run();

        axios.post('/wp-json/cart/updateQuantity', qs.stringify({
            productId: input.dataset.id,
            quantity: value
          }), {
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            }
        })
        .then(function (res) {
          loader.spinner.stop();

          if (res.data.status == 'ok') {
            updateCartCounter(res.data.count);
          } else {
            // Nothing
          }
        })
        .catch((err) => {
          loader.spinner.stop();
        });
      }
    }

    if (item.classList && item.classList.contains('js-remove-from-cart')) {
      ev.preventDefault();
      ev.stopPropagation();

      const productId = item.dataset.id;

      loader.spinner.run();

      axios.post('/wp-json/cart/remove', qs.stringify({
          productId: productId,
        }), {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
      })
      .then(function (res) {
        loader.spinner.stop();

        if (res.data.status == 'ok') {
          $('.modal__order-item[data-id="' + productId + '"]').remove();
          updateCartCounter(res.data.count);
          updateFormState(res.data.count);
          updateAddToCartButtonRender(productId);
        } else {
          // Nothing
        }
      })
      .catch((err) => {
        loader.spinner.stop();
      });
    }
  });

  setFiltersAmount();
};