const search = document.getElementById('landingSearch');
const searchDropdown = document.querySelector('.search-entry .search__dropdown');
const app = document.querySelector('.app');
const appHeader = document.querySelector('.header');
const searchEntry = document.querySelector('.search-entry');

const closeSearchDropdown = () => {
  searchDropdown.style.height = 0;
  searchDropdown.innerHTML = '';
}

// Search entry animation
let tl = anime.timeline({
  easing: 'linear'
});

const searchHandler = (e) => {
  if (e.type === 'click') {
    e.preventDefault();
    search.value = e.target.textContent;
    closeSearchDropdown();
  }
  
  if (e.keyCode === 13 || e.type === 'click') {
    e.preventDefault();
    search.blur();
    closeSearchDropdown();
    
    tl
    .add({
      targets: [
        document.querySelector('.search-entry__header').children,
        document.querySelector('.search-entry__content').children
      ],
      opacity: 0,
      duration: 500
    })
    .add({
      targets: '.search-entry__header',
      paddingTop: 0,
      paddingBottom: 0,
      opacity: 0,
      height: 0,
      duration: 500,
      offset: '-=500'
    })
    .add({
      targets: '.search-entry',
      top: 0,
      translateX: ['-50%', '-50%'],
      translateY: ['-50%', 0],
      duration: 1000,
      offset: '-=500'
    });
    
    setTimeout(() => {
      searchEntry.style.transition = 'all 0.3s';
      anime({
        targets: '.search-entry',
        padding: 0,
        easing: 'linear',
        duration: 500
      });
      anime({
        targets: '.search-entry',
        width: '100%',
        translateX: ['-50%', 0],
        translateY: [0, 0],
        left: 0,
        easing: 'linear',
        duration: 500,
        offset: '-=500'
      });
      
      document.getElementById('search').value = search.value;
      
      anime({
        targets: '.header',
        opacity: 1,
        delay: 500,
        complete: function(anim) {
          appHeader.style.pointerEvents = 'auto';
        }
      });
    }, 1100);
  }
};

search.addEventListener('keyup', searchHandler);

// Typeahead search functionality
const matches = [
  'Austin, TX',
  'Downtown, Austin, TX',
  'Austin, MN',
  'Lake Austin, TX',
  'Augusta, GA',
  'Auburn, AL',
  'Aurora, CO'
];

const typeaheadHandler = (e) => {
  const userInput = e.target.value.toLowerCase();
  
  if (userInput.length === 0) {
    closeSearchDropdown();
  }

  const filteredMatches = matches.filter((match) => match.toLowerCase().includes(userInput)).sort().splice(0, 5);
  searchDropdown.innerHTML = '';
  
  filteredMatches.forEach(item => {
    const searchResult = document.createElement('li');
    searchResult.textContent = item;
    searchDropdown.appendChild(searchResult);
    searchResult.addEventListener('click', searchHandler);
  });
  
  if (searchDropdown.children[0] === undefined) {
    return searchDropdown.style.height = 0;
  }

  let totalChildrenHeight = (searchDropdown.children[0].offsetHeight - 20) * filteredMatches.length + 40;
  searchDropdown.style.height = totalChildrenHeight + 'px';
};

search.addEventListener('input', typeaheadHandler);