Product search

const PRODUCTSEARCH = (function(window, undefined) {
  const SETTINGS = {
    debug: false,
    minLength: 3,
  };
  const SELECTORS = {
    wrapper: '.productsearch',
    input: '.productsearch__input',
    output: '.productsearch__output',
    reset: '.productsearch__reset',
    list: '.productsearch__list',
    detail: '.product-detail',
    detailImage: '.product-detail__image',
    detailTitle: '.product-detail__title',
    detailDescription: '.product-detail__description',
    productId: '.product-detail__id',
    state: '.productsearch__state',
  };
  const CLASSES = {
    wrapper: 'productsearch',
    empty: 'productsearch--empty',
    hasvalue: 'productsearch--hasvalue',
    selected: 'productsearch--selected',
    item: 'productsearch__item',
    hidden: 'hidden'
  };
  const STATES = {
    empty: 'empty',
    hasvalue: 'hasvalue',
    selected: 'selected',
    loading: 'loading',
    noresults: 'noresults',
    results: 'results',
  }

  function exit(e) {
    const wrappers = document.querySelectorAll(SELECTORS.wrapper);

    wrappers.forEach(empty);
  }

  function onProductClick(wrapper, product) {
    window.removeEventListener('click', exit);
    if (!wrapper) { return; }

    const detail = wrapper.querySelector(SELECTORS.detail);
    if (!detail) { return; }

    if (SETTINGS.debug) { console.log('PRODUCTSEARCH product', product) }

    const image = detail.querySelector(SELECTORS.detailImage);
    const title = detail.querySelector(SELECTORS.detailTitle);
    const description = detail.querySelector(SELECTORS.detailDescription);
    const productId = detail.querySelector(SELECTORS.productId);

    image.src = product.ImageUrl;
    image.alt = `${product.ModelNumber} - ${product.Description}`;

    title.innerHTML = product.ModelNumber;
    description.innerHTML = product.Description;
    productId.value = product.Id;

    wrapper.classList.add(CLASSES.selected);
    wrapper.classList.remove(CLASSES.empty);
    wrapper.classList.remove(CLASSES.hasvalue);

    const input = wrapper.querySelector(SELECTORS.input);
    input.value = product.ModelNumber;

    detail.classList.remove(CLASSES.hidden);
  }

  async function getData(api, value) {
    const response = await fetch(`${api}${value}`);
    const data = await response.json();
    return data;
  }

  async function getProducts(api, value) {
    const data = await getData(api,value);
    const products = data.filter(product => product.ModelNumber.toLowerCase().includes(value.toLowerCase()));
    return products;
  }

  async function populate(wrapper, value) {
    if (!wrapper) { return; };

    const api = wrapper.dataset.api;
    if (!api) { return; }

    const output = wrapper.querySelector(SELECTORS.output);
    if (!output) { return; }

    setState(wrapper, STATES.loading);

    const products = await getProducts(api, value);
    empty(wrapper);

    if (products.length <= 0) {
      setState(wrapper, STATES.noresults);
      return;
    }

    setState(wrapper, STATES.results);

    const list = wrapper.querySelector(SELECTORS.list);

    products.forEach(product => {
      const item = document.createElement('li');
      item.classList.add(CLASSES.item);
      item.dataset.id = product.Id;
      item.innerHTML = `
        <figure class="productsearch__itemvisual"><img src="${product.ImageUrl}" class="productsearch__image" alt="${product.ModelNumber} - ${product.Description}" /></figure>
        <div class="productsearch__itemmeta">
          <p class="productsearch__itemtitle">${product.ModelNumber}</p>
          <p class="productsearch__itemcolor">${product.Name}</p>
        </div>
      `;
      list.appendChild(item);

      item.addEventListener('click', function(e) {
        e.preventDefault();

        onProductClick(wrapper, product);
      }, { once: true });
    });

    wrapper.classList.remove(CLASSES.empty);
    wrapper.classList.add(CLASSES.hasvalue);
  }

  function empty(wrapper) {
    if (!wrapper) { return; }

    const list = wrapper.querySelector(SELECTORS.list);
    if (!list) { return; }

    if (SETTINGS.debug) { console.log('PRODUCTSEARCH empty', list) }
    list.innerHTML = '';

    setState(wrapper, STATES.empty);
  }

  function setState(wrapper, value) {
    if (!wrapper) { return; }

    Object.keys(STATES).forEach(state => {
      wrapper.classList.remove(`${CLASSES.wrapper}--${state}`)
    });

    if (SETTINGS.debug) { console.log('PRODUCTSEARCH state', value) }

    if (STATES[value]) {
      wrapper.classList.add(`${CLASSES.wrapper}--${STATES[value]}`);
    }
  }

  function onInput(e) {
    const input = e.target;

    const wrapper = input.closest(SELECTORS.wrapper);
    if (!wrapper) { return; }

    if (input.value.length < SETTINGS.minLength) { empty(wrapper); return; }

    window.removeEventListener('click', exit);
    window.addEventListener('click', exit);

    if (SETTINGS.debug) { console.log('PRODUCTSEARCH input', input.value) }

    clearTimeout(SETTINGS.timer);
    SETTINGS.timer = setTimeout(() => {
      populate(wrapper, input.value);
    }, 100);
  }

  function onReset(e) {
    e.preventDefault();

    const trigger = e.target;
    const wrapper = trigger.closest(SELECTORS.wrapper);

    if (!wrapper) { return; }

    empty(wrapper);
    wrapper.classList.add(CLASSES.empty);
    wrapper.classList.remove(CLASSES.hasvalue);
    wrapper.classList.remove(CLASSES.selected);

    const detail = wrapper.querySelector(SELECTORS.detail);
    if (detail) {
      detail.classList.add(CLASSES.hidden);
    }

    const input = wrapper.querySelector(SELECTORS.input);
    if (input) {
      input.value = '';
      input.focus();
    }

    const productId = wrapper.querySelector(SELECTORS.productId);
    if (productId) {
      productId.value = '';
    }
  }

  function init() {
    const inputs = document.querySelectorAll(SELECTORS.input);

    if (!inputs || inputs.length <= 0) { return; }

    if (SETTINGS.debug) { console.log('PRODUCTSEARCH init'); }

    inputs.forEach(input => input.addEventListener('input', onInput));

    SETTINGS.timer = null;

    const resets = document.querySelectorAll(SELECTORS.reset);
    if (!resets || resets.length <= 0) { return; }

    resets.forEach(reset => reset.addEventListener('click', onReset));
  }

  document.addEventListener('DOMContentLoaded', init);

  return {
    init,
  };
}(window));