html {
  font-family: Roboto, Helvetica, Arial, sans-serif;
  font-size: 62.5%;
  font-weight: normal;
}

body {
  margin: 0;
}

header {
  padding: 1.2rem 2.4rem;
  background-color: #2196f3;
}

h1 {
  margin: 0;
  font-size: 4.8rem;
  font-weight: normal;
  color: white;
}

nav {
  padding: 8px 0;
  text-align: center;
  font-size: 16px;
  color: #fff;
  background-color: #000;
}

nav > a {
  color: #2196f3;
}

main {
  display: flex;
  flex-flow: row wrap;
  padding: 0 1.2rem;
}

button {
  margin: 0 12px;
}

#actions {
  flex: 3 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 1.2rem;
}

#actions > label {
  margin-right: 0.6rem;
}

#options {
  flex: 1 0 0;
  padding: 1.2rem;
  min-width: 20rem;
}

#options > label {
  width: 100%;
}

hr {
  margin: 0;
  border: none;
  width: 100%;
  height: 0;
}

mark {
  margin: -0.2rem;
  border: 0.2rem solid transparent;
  border-radius: 0.4rem;
  color: transparent;
  background: transparent;
}

#text {
  position: relative;
  flex: 3 0 0;
  padding: 0 1.2rem;
  transition: height 0.3s;
}

textarea,
#highlights {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: 0;
  border: solid 0.1rem rgba(0, 0, 0, 0.54);
  border-radius: 0.4rem;
  padding: 1.3rem;
  font-family: Roboto, Helvetica, Arial, sans-serif;
  font-size: 1.6rem;
  font-weight: normal;
  line-height: 2rem;
  outline: none;
  transition: height 0.3s;
}

textarea {
  box-sizing: border-box;
  width: calc(100% - 2.4rem);
  height: 100%;
  background: transparent;
  resize: none;
}

textarea:focus {
  border: solid 0.2rem #2196f3;
  padding: 1.2rem;
}

#highlights {
  z-index: -1;
  box-sizing: border-box;
  width: calc(100% - 2.4rem);
  white-space: pre-wrap;
  word-wrap: break-word;
  color: transparent;
  overflow-x: hidden;
  overflow-y: auto;
}

ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

#list {
  position: relative;
  flex: 1 0 0;
  padding: 0 1.2rem;
  min-width: 20rem;
  min-height: calc(100vh - 27.5rem);
  transition: height 0.3s;
}

.item {
  position: absolute;
  transition: top 0.3s, opacity 0.3s;
  animation: add 0.3s;
}

.item > label {
  cursor: pointer;
}

.hidden {
  display: none;
}

.count,
.word {
  display: inline-block;
  border: solid 0.2rem;
  box-shadow: inset 20rem 2rem transparent;
  transition: border 0.3s, background 0.3s, box-shadow 0.3s;
}

.hidden:checked ~ .count,
.hidden:checked ~ .word {
  box-shadow: inset 20rem 2rem white;
}

.count {
  border-radius: 50%;
  min-width: 1.8rem;
  text-align: center;
  font-size: 1.4rem;
  line-height: 1.8rem;
}

.word {
  padding: 0 0.2rem;
  border-radius: 0.4rem;
  font-size: 1.6rem;
}

.obsolete {
  opacity: 0;
}

footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.2rem;
  padding: 1.8rem 3.6rem;
  color: #555;
  background-color: #eee;
  font-size: 1.4rem;
}

footer > div:last-child {
  text-align: end;
}

a {
  color: black;
  text-decoration: none;
}

@keyframes add {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

#upgrade {
  --pure-material-primary-rgb: 16, 157, 45;
}

const isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
const isSafari = /Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor);

const copy = document.querySelector("#copy");
const clear = document.querySelector("#clear");
const spellcheck = document.querySelector("#spellcheck");
const textarea = document.querySelector("textarea");
const highlights = document.querySelector("#highlights");
const length = document.querySelector("#length");
const output = document.querySelector("output");
const list = document.querySelector("#list");
const template = document.querySelector("template");

let hiddens = [];
let duplicates = {};

// Text analysis
const count = (text, minLength) => {
  // https://mathiasbynens.be/notes/es-unicode-property-escapes#word
  const wordRegex = isChrome || isSafari
  ? new RegExp(`([\\p{Alphabetic}\\p{Mark}\\p{Decimal_Number}\\p{Connector_Punctuation}\\p{Join_Control}]+){${minLength},}`, 'gu')
  : new RegExp(`(\\w+){${minLength},}`, 'g');
  let result;
  const words = {};
  while ((result = wordRegex.exec(text)) !== null) {
    const word = result[0].toLowerCase();
    if (!words[word]) {
      words[word] = [];
    }
    words[word].push(result.index);
    words[word].push(result.index + word.length);
  }
  return words;
};

// Array manipulation
const duplicatePass = ([key, value]) => 2 < value.length;

const occurrenceComparator = ([keyA, valueA], [keyB, valueB]) =>
  valueB.length - valueA.length;

const numberComparator = (numberA, numberB) => numberA - numberB;

