// ==UserScript==
// @name Hacker News Tweaks
// @version 0.0.4
// @downloadURL https://gist.githubusercontent.com/evanreichard/96d89512cbfe23e5d7a81479c482e6da/raw/hn-tweaks.user.js
// @match *://news.ycombinator.com/*
// @grant GM.addStyle
// @grant GM.registerMenuCommand
// @grant GM.unregisterMenuCommand
// @grant GM_getValue
// @grant GM.setValue
// @noframes
// @run-at document-idle
// ==/UserScript==

/**
 * This is a hacked together UserScript to add comment collapsing like old reddit.
 * It also adds the following CSS tweak: https://news.ycombinator.com/item?id=29494475
 **/

let activeStyleElement;

async function toggleStyle() {
  let isEnabled = GM_getValue("enabled", true);
  if (isEnabled === true) {
    GM.unregisterMenuCommand("Disable Style");
    GM.registerMenuCommand("Enable Style", toggleStyle);
    activeStyleElement?.remove();
  } else {
    GM.unregisterMenuCommand("Enable Style");
    GM.registerMenuCommand("Disable Style", toggleStyle);
    applyStyle();
  }
  await GM.setValue("enabled", !isEnabled);
}

function applyStyle() {
  activeStyleElement = GM.addStyle(`.comhead {
    font-size: 12pt;
    line-height: 20pt;
  }
  @media (prefers-color-scheme: dark) { body { background-color: #1F2430; }
  #hnmain { background-color: #232834; }

  a:link.storylink,
  #hnmain > tbody > tr:first-child > td a,
  .commtext, .commtext a:link,
  td {
    color: #fafafa;
  }

  #hnmain > tbody > tr:first-child > td { background-color: #333a4a; }

  a:link,
  .sitebit, .subtext, .sitestr, .subtext a:link,
  .rank, a.morelink,
  .pagetop, .yclinks a,
  .comhead a:link, .comhead,
  .hnmore a:link, .reply a:link {
    color: #8c96ac;
  }

  a:visited {
    color: #979cf4;
  }

  .votearrow {
    overflow: visible;
    position: relative;
  }

  .votearrow::before {
    content: "";
    width: 0;
    height: 0;
    left: 1px;
    top: 3px;
    display: block;
    position: absolute;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 7px solid #bebfd1;
  }

  input[type=text],
  textarea {
    background-color: #333a4a;
    color: #fafafa;
    border: 1px solid #1F2430;
  }
}`);
}

function findParent(el, index) {
  let previousSibling = el.previousElementSibling;
  let foundElem = previousSibling.querySelector(`[indent="${index}"]`);
  return foundElem
    ? foundElem.closest(".athing")
    : findParent(previousSibling, index);
}

let isEnabled = GM_getValue("enabled", true);
if (isEnabled === true) {
  GM.registerMenuCommand("Disable Style", toggleStyle);
  applyStyle();
} else {
  GM.registerMenuCommand("Enable Style", toggleStyle);
}

Array.from(document.querySelectorAll(".ind")).forEach((indent) => {
  let imgEl = indent.querySelector("img");
  if (!imgEl) return;
  let colWidth = imgEl.offsetWidth;

  indent.style.position = "relative";
  let indCount = parseInt(indent.getAttribute("indent"));

  let voteOffset =
    indent.nextElementSibling.querySelector("center").offsetHeight;

  for (let i = 0; i <= indCount; i += 1) {
    let marginLeft = i === 0 ? "10px" : (colWidth / indCount) * i + 10 + "px";
    let topOffset = i === indCount ? voteOffset + 15 : -10;
    let newElem = document.createElement("div");
    newElem.setAttribute(
      "style",
      `cursor: pointer; height: calc(100% - ${topOffset + 2}px); width: 0px; position: absolute; margin-left: ${marginLeft}; top: ${topOffset}px; border-left: 2px solid green; padding: 0px min(${colWidth / 2}px, 5px);`,
    );
    newElem.onclick = () => {
      let commentBlock = newElem.closest(".athing");
      if (i === indCount) {
        commentBlock.querySelector(".togg.clicky").click();
      } else {
        let parentComment = findParent(commentBlock, i);
        parentComment.querySelector(".togg.clicky").click();
      }
    };
    indent.appendChild(newElem);
  }
});