const searchFilterWrapper = document.querySelector('.header__search-container');
const keys = ['ArrowUp', 'ArrowDown', 'Enter'];
const searchWrapper = document.querySelector('.search__wrapper');
const searchInput = document.querySelector('.search__input');
let itemsArr = [];
let currItem;
const links = [
  { label: "Home", url: "#a" },
  { label: "About", url: "#b" },
  { label: "Contact", url: "#c" },
  { label: "Old Thing", url: "#d" },
  { label: "New Thing", url: "#e" },
  { label: "New Thing Ultra", url: "#f" },
  { label: "New Thing Ultra Pro", url: "#g" },
  { label: "New Thing Ultra Pro Max", url: "#h" },
  { label: "New Thing Ultra Pro Max Plus", url: "#i" },
  { label: "Shipping", url: "#j" },
  { label: "Privacy", url: "#k" },
  { label: "Cookies", url: "#l" },
  { label: "Accessibility? LOL", url: "#m" }
];

searchFilterWrapper.querySelector('#sFilterLbl').textContent = 'Search and filter navigation links, suggestions below';
searchFilterWrapper.insertAdjacentHTML('beforeend', `<div class="search__panel-container" role="dialog" aria-labelledby="sFilter"><ul class="search__panel" id="lBox"></ul>
    <span aria-live="polite" class="search__message visually-hidden"></span></div>`);

links.forEach((link, idx) => {
  itemsArr += `
      <li class="search__item" data-pos="${idx + 1}">
        <a class="search__option" id="opt-${idx + 1}" tabindex="-1" href="${link.url}">${link.label}</a>
      </li>`;
})

const listbox = document.querySelector('#lBox');
const message = searchFilterWrapper.querySelector('.search__message');
listbox.insertAdjacentHTML('beforeend', itemsArr);
itemsArr = Array.from(listbox.querySelectorAll('.search__item'));

searchInput.setAttribute('role', 'combobox');
searchInput.setAttribute('aria-activedescendant', '');
searchInput.setAttribute('aria-autocomplete', 'list');
searchInput.setAttribute('aria-expanded', 'false');
searchInput.setAttribute('aria-controls', 'lBox');

searchInput.addEventListener('focus', (evt) => {
  searchInput.setAttribute('aria-expanded', 'true');
  searchWrapper.setAttribute('data-expanded', 'true');
})

searchInput.addEventListener('blur', (evt) => {
  searchInput.setAttribute('aria-expanded', 'false');
  searchWrapper.setAttribute('data-expanded', 'false');
})

const filterItems = () => {
  itemsArr.forEach((item, idx) => {
    if (item.textContent.toLowerCase().includes(searchInput.value.toLowerCase())) {
      listbox.appendChild(item);
    } else {
      item.firstElementChild.removeAttribute('data-selected');
      item.remove();
    }
  })

  listbox.querySelectorAll('.search__item').forEach((item, idx) => {
    item.setAttribute('data-pos', `${idx + 1}`)
  })
}

searchInput.addEventListener('keydown', (evt) => {
  if (keys.includes(evt.key) && itemsArr.length) {
    evt.preventDefault();

    if (!currItem && evt.key === 'ArrowDown') {
      setSelected(listbox.querySelector('[data-pos="1"]'));
    } else if (currItem && evt.key === 'ArrowDown' && currItem.nextElementSibling) {
      setSelected(currItem.nextElementSibling);
    }

    if (currItem && evt.key === 'ArrowUp' && currItem.previousElementSibling) {
      setSelected(currItem.previousElementSibling);
    }

    if (evt.key === 'Enter') {
      listbox.querySelectorAll('.search__option').forEach(item => {
        if (searchInput.value.toLowerCase() === item.textContent.toLowerCase() || item.hasAttribute('data-selected')) {
          item.click();
        }
      })
    }
  }
})

searchInput.addEventListener('input', (evt) => {
  filterItems();
  if (listbox.querySelectorAll('.search__item').length === 0) {
    searchInput.setAttribute('aria-activedescendant', '');
    currItem = '';
    displayError();
  } else {
    message.textContent = '';
    message.classList.add('visually-hidden');
  }

  if (currItem) {
    if (listbox.querySelectorAll('.search__item').length === 1 ||
        (listbox.querySelectorAll('.search__item').length > 1 && !listbox.querySelector(`${currItem.firstElementChild.id}`))) {
      setSelected(listbox.querySelector('[data-pos="1"]'));
    }
  }
})

const setSelected = (item) => {
  listbox.querySelectorAll('.search__item').forEach(listItem => {
    if (listItem === item) {
      item.firstElementChild.setAttribute('data-selected', 'true');
      searchInput.setAttribute('aria-activedescendant', item.firstElementChild.id);
      currItem = item;
      item.scrollIntoView({ block: "nearest", inline: "nearest" });
    } else {
      listItem.firstElementChild.removeAttribute('data-selected')
    }

    if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1) {
      message.textContent = '';
      message.textContent = `${item.textContent}, ${item.getAttribute('data-pos')} of ${listbox.querySelectorAll('li').length}`;
      message.classList.add('visually-hidden');
    }
  })
}

function displayError() {
  message.textContent = 'No matching results';
  message.classList.remove('visually-hidden');
}