const differ = (object, [key, value], index) => {
  object[key] = {
    action: object[key] ? "KEEP" : "ADD",
    word: key,
    occurrences: value,
    index
  };
  return object;
};

const cleaner = (object, [word, details]) => {
  if (details.action) {
    delete details.action;
    object[word] = details;
  }
  return object;
};

const flattener = (array, details) => [...array, ...details.occurrences];

// DOM manipulation
const update = (item, details) => {
  item.style.zIndex = details.occurrences.length / 2;
  item.style.top = `${0.6 + details.index * 3}rem`;
  item.querySelector(".count").textContent = details.occurrences.length / 2;
};

const add = (word, details) => {
  const node = document.importNode(template.content, true);
  list.appendChild(node);
  const item = list.lastElementChild;
  item.id = `word-${word}`;
  const hidden = item.querySelector(".hidden");
  hidden.name = word;
  hidden.checked = hiddens.includes(word);
  hidden.addEventListener("change", handleToggle);
  item.querySelector(".word").textContent = word;
  update(item, details);
};

const keep = (word, details) => {
  const item = document.querySelector(`#word-${word}`);
  update(item, details);
};

const markObsolete = word => {
  document.querySelector(`#word-${word}`).classList.add("obsolete");
};

const remove = item => item.remove();

const removeObsolete = () => {
  document.querySelectorAll(".obsolete").forEach(remove);
};

const render = ([word, details]) => {
  if (details.action === "ADD") {
    add(word, details);
  } else if (details.action === "KEEP") {
    keep(word, details);
  } else {
    markObsolete(word);
  }
};

const getHue = word => {
  return (
    360 -
    360 / Object.keys(duplicates).length * duplicates[word.toLowerCase()].index
  );
};

const getHSL = word => {
  const hue = getHue(word);
  return `hsl(${hue + 20}, 100%, ${180 < hue && hue < 360 ? 80 : 50}%)`;
};

const colorize = word => {
  const color = getHSL(word);
  const count = document.querySelector(`#word-${word} .count`);
  const wordElement = document.querySelector(`#word-${word} .word`);
  count.style.borderColor = color;
  count.style.backgroundColor = color;
  wordElement.style.borderColor = color;
  wordElement.style.backgroundColor = color;
};

const highlight = (occurrence, index, occurrences) => {
  let node;
  if (index < occurrences.length - 1) {
    if (index % 2) {
      const word = textarea.value.substring(occurrence, occurrences[index + 1]);
      node = document.createElement("mark");
      node.textContent = word;
      if (!hiddens.includes(word.toLowerCase())) {
        const color = getHSL(word);
        node.style.background = color;
        node.style.border = `0.2rem solid ${color}`;
      }
    } else {
      const text = textarea.value.substring(occurrence, occurrences[index + 1]);
      node = document.createTextNode(text);
    }
  } else {
    const text = textarea.value.substring(occurrence);
    node = document.createTextNode(text + "\r\n\r\n");
  }
  highlights.appendChild(node);
};

const handleChange = () => {
  // Count words
  const words = count(textarea.value, length.value);

  // Diff word stats with previous
  const diff = Object.entries(words)
    .filter(duplicatePass)
    .sort(occurrenceComparator)
    .reduce(differ, duplicates);

  // Render items
  Object.entries(diff).forEach(render);

  // Clean obsolete from duplicates
  duplicates = Object.entries(diff).reduce(cleaner, {});

  // Adjust height of list
  list.style.height = `${1.2 + Object.keys(duplicates).length * 3}rem`;

  // Colorize items
  Object.keys(duplicates).forEach(colorize);

  // Flatten occurrences
  const occurrences = Object.values(duplicates)
    .reduce(flattener, [0])
    .sort(numberComparator);

  // Highlight
  while (highlights.firstChild) {
    highlights.removeChild(highlights.firstChild);
  }
  occurrences.forEach(highlight);

  // Remove
  window.setTimeout(removeObsolete, 400);
};

const handleToggle = event => {
  const word = event.target.name;
  if (event.target.checked) {
    if (!hiddens.includes(word)) {
      hiddens.push(word);
    }
  } else {
    const index = hiddens.indexOf(word);
    if (0 <= index) {
      hiddens.splice(index, 1);
    }
  }
  handleChange();
};

copy.addEventListener("click", () => {
  textarea.select();
  document.execCommand("copy");
});

clear.addEventListener("click", () => {
  textarea.value = "";
  textarea.focus();
  handleChange();
});

spellcheck.addEventListener("change", event => {
  textarea.setAttribute("spellcheck", event.target.checked.toString());
  const { value } = textarea;
  textarea.value = value + " ";
  textarea.value = value;
});

textarea.addEventListener("scroll", event => {
  highlights.scrollTop = event.target.scrollTop;
});

textarea.addEventListener(
  "focus",
  () => {
    textarea.value = "";
    handleChange();
  },
  {
    once: true
  }
);

textarea.addEventListener("input", handleChange);
length.addEventListener("input", handleChange);
length.addEventListener("input", () => (output.textContent = length.value));

handleChange();