// From: https://24ways.org/2019/making-a-better-custom-select-element/
// Author: @Julie Grundy
// Github: https://github.com/stringyland/custom-select

const customSelect = function(element, overrides) {
  const defaults = {
    inputSelector: "input",
    listSelector: "ul",
    optionSelector: "li",
    statusSelector: '[aria-live="polite"]'
  };

  const options = Object.assign({}, defaults, overrides);

  const csSelector = document.querySelector(element); // the input, svg and ul as a group
  const csInput = csSelector.querySelector(options.inputSelector);
  const csList = csSelector.querySelector(options.listSelector);
  const csOptions = csList.querySelectorAll(options.optionSelector);
  const csStatus = document.querySelector(options.statusSelector);
  const aOptions = Array.from(csOptions);

  let csState = "initial";

  csSelector.addEventListener("click", function(e) {
    const currentFocus = findFocus();
    switch (csState) {
      case "initial":
        toggleList("Open");
        setState("opened");
        break;
      case "opened":
        if (currentFocus === csInput) {
          toggleList("Shut");
          setState("initial");
        } else if (currentFocus.tagName === "LI") {
          makeChoice(currentFocus);
          toggleList("Shut");
          setState("closed");
        }
        break;
      case "filtered":
        if (currentFocus.tagName === "LI") {
          makeChoice(currentFocus);
          toggleList("Shut");
          setState("closed");
        }

        break;
      case "closed":
        toggleList("Open");
        setState("filtered");
        break;
    }
  });

  csSelector.addEventListener("keyup", function(e) {
    doKeyAction(e.key);
  });

  document.addEventListener("click", function(e) {
    if (!e.target.closest(element)) {
      toggleList("Shut");
      setState("initial");
    }
  });

  function toggleList(whichWay) {
    if (whichWay === "Open") {
      csList.classList.remove("hidden-all");
      csSelector.setAttribute("aria-expanded", "true");
    } else {
      csList.classList.add("hidden-all");
      csSelector.setAttribute("aria-expanded", "false");
    }
  }

  function findFocus() {
    const focusPoint = document.activeElement;
    return focusPoint;
  }

  function moveFocus(fromHere, toThere) {
    const aCurrentOptions = aOptions.filter(function(option) {
      if (option.style.display === "") {
        return true;
      }
    });
    if (aCurrentOptions.length === 0) {
      return;
    }
    if (toThere === "input") {
      csInput.focus();
    }
    switch (fromHere) {
      case csInput:
        if (toThere === "forward") {
          aCurrentOptions[0].focus();
        } else if (toThere === "back") {
          aCurrentOptions[aCurrentOptions.length - 1].focus();
        }
        break;
      case csOptions[0]:
        if (toThere === "forward") {
          aCurrentOptions[1].focus();
        } else if (toThere === "back") {
          csInput.focus();
        }
        break;
      case csOptions[csOptions.length - 1]:
        if (toThere === "forward") {
          aCurrentOptions[0].focus();
        } else if (toThere === "back") {
          aCurrentOptions[aCurrentOptions.length - 2].focus();
        }
        break;
      default:
        const currentItem = findFocus();
        const whichOne = aCurrentOptions.indexOf(currentItem);
        if (toThere === "forward") {
          const nextOne = aCurrentOptions[whichOne + 1];
          nextOne.focus();
        } else if (toThere === "back" && whichOne > 0) {
          const previousOne = aCurrentOptions[whichOne - 1];
          previousOne.focus();
        } else {
          csInput.focus();
        }
        break;
    }
  }

  function doFilter() {
    const terms = csInput.value;
    const aFilteredOptions = aOptions.filter(function(option) {
      if (option.innerText.toUpperCase().startsWith(terms.toUpperCase())) {
        return true;
      }
    });
    csOptions.forEach(option => (option.style.display = "none"));
    aFilteredOptions.forEach(function(option) {
      option.style.display = "";
    });
    setState("filtered");
    updateStatus(aFilteredOptions.length);
  }

  function updateStatus(howMany) {
    csStatus.textContent = howMany + " options available.";
  }

  function makeChoice(whichOption) {
    csInput.value = whichOption.textContent;
    moveFocus(document.activeElement, "input");
  }

  function setState(newState) {
    switch (newState) {
      case "initial":
        csState = "initial";
        break;
      case "opened":
        csState = "opened";
        break;
      case "filtered":
        csState = "filtered";
        break;
      case "closed":
        csState = "closed";
    }
  }

  function doKeyAction(whichKey) {
    const currentFocus = findFocus();
    switch (whichKey) {
      case "Enter":
        if (csState === "initial") {
          toggleList("Open");
          setState("opened");
        } else if (csState === "opened" && currentFocus.tagName === "LI") {
          makeChoice(currentFocus);
          toggleList("Shut");
          setState("closed");
        } else if (csState === "opened" && currentFocus === csInput) {
          toggleList("Shut");
          setState("closed");
        } else if (csState === "filtered" && currentFocus.tagName === "LI") {
          makeChoice(currentFocus);
          toggleList("Shut");
          setState("closed");
        } else if (csState === "filtered" && currentFocus === csInput) {
          toggleList("Open");
          setState("opened");
        } else {
          toggleList("Open");
          setState("filtered");
        }
        break;

      case "Escape":
        if (csState === "opened" || csState === "filtered") {
          toggleList("Shut");
          setState("initial");
        }
        break;

      case "ArrowDown":
        if (csState === "initial" || csState === "closed") {
          toggleList("Open");
          moveFocus(csInput, "forward");
          setState("opened");
        } else {
          toggleList("Open");
          moveFocus(currentFocus, "forward");
        }
        break;
      case "ArrowUp":
        if (csState === "initial" || csState === "closed") {
          toggleList("Open");
          moveFocus(csInput, "back");
          setState("opened");
        } else {
          moveFocus(currentFocus, "back");
        }
        break;
      default:
        if (csState === "initial") {
          toggleList("Open");
          doFilter();
          setState("filtered");
        } else if (csState === "opened") {
          doFilter();
          setState("filtered");
        } else if (csState === "closed") {
          doFilter();
          setState("filtered");
        } else {
          doFilter();
        }
        break;
    }
  }
};

customSelect("#js__custom__select", {
  statusSelector: "#custom-select-status"
});