// ==UserScript==
// @name         上班快乐知乎
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description 可隐藏知乎首页的图片和内容图片，极大程度被发现在划水。world!
// @author       You
// @match        https://www.zhihu.com/
// @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant        none
// @downloadURL none
// ==/UserScript==

;(function () {
  'use strict'

  const getBool = val => {
    if (val === null) return true
    if (val === 'true') return true
    if (val === 'false') return false
    return true
  }

  // 外层图片
  const localIfShowOuterImg = localStorage.getItem('ifShowOuterImg')
  var ifShowOuterImg = getBool(localIfShowOuterImg)

  // 内层富文本图片
  const localIfShowInnerImg = localStorage.getItem('ifShowInnerImg')
  var ifShowInnerImg = getBool(localIfShowInnerImg)

  /** --------------------- 添加图片控制事件 --------------------- */
  function handleImgBox(ele, ifShowOuterImg) {
    const imgParentLists = document.querySelectorAll(ele)
    imgParentLists.forEach(item => {
      item.style.display = ifShowOuterImg ? 'block' : 'none'
    })
  }

  // 外层
  var outerImg = status => handleImgBox('.RichContent-cover', status)
  var updateOuterImg = status => {
    ifShowOuterImg = status
    localStorage.setItem('ifShowOuterImg', status)
    outerImg(status)

    const btn = document.getElementById('outer-btn')
    btn.style.opacity = status ? 1 : 0.5
  }

  // 内层
  var innerImg = status => handleImgBox('.RichContent-inner img', status)
  var updateInnerImg = status => {
    ifShowInnerImg = status
    localStorage.setItem('ifShowInnerImg', status)
    innerImg(status)

    const btn = document.getElementById('inner-btn')
    btn.style.opacity = status ? 1 : 0.5
  }

  if (ifShowOuterImg === false) setTimeout(() => updateOuterImg(false))
  if (ifShowInnerImg === false) setTimeout(() => updateInnerImg(false))
  /** --------------------- 添加图片控制事件 --------------------- */

  /** --------------------- 页面新增按钮 --------------------- */
  function addEle({ tag, id, text, style, callback }) {
    var element = document.createElement(tag)
    element.id = id
    element.innerText = text
    element.style.cssText = style

    if (callback) {
      element.addEventListener('click', callback)
    }

    document.body.appendChild(element)
  }

  const listBtnStyle = `
          position: fixed;
          bottom: 16%;
          right: 15px;
          border-radius: 50px;
          // width: 80px;
          height: 35px;
          background: #056De8;
          color: #fff;
          padding: 0 10px;
        `

  const richTextBtnStyle = `
        position: fixed;
        bottom: 10%;
        right: 15px;
        border-radius: 50px;
        // width: 80px;
        height: 35px;
        background: #056De8;
        color: #fff;
        padding: 0 10px;
      `

  addEle({
    id: 'outer-btn',
    tag: 'button',
    text: '列表图片',
    style: listBtnStyle,
    callback: () => {
      updateOuterImg(!ifShowOuterImg)
    }
  })

  addEle({
    id: 'inner-btn',
    tag: 'button',
    text: '富文本图片',
    style: richTextBtnStyle,
    callback: () => {
      updateInnerImg(!ifShowInnerImg)
    }
  })
  /** --------------------- 页面新增按钮 --------------------- */

  // /** --------------------- 双击事件 --------------------- */
  function addListener(key, callback) {
    var keyPressCount = 0
    var keyPressTimeout

    document.addEventListener('keydown', function (event) {
      if (event.key.toLowerCase() === key.toLowerCase()) {
        keyPressCount++

        if (keyPressCount === 1) {
          keyPressTimeout = setTimeout(function () {
            keyPressCount = 0
          }, 300) // 设置延迟时间，可以根据需要调整
        } else if (keyPressCount === 2) {
          clearTimeout(keyPressTimeout)
          callback()
          keyPressCount = 0
        }
      }
    })
  }

  addListener('H', () => {
    updateOuterImg(!ifShowOuterImg)
  })

  addListener('G', () => {
    updateInnerImg(!ifShowInnerImg)
  })

  // /** --------------------- 双击事件 --------------------- */

  /** --------------------- 监听列表变化  --------------------- */
  // 目标元素的选择器
  var targetSelector = '.css-1fsnuue'

  // 创建一个 MutationObserver 实例
  var observer = new MutationObserver(function (mutationsList) {
    for (var mutation of mutationsList) {
      if (mutation.type === 'childList') {
        // 检查是否有新的子节点添加或移除
        var targetElement = mutation.target
        var childNodes = targetElement.querySelectorAll(':scope > *')
        var length = childNodes.length

        // 执行你的处理逻辑

        // 外层
        outerImg(ifShowOuterImg)

        // 内层
        innerImg(ifShowInnerImg)
      }
    }
  })

  // 配置 MutationObserver 监听的选项
  var observerOptions = {
    childList: true, // 监听子节点的变化
    subtree: true // 监听所有后代节点的变化
  }

  // 获取目标元素
  var targetElement = document.querySelector(targetSelector)

  if (targetElement) {
    // 开始监听目标元素的变化
    observer.observe(targetElement, observerOptions)
  } else {
    console.log('目标元素不存在！')
  }
  /** --------------------- 监听列表变化  --------------------- */
})()