/* eslint-disable */

import { $, splitListIntoColumns } from '@utils';
import Modal from './modal';
import axios from 'axios';

export default () => {
  const modalElement = $('#modal-city');

  if (!modalElement) { return }

  const citiesModal = document.getElementById('modal-city');
  const modalTriggers = document.querySelectorAll('.location > *');

  const spinner = $('.spinner').spinner;

  const CityModal = new Modal(modalElement, {
    trigger: modalTriggers,
    onClose: () => {
      if (citySearch) {
        citySearch.value = '';
      }
      cities.forEach((city) => {
        city.closest('li').classList.remove('hidden');
        citiesListContainer.classList.remove(Classes.NO_MATCH);
      });
    }
  });

  const Classes = {
    SHOWN: 'js-shown',
    LINK_ACTIVE: 'js-current',
    NO_MATCH: 'js-no-match'
  };

  const Selectors = {
    MODAL: '.modal__cities',
    CLOSE_BUTTON: '.modal__close',
    DISPLAY_CITY: '.js-current'
  };

  if (!citiesModal || !modalTriggers.length) { return }

  const citiesListContainer = citiesModal.querySelector(Selectors.MODAL);
  const citiesList = citiesListContainer.querySelector('ul');
  const cities = [...citiesList.querySelectorAll('li a')];
  const closeButton = citiesModal.querySelector(Selectors.CLOSE_BUTTON);
  const citySearch = document.getElementById('modal-city-input');

  const columns = Math.ceil(citiesListContainer.offsetWidth / citiesList.offsetWidth);

  splitListIntoColumns(citiesListContainer, citiesList, columns);

  let cacheHeight = citiesListContainer.offsetHeight;

  citiesListContainer.style.height = cacheHeight + 'px';

  let closeClickHandler = null;
  var current = cities.find((cities) => cities.classList.contains(Classes.LINK_ACTIVE));

  const onCityInput = (e) => {
    const value = e.currentTarget.value.toLowerCase();
    let isNoMatch = true;

    cities.forEach((city) => {
      if (!city.textContent.toLowerCase().match(new RegExp(`^${value}`))) {
        city.closest('li').classList.add('hidden');
      } else {
        city.closest('li').classList.remove('hidden');
        isNoMatch = false;
      }
    });

    if (isNoMatch) {
      citiesListContainer.classList.add(Classes.NO_MATCH);
    } else {
      citiesListContainer.classList.remove(Classes.NO_MATCH);
    }
  };

  const setUserCity = (city) => {
    if (current && current.dataset.city !== city) {
      let newCity = cities.find((cities) => cities.dataset.city == city);
      if (newCity) {
        current.classList.remove(Classes.LINK_ACTIVE);
        newCity.classList.add(Classes.LINK_ACTIVE);
        current = newCity;
      }
    }

    if (current) {
      $('.location__current  .js-current').textContent = current.textContent;
    }
    window.localStorage.setItem('city', city);

    const cityData = window.citiesData[city] ? window.citiesData[city] : window.citiesData['default'];
    $('.main-header__callback a').setAttribute('href', 'tel:' + cityData.phone);
    $('.main-header__callback a span').textContent = cityData.text;
  };

  const onCitySelect = (e) => {
    e.preventDefault();
    if (e.target.tagName && e.target.tagName.toLowerCase() === 'a') {
      setUserCity(e.target.dataset.city);
      CityModal.close();

      if (closeClickHandler) {
        closeButton.removeEventListener('click', closeClickHandler);
        closeClickHandler = null;
      }
    }
  };

  citiesListContainer.addEventListener('click', onCitySelect);
  if (citySearch) citySearch.addEventListener('input', onCityInput);

  let userCity = window.localStorage.getItem('city');
  if (userCity == null) {
    spinner.run();

    axios
      .get(
        '/wp-json/geoip/get_city', {}, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }
      )
      .then(function (res) {
        spinner.stop();

        if (res.data.status == 'ok') {
          setUserCity(res.data.city);
        }
      })
      .catch((err) => {
        spinner.stop();
      });
  } else {
    setUserCity(userCity);
  }
};