import { $, pll, isMobile } from '@utils';
import axios from 'axios';
import qs from 'qs';
import { disableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock';

let searchBar = $('.search__field');
let searchDropdown = $('.search__dropdown');
let searchResultsBlock = $('.search__results-group');
let searchLimits = $('.js-search-limit');

if (isMobile()) {
  searchBar = $('.search__field_mobile');
  searchDropdown = $('.search__dropdown_mobile');
  searchResultsBlock = $('.search__results-group_mobile');
  searchLimits = $('.js-search-limit_mobile');
}

let searchMobile = $('.search-mobile');

let CancelToken = axios.CancelToken;
let source = CancelToken.source();

const initSearchBar = () => {
  if(!searchBar) return false;

  searchBar.addEventListener('keyup', () => {
    const searchPhrase = searchBar.value;

    if (searchPhrase.length >= 2) {
      suggestions(searchPhrase);
    } else {
      searchDropdown.classList.remove('visible');
    }
  });

  if ($('#menu.menu') !== null) {
    $('#menu.menu').addEventListener('mouseover', () => {
      searchDropdown.classList.remove('visible');
      searchBar.blur();
    });
  }

  if (searchLimits) {
    searchLimits.addEventListener('change', () => {
      const searchPhrase = searchBar.value;
      const params = {
        word: searchPhrase,
        limit: searchLimits.value
      };
      window.location = window.location.pathname + '?' + qs.stringify(params);
    });
  }

  $('.search__field').addEventListener('focus', () => {
    const searchPhrase = searchBar.value;
    if (searchPhrase.length >= 0) {
      searchDropdown.classList.add('visible');
    }
    if (isMobile()) {
      disableBodyScroll(searchMobile);
      $('.search__field').blur();
      searchMobile.classList.toggle('open');
      searchBar.focus();
    }
  });

  if ($('.search-mobile__close')) {
    $('.search-mobile__close').addEventListener('click', function () {
      searchMobile.classList.toggle('open');
      clearAllBodyScrollLocks();
    });
  }

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

    if (!isMobile()) {
      if (!item) {
        searchDropdown.classList.remove('visible');
      }
    }
  });
};

const suggestions = (word) => {
  source.cancel('.');
  source = CancelToken.source();
  if (!searchDropdown.classList.contains('js-loading')) {
    searchDropdown.classList.add('js-loading');
  }
  axios
    .post(
      '/wp-json/search/suggestion', qs.stringify({
        'word': word,
        'lang': window.currentLanguage,
      }), {
        cancelToken: source.token
      })
    .then(function (res) {
      if (res.data.status === 'ok') {
        let html = '';
        const prefix = window.currentLanguage == 'ru' ? '' : '/' + window.currentLanguage;
        if (res.data.data.products.length > 0) {
          html += '<h3>' + pll('Products found');
          if (res.data.data.productsCount > 0) {
            html += ': ' + res.data.data.productsCount;
          }
          html += '</h3><ul>';
          res.data.data.products.forEach((item) => {
            html += '<li><a href="' + prefix + item.url + '?from=suggest">' + item.name + '</a></li>';
          });
          html += '</ul>';
        }

        if (res.data.data.categories.length > 0) {
          html += '<h3>' + pll('Categories found');
          if (res.data.data.categoriesCount > 0) {
            html += ': '+ res.data.data.categoriesCount;
          }
          html += '</h3><ul>';
          res.data.data.categories.forEach((item) => {
            html += '<li><a href="' + prefix + item.url + '?from=suggest">' + item.name + '</a></li>';
          });
          html += '</ul>';
        }

        searchResultsBlock.innerHTML = html;
        searchDropdown.classList.remove('js-loading');

        if (((res.data.data.categories.length + res.data.data.products.length) > 0) && !searchDropdown.classList.contains('visible')) {
          searchDropdown.classList.add('visible');
        }
      }
      if (searchResultsBlock.children.length > 0 && !isMobile()) {
        // searchDropdown.style.height = 'calc(100vh - 87px)';
        searchDropdown.style.outline = '1px solid #078ebe';
      }
    })
    .catch(function (thrown) {
      if (axios.isCancel(thrown)) {
        // searchDropdown.classList.remove('js-loading');
      }
    });
};

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