"use strict";

window.Aiken = (function () {
  /* Global Object */
  const self = {};

  /* Public Properties */

  self.hashOffset = undefined;

  /* Public Methods */

  self.getProperty = function (property) {
    let value;
    try {
      value = localStorage.getItem(`Aiken.${property}`);
    } catch (_error) {}
    if (-1 < [null, undefined].indexOf(value)) {
      return aikenConfig[property].values[0].value;
    }
    return value;
  };

  self.icons = function () {
    return Array.from(arguments).reduce(
      (acc, name) =>
        `${acc}
        <svg class="icon icon-${name}"><use xlink:href="#icon-${name}"></use></svg>`,
      ""
    );
  };

  self.scrollToHash = function () {
    const locationHash = arguments[0] || window.location.hash;
    const query = locationHash ? locationHash : "body";
    const hashTop = document.querySelector(query).offsetTop;
    window.scrollTo(0, hashTop - self.hashOffset);
    return locationHash;
  };

  self.toggleSidebar = function () {
    const previousState = bodyClasses.contains("drawer-open")
      ? "open"
      : "closed";

    let state;
    if (0 < arguments.length) {
      state = false === arguments[0] ? "closed" : "open";
    } else {
      state = "open" === previousState ? "closed" : "open";
    }

    bodyClasses.remove(`drawer-${previousState}`);
    bodyClasses.add(`drawer-${state}`);

    if ("open" === state) {
      document.addEventListener("click", closeSidebar, false);
    }
  };

  /* Private Properties */

  const html = document.documentElement;
  const body = document.body;
  const bodyClasses = body.classList;
  const sidebar = document.querySelector(".sidebar");
  const sidebarToggles = document.querySelectorAll(".sidebar-toggle");
  const displayControls = document.createElement("div");

  displayControls.classList.add("display-controls");
  sidebar.appendChild(displayControls);

  /* Private Methods */

  const initProperty = function (property) {
    const config = aikenConfig[property];

    displayControls.insertAdjacentHTML(
      "beforeend",
      config.values.reduce(
        (acc, item, index) => {
          const tooltip = item.label
            ? `alt="${item.label}" title="${item.label}"`
            : "";
          let inner;
          if (item.icons) {
            inner = self.icons(...item.icons);
          } else if (item.label) {
            inner = item.label;
          } else {
            inner = "";
          }
          return `
            ${acc}
            <span class="label label-${index}" ${tooltip}>
              ${inner}
            </span>
          `;
        },
        `<button
          id="${property}-toggle"
          class="control control-${property} toggle toggle-0">
        `
      ) +
        `
        </button>
      `
    );

    setProperty(null, property, function () {
      return self.getProperty(property);
    });
  };

  const setProperty = function (_event, property) {
    const previousValue = self.getProperty(property);

    const update =
      2 < arguments.length ? arguments[2] : aikenConfig[property].update;
    const value = update();

    try {
      localStorage.setItem("Aiken." + property, value);
    } catch (_error) {}

    bodyClasses.remove(`${property}-${previousValue}`);
    bodyClasses.add(`${property}-${value}`);

    const isDefault = value === aikenConfig[property].values[0].value;
    const toggleClasses = document.querySelector(
      `#${property}-toggle`
    ).classList;
    toggleClasses.remove(`toggle-${isDefault ? 1 : 0}`);
    toggleClasses.add(`toggle-${isDefault ? 0 : 1}`);

    try {
      aikenConfig[property].callback(value);
    } catch (_error) {}

    return value;
  };

  const setHashOffset = function () {
    const el = document.createElement("div");
    el.style.cssText = `
      height: var(--hash-offset);
      pointer-events: none;
      position: absolute;
      visibility: hidden;
      width: 0;
      `;
    body.appendChild(el);
    self.hashOffset = parseInt(
      getComputedStyle(el).getPropertyValue("height") || "0"
    );
    body.removeChild(el);
  };

  const closeSidebar = function (event) {
    if (!event.target.closest(".sidebar-toggle")) {
      document.removeEventListener("click", closeSidebar, false);
      self.toggleSidebar(false);
    }
  };

  const addEvent = function (el, type, handler) {
    if (el.attachEvent) el.attachEvent("on" + type, handler);
    else el.addEventListener(type, handler);
  };

  const searchLoaded = function (index, docs) {
    const preview_words_after = 10;
    const preview_words_before = 5;
    const previews = 3;

    const searchInput = document.getElementById("search-input");
    const searchNavButton = document.getElementById("search-nav-button");
    const searchResults = document.getElementById("search-results");
    let currentInput;
    let currentSearchIndex = 0;

    function showSearch() {
      document.documentElement.classList.add("search-active");
    }

    searchNavButton.addEventListener("click", function (e) {
      e.stopPropagation();
      showSearch();
      setTimeout(function () {
        searchInput.focus();
      }, 0);
    });

    function hideSearch() {
      document.documentElement.classList.remove("search-active");
    }

    function update() {
      currentSearchIndex++;

      const input = searchInput.value;
      showSearch();
      if (input === currentInput) {
        return;
      }
      currentInput = input;
      searchResults.innerHTML = "";
      if (input === "") {
        return;
      }

      let results = index.query(function (query) {
        const tokens = lunr.tokenizer(input);
        query.term(tokens, {
          boost: 10,
        });
        query.term(tokens, {
          wildcard: lunr.Query.wildcard.TRAILING,
        });
      });

      if (results.length == 0 && input.length > 2) {
        const tokens = lunr.tokenizer(input).filter(function (token, i) {
          return token.str.length < 20;
        });
        if (tokens.length > 0) {
          results = index.query(function (query) {
            query.term(tokens, {
              editDistance: Math.round(Math.sqrt(input.length / 2 - 1)),
            });
          });
        }
      }

      if (results.length == 0) {
        const noResultsDiv = document.createElement("div");
        noResultsDiv.classList.add("search-no-result");
        noResultsDiv.innerText = "No results found";
        searchResults.appendChild(noResultsDiv);
      } else {
        const resultsList = document.createElement("ul");
        resultsList.classList.add("search-results-list");
        searchResults.appendChild(resultsList);

        addResults(resultsList, results, 0, 10, 100, currentSearchIndex);
      }

      function addResults(
        resultsList,
        results,
        start,
        batchSize,
        batchMillis,
        searchIndex
      ) {
        if (searchIndex != currentSearchIndex) {
          return;
        }
        for (let i = start; i < start + batchSize; i++) {
          if (i == results.length) {
            return;
          }
          addResult(resultsList, results[i]);
        }
        setTimeout(function () {
          addResults(
            resultsList,
            results,
            start + batchSize,
            batchSize,
            batchMillis,
            searchIndex
          );
        }, batchMillis);
      }

      function addResult(resultsList, result) {
        const doc = docs[result.ref];
        const resultsListItem = document.createElement("li");
        resultsListItem.classList.add("search-results-list-item");
        resultsList.appendChild(resultsListItem);
        const resultLink = document.createElement("a");
        resultLink.classList.add("search-result");
        resultLink.setAttribute("href", `${window.breadcrumbs}/${doc.url}`);
        resultsListItem.appendChild(resultLink);
        const resultTitle = document.createElement("div");
        resultTitle.classList.add("search-result-title");
        resultLink.appendChild(resultTitle);
        const resultDoc = document.createElement("div");
        resultDoc.classList.add("search-result-doc");
        resultDoc.innerHTML =
          '<svg viewBox="0 0 24 24" class="search-result-icon"><use xlink:href="#icon-svg-doc"></use></svg>';
        resultTitle.appendChild(resultDoc);
        const resultDocTitle = document.createElement("div");
        resultDocTitle.classList.add("search-result-doc-title");
        resultDocTitle.innerHTML = doc.doc;
        resultDoc.appendChild(resultDocTitle);
        let resultDocOrSection = resultDocTitle;
        if (doc.doc != doc.title) {
          resultDoc.classList.add("search-result-doc-parent");
          const resultSection = document.createElement("div");
          resultSection.classList.add("search-result-section");
          resultSection.innerHTML = doc.title;
          resultTitle.appendChild(resultSection);
          resultDocOrSection = resultSection;
        }
        const metadata = result.matchData.metadata;
        const titlePositions = [];
        const contentPositions = [];
        for (let j in metadata) {
          const meta = metadata[j];
          if (meta.title) {
            const positions = meta.title.position;
            for (let k in positions) {
              titlePositions.push(positions[k]);
            }
          }
          if (meta.content) {
            const positions = meta.content.position;
            for (let k in positions) {
              const position = positions[k];
              let previewStart = position[0];
              let previewEnd = position[0] + position[1];
              let ellipsesBefore = true;
              let ellipsesAfter = true;
              for (let k = 0; k < preview_words_before; k++) {
                const nextSpace = doc.content.lastIndexOf(
                  " ",
                  previewStart - 2
                );
                const nextDot = doc.content.lastIndexOf(". ", previewStart - 2);
                if (nextDot >= 0 && nextDot > nextSpace) {
                  previewStart = nextDot + 1;
                  ellipsesBefore = false;
                  break;
                }
                if (nextSpace < 0) {
                  previewStart = 0;
                  ellipsesBefore = false;
                  break;
                }
                previewStart = nextSpace + 1;
              }
              for (let k = 0; k < preview_words_after; k++) {
                const nextSpace = doc.content.indexOf(" ", previewEnd + 1);
                const nextDot = doc.content.indexOf(". ", previewEnd + 1);
                if (nextDot >= 0 && nextDot < nextSpace) {
                  previewEnd = nextDot;
                  ellipsesAfter = false;
                  break;
                }
                if (nextSpace < 0) {
                  previewEnd = doc.content.length;
                  ellipsesAfter = false;
                  break;
                }
                previewEnd = nextSpace;
              }
              contentPositions.push({
                highlight: position,
                previewStart: previewStart,
                previewEnd: previewEnd,
                ellipsesBefore: ellipsesBefore,
                ellipsesAfter: ellipsesAfter,
              });
            }
          }
        }
        if (titlePositions.length > 0) {
          titlePositions.sort(function (p1, p2) {
            return p1[0] - p2[0];
          });
          resultDocOrSection.innerHTML = "";
          addHighlightedText(
            resultDocOrSection,
            doc.title,
            0,
            doc.title.length,
            titlePositions
          );
        }
        if (contentPositions.length > 0) {
          contentPositions.sort(function (p1, p2) {
            return p1.highlight[0] - p2.highlight[0];
          });
          let contentPosition = contentPositions[0];
          let previewPosition = {
            highlight: [contentPosition.highlight],
            previewStart: contentPosition.previewStart,
            previewEnd: contentPosition.previewEnd,
            ellipsesBefore: contentPosition.ellipsesBefore,
            ellipsesAfter: contentPosition.ellipsesAfter,
          };
          const previewPositions = [previewPosition];
          for (let j = 1; j < contentPositions.length; j++) {
            contentPosition = contentPositions[j];
            if (previewPosition.previewEnd < contentPosition.previewStart) {
              previewPosition = {
                highlight: [contentPosition.highlight],
                previewStart: contentPosition.previewStart,
                previewEnd: contentPosition.previewEnd,
                ellipsesBefore: contentPosition.ellipsesBefore,
                ellipsesAfter: contentPosition.ellipsesAfter,
              };
              previewPositions.push(previewPosition);
            } else {
              previewPosition.highlight.push(contentPosition.highlight);
              previewPosition.previewEnd = contentPosition.previewEnd;
              previewPosition.ellipsesAfter = contentPosition.ellipsesAfter;
            }
          }
          const resultPreviews = document.createElement("div");
          resultPreviews.classList.add("search-result-previews");
          resultLink.appendChild(resultPreviews);
          const content = doc.content;
          for (
            let j = 0;
            j < Math.min(previewPositions.length, previews);
            j++
          ) {
            const position = previewPositions[j];
            const resultPreview = document.createElement("div");
            resultPreview.classList.add("search-result-preview");
            resultPreviews.appendChild(resultPreview);
            if (position.ellipsesBefore) {
              resultPreview.appendChild(document.createTextNode("... "));
            }
            addHighlightedText(
              resultPreview,
              content,
              position.previewStart,
              position.previewEnd,
              position.highlight
            );
            if (position.ellipsesAfter) {
              resultPreview.appendChild(document.createTextNode(" ..."));
            }
          }
        }
        const resultRelUrl = document.createElement("span");
        resultRelUrl.classList.add("search-result-rel-url");
        resultRelUrl.innerText = doc.url;
        resultTitle.appendChild(resultRelUrl);
      }

      function addHighlightedText(parent, text, start, end, positions) {
        let index = start;
        for (let i in positions) {
          const position = positions[i];
          const span = document.createElement("span");
          span.innerHTML = text.substring(index, position[0]);
          parent.appendChild(span);
          index = position[0] + position[1];
          const highlight = document.createElement("span");
          highlight.classList.add("search-result-highlight");
          highlight.innerHTML = text.substring(position[0], index);
          parent.appendChild(highlight);
        }
        const span = document.createElement("span");
        span.innerHTML = text.substring(index, end);
        parent.appendChild(span);
      }
    }

    addEvent(searchInput, "focus", function () {
      setTimeout(update, 0);
    });

    addEvent(searchInput, "keyup", function (e) {
      switch (e.keyCode) {
        case 27: // When esc key is pressed, hide the results and clear the field
          searchInput.value = "";
          break;
        case 38: // arrow up
        case 40: // arrow down
        case 13: // enter
          e.preventDefault();
          return;
      }
      update();
    });

    addEvent(searchInput, "keydown", function (e) {
      let active;
      switch (e.keyCode) {
        case 38: // arrow up
          e.preventDefault();
          active = document.querySelector(".search-result.active");
          if (active) {
            active.classList.remove("active");
            if (active.parentElement.previousSibling) {
              const previous =
                active.parentElement.previousSibling.querySelector(
                  ".search-result"
                );
              previous.classList.add("active");
            }
          }
          return;
        case 40: // arrow down
          e.preventDefault();
          active = document.querySelector(".search-result.active");
          if (active) {
            if (active.parentElement.nextSibling) {
              const next =
                active.parentElement.nextSibling.querySelector(
                  ".search-result"
                );
              active.classList.remove("active");
              next.classList.add("active");
            }
          } else {
            const next = document.querySelector(".search-result");
            if (next) {
              next.classList.add("active");
            }
          }
          return;
        case 13: // enter
          e.preventDefault();
          active = document.querySelector(".search-result.active");
          if (active) {
            active.click();
          } else {
            const first = document.querySelector(".search-result");
            if (first) {
              first.click();
            }
          }
          return;
      }
    });

    addEvent(document, "click", function (e) {
      if (e.target != searchInput) {
        hideSearch();
      }
    });
  };

  self.initSearch = function initSeach(docs) {
    // enable support for hyphenated search words
    lunr.tokenizer.separator = /[\s/]+/;

    const index = lunr(function () {
      this.ref("id");
      this.field("title", { boost: 200 });
      this.field("content", { boost: 2 });
      this.field("url");
      this.metadataWhitelist = ["position"];

      for (let [i, entry] of docs.entries()) {
        this.add({
          id: i,
          title: entry.title,
          content: entry.content,
          url: `${window.breadcrumbs}/${entry.url}`,
        });
      }
    });

    searchLoaded(index, docs);
  };

  const init = function () {
    for (let property in aikenConfig) {
      initProperty(property);
      const toggle = document.querySelector(`#${property}-toggle`);
      toggle.addEventListener("click", function (event) {
        setProperty(event, property);
      });
    }

    sidebarToggles.forEach(function (sidebarToggle) {
      sidebarToggle.addEventListener("click", function (event) {
        event.preventDefault();
        self.toggleSidebar();
      });
    });

    setHashOffset();
    window.addEventListener("load", function (_event) {
      self.scrollToHash();
    });
    window.addEventListener("hashchange", function (_event) {
      self.scrollToHash();
    });

    document
      .querySelectorAll(
        `
      .module-name > a,
      .member-name a[href^='#']
    `
      )
      .forEach(function (title) {
        title.innerHTML = title.innerHTML.replace(
          /([A-Z])|([_/])/g,
          "$2<wbr>$1"
        );
      });
  };

  /* Initialise */

  init();

  return self;
})();