// ==UserScript==
// @name        Notion.so - Hide The Crap
// @name:en     Notion.so - Hide The Crap
// @description Show/Hide the properties section in Notion pages
// @namespace   https://github.com/smartnora
// @match       https://www.notion.so/*
// @run-at      document-start
// @version     0.0.1
// @grant       GM.setValue
// @grant       GM.getValue
// @downloadURL none
// ==/UserScript==
/* jshint esversion: 6 */

// Edit these to change the text
const HIDE_TEXT = "🧹 Hide The Crap";
const SHOW_TEXT = "💩 Show The Crap";
////////////////////////////////////

// Code below
GM.getValue("hidecrap", false).then((val) => {
  window.hidden_crap = val;
})

function set_crap(hide) {
  if (hide) {
    getCommentBlock().previousElementSibling.style.display='none';
    newButton.innerText = SHOW_TEXT;
  } else {
    getCommentBlock().previousElementSibling.style.display='inherit';
    newButton.innerText = HIDE_TEXT;
  }
  GM.setValue("hidecrap", hide);
}
  
  
function toggle_crap() {
  window.hidden_crap = !window.hidden_crap;
  set_crap(window.hidden_crap);
}

function getCommentBlock() {
  let comments = document.querySelector('[placeholder^="Add a comment"]');
  if (comments == null) {
    return null;
  }
  return comments.parentElement.parentElement.parentElement.parentElement;
}

// TODO: Make this continuously look for new divs
function button_setup() {
  if (getCommentBlock() == null) {
    window.requestAnimationFrame(button_setup);
  } else {
    newButton = document.createElement("div");
    newButton.innerText = HIDE_TEXT;
    newButton.style="float:left; cursor: pointer; display: inline-flex;font-size: 14px; color: rgba(55, 53, 47, 0.4); margin: 10px";
    newButton.addEventListener('click', toggle_crap);
    getCommentBlock().previousElementSibling.insertAdjacentElement('beforebegin', newButton);
    set_crap(window.hidden_crap);
  }
}
button_setup();