function toggleFixedHeader() {
  var height;
  if ($('html').hasClass("open-menu") && ($(document).width() <= 1250)) {
    height = 1;
  } else {
    height = 40;
  }
  var header = $('.header-fixed');
  if ($(document).scrollTop() >= height) {
    header.addClass('shown');
  } else {
    header.removeClass('shown');
  }
}

function showFixedMenu() {
  if ($(document).width() > 768) {
    $('html').addClass('open-menu');
    $('.header.header-fixed .menu-button:not([onclick="showMobileMenu();"])')
      .removeClass('icon-Gambyrger-1')
      .addClass('icon-Gambyrger-2')
      .attr('onclick', 'hideFixedMenu();hideMobileMenu();');
    $('.header-fixed .fixed-menu').show();
    $('.fixed-menu .menu-items .item').first().trigger('click');

    $(document).on('click', hideMenuOnOutClick);
  }
}

function hideFixedMenu() {
  $('html').removeClass('open-menu');
  $('.header-fixed .fixed-menu').hide();
  $('.header.header-fixed .menu-button:not([onclick="showMobileMenu();"])')
    .removeClass('icon-Gambyrger-2')
    .addClass('icon-Gambyrger-1')
    .attr('onclick', 'showFixedMenu();showMobileMenu();');
  $('#container_1 .fixed-menu-wrapper').remove();

  $(document).off('click', hideMenuOnOutClick);
}

function hideMenuOnOutClick(event) {
  if (
    ($('.header-fixed .fixed-menu').find(event.target).length > 0 || $(event.target).hasClass('menu-button')) ||
    ($('.tablet-menu').find(event.target).length > 0 || $(event.target).parent().hasClass('mobile-menu-button'))
  ) {
    // click in header
  } else {
    hideFixedMenu();
    hideMobileMenu();
  }
}

function showMobileMenu() {
  $('html').addClass('open-menu');
  if ($(document).width() <= 768) {
    $('body').css({
      height: '100vh',
      'overflow-y': 'hidden'
    });
    $('#container_menu_mobile').css('transform', 'translate3d(0, 0, 0)');
  } else if ($(document).width() <= 1250) {
    $('.tablet-menu').show();
    $('.header-menu .mobile-menu-button i, .header-menu-hikes .mobile-menu-button i')
      .removeClass('icon-Gambyrger-1')
      .addClass('icon-Gambyrger-2')
      .attr('onclick', 'hideMobileMenu();hideFixedMenu();');
  }
}

function hideMobileMenu() {
  $('html').removeClass('open-menu');
  $('body').css({
    height: 'initial',
    'overflow-y': 'auto'
  });
  $('#container_menu_mobile').css('transform', 'translate3d(-100%, 0, 0)');
  $('.tablet-menu').hide();
  $('.header-menu .mobile-menu-button i, .header-menu-hikes .mobile-menu-button i')
    .removeClass('icon-Gambyrger-2')
    .addClass('icon-Gambyrger-1')
    .attr('onclick', 'showMobileMenu();showFixedMenu();');
}

function getSearchHints(query) {
  var deferred = $.Deferred();
  if (query.length >= 3) {
    $.post('/search/searchByPhrase/simple', {
      phrase: query
    }, (res) => {
      if (res.success) {
        deferred.resolve(res.hikeNames);
      }
    }, 'json');
  } else {
    deferred.resolve([]);
  }
  return deferred.promise();
}

function renderSearchHints(hints) {
  var form = $('.header .search-form');
  var input = $('.header .search-form .search-input');
  var hintList = $('.header .search-form .search-hints');
  hintList.empty();
  if (hints.length > 0) {
    hints.forEach((hikeName) => {
      var hintRow = $('<div>', {
        class: 'search-hints__hint'
      })
        .text(hikeName)
        .on('click', () => {
          input.val(hikeName);
          form.trigger('submit');
        });
      hintList.append(hintRow);
    });
    hintList.addClass('visible');
  } else {
    hintList.removeClass('visible');
  }
}

$(document).on('scroll', function () {
  //if ($(document).width() > 1250) {
  toggleFixedHeader();
  //}
});

$(document).ready(function () {
  $('.header .location').on('click', function () {
    $(this).toggleClass('active');
  });
  $('.header .location').hover(function () {
  }, function () {
    $(this).removeClass('active');
  });

  $('.fixed-menu .menu-items .item').on('click', function (event) {
    if (!$(event.currentTarget).hasClass('link')) {
      $('.fixed-menu .menu-content .content.active').removeClass('active');
      $('.fixed-menu .menu-content .content[data-code=' + $(event.currentTarget).data('code') + ']').addClass('active');
    }
  });

  $('#container_menu_mobile .dropdown-menu .label').on('click', function (event) {
    $(event.target).closest('.dropdown-menu').toggleClass('active');
  });
  $('#container_menu_mobile .dropdown-menu .sub-menu-label').on('click', function (event) {
    $(event.target).closest('.item.dropdown-menu').find('.sub-menu.active').removeClass('active');
    $(event.target).closest('.sub-menu').addClass('active');
  });

  $('.header .search-form .search-icon')
    .on('click', (event) => {
      var button = $(event.currentTarget);
      var form = button.closest('.search-form');
      if (!button.hasClass('locked')) {
        form.addClass('active');
        var input = form.find('.search-input');
        input
          .on('input', () => {
            getSearchHints(input.val())
              .done((hints) => {
                renderSearchHints(hints);
              });
          })
          .on('focusout', () => {
            button
              .addClass('locked');
            input.off();
            var timer = setTimeout(() => {
              form.removeClass('active');
              button.removeClass('locked');
              clearTimeout(timer);
            }, 200);
          })
          .trigger('focus');
      }
    });

  $('.search-row__input')
    .on('focusin', (event) => {
      var searchRow = $(event.target).closest('.search-row');
      var hintList = searchRow.find('.search-row__hint');
      if (hintList.length > 0) {
        searchRow.find('.search-row__hints').addClass('search-row__hints_visible');
      }
    })
    .on('focusout', (event) => {
      var searchRow = $(event.target).closest('.search-row');
      var timer = setTimeout(() => {
        searchRow.find('.search-row__hints').removeClass('search-row__hints_visible');
        clearTimeout(timer);
      }, 150);
    })
    .on('input', (event) => {
      var input = $(event.target);
      var searchRow = input.closest('.search-row');
      var hintList = searchRow.find('.search-row__hints');

      var value = event.target.value;
      if (value.length >= 3) {
        $.post('/search/searchByPhrase/simple', {
          phrase: value
        }, (res) => {
          var hints = res.hikeNames;
          hintList.empty();
          if (hints.length > 0) {
            hints.forEach((hint) => {
              hintList.append($('<div>', {
                class: 'search-row__hint'
              })
                .text(hint)
                .on('click', () => {
                  input.val(hint);
                  searchRow.find('.search-row__form').trigger('submit');
                }));
            });
            hintList.addClass('search-row__hints_visible');
          } else {
            hintList.removeClass('search-row__hints_visible');
          }
        }, 'json');
      } else {
        hintList
          .removeClass('search-row__hints_visible')
          .empty();
      }
    });
});