// ==UserScript==
// @name         Syntax highlighting
// @namespace    https://floatsyi.com/
// @version      0.2.1
// @description  使用 highlight.js 给代码片断添加语法高亮, 并设置更优雅的字体
// @author       floatsyi
// @license      MIT
// @require      https://cdn.bootcss.com/highlight.js/9.15.10/highlight.min.js
// @require      https://cdn.bootcss.com/fontfaceobserver/2.1.0/fontfaceobserver.js
// @require      https://unpkg.com/vue@2.6.10/dist/vue.min.js
// @require      https://unpkg.com/buefy/dist/buefy.min.js
// @match        *://*/*
// @grant        GM_addStyle
// @grant        GM_deleteValue
// @grant        GM_setValue
// @grant        GM_getValue
// @grant        GM_listValues
// @grant        GM_addValueChangeListener
// @grant        unsafeWindow
// @grant        GM_registerMenuCommand
// @downloadURL none
// ==/UserScript==
//  https://www.bootcdn.cn/highlight.js/
// 当前版本号
// FIXME
const currentVersion = '0.2.0'
console.log('GM_listValues', GM_listValues())
//  环境探测
const envDetection = [
  unsafeWindow.Prism,
  unsafeWindow.hljs,
  unsafeWindow.prettyPrint
]
if (envDetection.some(item => !!item)) return false
//  thmem 和  font 列表
// https://highlightjs.org/static/demo/
// ;[...document.querySelectorAll('#styles > li')].map(item =>item.innerText.toLocaleLowerCase().replace(/\s/g, '-').replace(/(-)?(\d+)(-)?/g,'$2').replace(/(qtcreator)(-)(dark|light)/, '$1_$3').replace(/(kimbie)(-)(dark|light)/,'$1.$2'))
const themes = [
  'default',
  'a11y-dark',
  'a11y-light',
  'agate',
  'an-old-hope',
  'androidstudio',
  'arduino-light',
  'arta',
  'ascetic',
  'atelier-cave-dark',
  'atelier-cave-light',
  'atelier-dune-dark',
  'atelier-dune-light',
  'atelier-estuary-dark',
  'atelier-estuary-light',
  'atelier-forest-dark',
  'atelier-forest-light',
  'atelier-heath-dark',
  'atelier-heath-light',
  'atelier-lakeside-dark',
  'atelier-lakeside-light',
  'atelier-plateau-dark',
  'atelier-plateau-light',
  'atelier-savanna-dark',
  'atelier-savanna-light',
  'atelier-seaside-dark',
  'atelier-seaside-light',
  'atelier-sulphurpool-dark',
  'atelier-sulphurpool-light',
  'atom-one-dark-reasonable',
  'atom-one-dark',
  'atom-one-light',
  'brown-paper',
  'codepen-embed',
  'color-brewer',
  'darcula',
  'dark',
  'darkula',
  'docco',
  'dracula',
  'far',
  'foundation',
  'github-gist',
  'github',
  'gml',
  'googlecode',
  'grayscale',
  'gruvbox-dark',
  'gruvbox-light',
  'hopscotch',
  'hybrid',
  'idea',
  'ir-black',
  'isbl-editor-dark',
  'isbl-editor-light',
  'kimbie.dark',
  'kimbie.light',
  'lightfair',
  'magula',
  'mono-blue',
  'monokai-sublime',
  'monokai',
  'nord',
  'obsidian',
  'ocean',
  'paraiso-dark',
  'paraiso-light',
  'pojoaque',
  'purebasic',
  'qtcreator_dark',
  'qtcreator_light',
  'railscasts',
  'rainbow',
  'routeros',
  'school-book',
  'shades-of-purple',
  'solarized-dark',
  'solarized-light',
  'sunburst',
  'tomorrow-night-blue',
  'tomorrow-night-bright',
  'tomorrow-night-eighties',
  'tomorrow-night',
  'tomorrow',
  'vs',
  'vs2015',
  'xcode',
  'xt256',
  'zenburn'
]
// google Monospace fonts:  https://fonts.google.com/?sort=date&category=Monospace
// ;[...document.querySelectorAll('.fonts-module-title')].map(item => item.innerText)
const fonts = [
  'Fira Code',
  'B612 Mono',
  'Major Mono Display',
  'IBM Plex Mono',
  'Nanum Gothic Coding',
  'Overpass Mono',
  'Space Mono',
  'Roboto Mono',
  'Fira Mono',
  'Share Tech Mono',
  'Cutive Mono',
  'Source Code Pro'
]

const shouldClearCacheKeys = ['currentTheme', 'currentFont', 'bulmaStyle']

const hash = '662eb72f' // fnv132('Syntax_highlighting')
const hashString = str => `${str}-${hash}`
const getCacheValue = key => GM_getValue(hashString(key))
const setCacheValue = (key, value) => GM_setValue(hashString(key), value)
const deleteCacheValue = key => GM_deleteValue(hashString(key))
const hasCacheValue = key => !!GM_getValue(hashString(key))

// 默认字体与主题
const defaultTheme = 'atom-one-dark'
const defaultFont = 'Fira Code'

let currentTheme = getCacheValue('currentTheme') || defaultTheme
let currentFont = getCacheValue('currentFont') || defaultFont

// hashString
const hashVersion = hashString('version')

const clearCache = () => {
    for (const key of [...themes, ...fonts, ...shouldClearCacheKeys]) {
      deleteCacheValue(key)
    }
}

// 如果是新版本就清除缓存
GM_addValueChangeListener(hashVersion, function (
  name,
  old_value,
  new_value,
  remote
) {
  if (old_value !== new_value) {
    clearCache()
    // TODO 清除之前 0.1.2 版本的废弃缓存
    ;['Fira Code', 'atom-one-dark', 'bulmaStyle'].forEach(key => {GM_deleteValue(key)})
  }
})

// 保存当前版本号, 触发监听
GM_setValue(hashVersion, currentVersion)

const fontSize = getCacheValue('fontSize') || 16
const isApplyThemeChanges = getCacheValue('isApplyThemeChanges') || 'Yes'
const isApplyFontChanges = getCacheValue('isApplyFontChanges') || 'Yes'
const isGFW = getCacheValue('isGFW') || 'Fuck'
const isForcePreBackgroundColors =
  getCacheValue('isForcePreBackgroundColors') || 'Yes'

const getCurrentThemeBackgroundColor = styleText =>
  styleText.match(/background:(.*?)[;}]/)[1]

// 轮询
const poll = ({
  condition,
  resolve,
  reject = () => {},
  millisecond = 1000,
  retries = 1
}) => {
  if (condition()) return resolve()

  let time = 0
  const int = setInterval(() => {
    time++
    if (condition()) {
      clearInterval(int)
      return resolve()
    } else if (time > retries) {
      clearInterval(int)
      return reject()
    }
  }, millisecond)
  const stop = () => {
    clearInterval(int)
  }
  return stop
}

const fetchStyleText = url =>
  fetch(url, {
    headers: {
      'Content-Type': 'text/plain'
    }
  }).then(response => {
    return response.text()
  })

// 获取并设置样式
const setStyle = () => {
  // 获取主题样式并添加
  const themeStyle = getCacheValue(currentTheme)

  if (themeStyle) {
    GM_addStyle(themeStyle)
  } else {
    const themeUrl =
      this.GFW === 'Fuck'
        ? `https://cdn.bootcss.com/highlight.js/9.15.10/styles/${currentTheme}.min.css`
        : `https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/styles/${currentTheme}.min.css`
    fetchStyleText(themeUrl).then(style => {
      GM_addStyle(style)
      setCacheValue(currentTheme, style)
    })
  }

  // 获取字体样式并添加
  const fontStyle = getCacheValue(currentFont)
  if (fontStyle) {
    GM_addStyle(fontStyle)
  } else {
    const fontUrl = isGFW
      ? `https://fonts.loli.net/css?family=${currentFont}&display=swap`
      : `https://fonts.googleapis.com/css?family=${currentFont}&display=swap`

    fetchStyleText(fontUrl).then(style => {
      GM_addStyle(style)
      setCacheValue(currentFont, style)
    })
  }
}

//  为 code 片断应用 highlightBlock 并设置字体样式
const beautify = () => {
  setStyle()

  const font = new window.FontFaceObserver(currentFont)
  font.load().then(
    () => {
      console.log('Font is available')
      for (const pre of Array.from(document.querySelectorAll('pre'))) {
        const code = pre.querySelector('code')
        if (isApplyThemeChanges) {
          window.hljs.highlightBlock(code)
        }
        if (isApplyFontChanges === 'Yes') {
          code.style.fontFamily = currentFont
          code.style.fontSize = `${fontSize}px`
        }
        if (isForcePreBackgroundColors === 'Yes') {
          pre.style.backgroundColor = getCurrentThemeBackgroundColor(
            getCacheValue(currentTheme)
          )
        }
      }
    },
    () => {
      console.log('Font is not available')
    }
  )
}

// 设置页
let parasitifer = null
const openSetting = () => {
  // 非首次调用
  if (parasitifer) {
    parasitifer.show()
    return true
  }
  parasitifer = document.createElement('div')
  parasitifer.id = 'host-element'
  parasitifer.style = `position: fixed;top:0;bottom:0;z-index:9999;width:100vw;height:100vh;font-size:16px;background-color:#fff;`
  parasitifer.show = () => {
    parasitifer.style.display = 'block'
  }
  parasitifer.hide = () => {
    parasitifer.style.display = 'none'
  }
  const shadowRoot = parasitifer.attachShadow({ mode: 'open' })
  const shadowHTML = document.createElement('HTML')
  const shadowContent = document.createElement('body')
  const shadowStyleEle = document.createElement('style')
  const bulmaStyleEle = document.createElement('style')
  const fontStyleEle = document.createElement('style')
  const themeStyleEle = document.createElement('style')
  shadowContent.id = 'vue-root'
  shadowStyleEle.innerText = ``
  shadowHTML.appendChild(shadowStyleEle)
  shadowHTML.appendChild(bulmaStyleEle)
  shadowHTML.appendChild(fontStyleEle)
  shadowHTML.appendChild(themeStyleEle)
  shadowHTML.appendChild(shadowContent)
  shadowRoot.appendChild(shadowHTML)
  document.body.appendChild(parasitifer)

  const mount = style => {
    bulmaStyleEle.innerText = style

    const vueRoot = document
      .querySelector('#host-element')
      .shadowRoot.querySelector('#vue-root')

    const vueTemplate = `<body style="height: 100vh">
    <div id="app-vue" class="container">
        <div class="columns is-vcentered is-centered">
            <div class="column is-3">
                <section>
                    <b-field label="Themes">
                        <b-select placeholder="Select a name" @input="changeTheme" v-model="current.theme" rounded>
                            <option v-for="(item, index) in themes" :value="item" :key="index">
                                {{item}}
                            </option>
                        </b-select>
                    </b-field>
                    <b-field label="Monospace Fonts">
                        <b-select placeholder="Select a name" @input="changeFont" v-model="current.font" rounded>
                            <option v-for="(item, index) in fonts" :value="item" :key="index">
                                {{item}}
                            </option>
                        </b-select>
                    </b-field>
                    <b-field label="Font Size">
                        <b-slider v-model="fontSize" @input="changeFontSize"></b-slider>
                    </b-field>
                    <b-field label="Apply theme changes">
                        <b-switch v-model="isApplyThemeChanges" true-value="Yes" false-value="No">
                            {{ isApplyThemeChanges }}
                        </b-switch>
                    </b-field>
                    <b-field label="Apply font changes">
                        <b-switch v-model="isApplyFontChanges" true-value="Yes" false-value="No">
                            {{ isApplyFontChanges }}
                        </b-switch>
                    </b-field>
                    <b-field label="Force theme background colors">
                        <b-switch v-model="isForcePreBackgroundColors" true-value="Yes" false-value="No">
                            {{ isForcePreBackgroundColors }}
                        </b-switch>
                    </b-field>
                    <b-field label="铁幕重重困青年">
                        <b-switch v-model="isGFW" true-value="Fuck" false-value="No thank you">
                            {{ isGFW }}
                        </b-switch>
                    </b-field>
                </section>
                <section style="margin-top:30px;">
                    <b-button type="is-primary" rounded @click="apply">Apply</b-button>
                    <b-button type="is-warning" rounded @click="close">Close</b-button>
                    <b-button type="is-danger" rounded @click="reset">Reset</b-button>
                </section>
            </div>
            <div class="column">
                <section style="overflow:hidden;">
                    <h1 class="has-text-centered">Real-time preview</h1>
                    <pre class="has-text-left" :style="styles.pre" ref="pre">
                    <code :style="styles.code" ref="code">
import something from 'something'

// 获取并设置样式
const setStyle = () => {
  // 获取主题样式并添加
  const themeStyle = GM_getValue(hashString(currentTheme))

  if (themeStyle) {
    GM_addStyle(themeStyle)
  } else {
    const themeUrl = \`https://cdn.bootcss.com/highlight.js/9.15.10/styles/\${currentTheme}.min.css\`

    fetchStyleText(themeUrl).then(style => {
      GM_addStyle(style)
      GM_setValue(hashString(currentTheme), style)
    })
  }
}

export default something

                    </code>
                </pre>
                </section>
            </div>
        </div>
    </div>
</body>
`
    const vm = new window.Vue({
      el: vueRoot,
      template: vueTemplate,
      data () {
        return {
          current: {
            theme: currentTheme,
            font: currentFont
          },
          styles: {
            pre: {
              maxWidth: '952px',
              maxHeight: '631px',
              overflow: 'hidden'
            },
            code: {
              overflow: 'hidden'
            }
          },
          fontSize: fontSize,
          themes: themes,
          fonts: fonts,
          isApplyThemeChanges: isApplyThemeChanges,
          isApplyFontChanges: isApplyFontChanges,
          isForcePreBackgroundColors: isForcePreBackgroundColors,
          isGFW: isGFW,
          defaultBackgroundColr: ''
        }
      },
      watch: {
        isForcePreBackgroundColors (value) {
          console.log(value)
          if (value === 'No') {
            this.$refs.pre.style.backgroundColor = this.defaultBackgroundColr
          } else {
            poll({
              condition: () => hasCacheValue(this.current.theme),
              resolve: () => {
                this.$refs.pre.style.backgroundColor = getCurrentThemeBackgroundColor(
                  getCacheValue(this.current.theme)
                )
              },
              millisecond: 1000,
              retries: 5
            })
          }
        }
      },
      methods: {
        reset () {
          this.fontSize = 16
          this.isApplyThemeChanges = 'Yes'
          this.isApplyFontChanges = 'Yes'
          this.isForcePreBackgroundColors = 'No'
          this.isGFW = 'Fuck'
          this.current.theme = 'atom-one-dark'
          this.current.font = 'Fira Code'
          this.changeTheme(this.current.theme)
          this.changeFont(this.current.font)
        },
        apply () {
          setCacheValue('fontSize', this.fontSize)
          setCacheValue('isApplyThemeChanges', this.isApplyThemeChanges)
          setCacheValue('isApplyFontChanges', this.isApplyFontChanges)
          setCacheValue(
            'isForcePreBackgroundColors',
            this.isForcePreBackgroundColors
          )
          setCacheValue('isGFW', this.isGFW)
          setCacheValue('currentTheme', this.current.theme)
          setCacheValue('currentFont', this.current.font)
        },
        close () {
          parasitifer.hide()
        },
        changeTheme (value) {
          if (this.isApplyThemeChanges === 'No') return false

          const doChangeTheme = (thmemName, themeStyle) => {
            themeStyleEle.innerText = themeStyle

            if (this.isForcePreBackgroundColors === 'Yes') {
              this.$refs.pre.style.backgroundColor = getCurrentThemeBackgroundColor(
                themeStyle
              )
              // console.log(getCurrentThemeBackgroundColor(themeStyle))
            }

            window.hljs.highlightBlock(this.$refs.code)
          }

          if (hasCacheValue(value)) {
            doChangeTheme(value, getCacheValue(value))
            console.log(`get theme: ${value} in cache`)
          } else {
            const url =
              this.GFW === 'Fuck'
                ? `https://cdn.bootcss.com/highlight.js/9.15.10/styles/${value}.min.css`
                : `https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/styles/${value}.min.css`
            // console.log(url)
            fetchStyleText(url).then(style => {
              setCacheValue(value, style)
              doChangeTheme(value, style)
            })
          }
          // console.log('current theme', this.current.theme)
        },
        changeFont (value) {
          if (this.isApplyFontChanges === 'No') return false

          const doChangeFont = (fontName, fontStyle) => {
            fontStyleEle.innerText = fontStyle
            this.$refs.code.style.fontFamily = fontName
          }

          if (hasCacheValue(value)) {
            doChangeFont(value, getCacheValue(value))
            console.log(`get font: ${value} in cache`)
          } else {
            const url =
              this.GFW === 'Fuck'
                ? `https://fonts.loli.net/css?family=${value}&display=swap`
                : `https://fonts.googleapis.com/css?family=${value}&display=swap`
            fetchStyleText(url).then(style => {
              console.log('font style:', style)
              setCacheValue(value, style)
              doChangeFont(value, style)
            })
          }
          // console.log(value)
        },
        changeFontSize (value) {
          if (this.isApplyFontChanges === 'No') return false
          // console.log(value)
          this.$refs.code.style.fontSize = `${value}px`
        }
      },
      mounted () {
        this.defaultBackgroundColr = this.$refs.pre.style.backgroundColor
        this.changeTheme(this.current.theme)
        this.changeFont(this.current.font)
      }
    })
    console.log('Setting is mounted')
  }

  // 获取 bulmaStyle, 并挂载 设置页
  const bulmaStyle = getCacheValue('bulmaStyle')
  if (bulmaStyle) {
    mount(bulmaStyle)
  } else {
    const bulmaUrl = 'https://unpkg.com/buefy/dist/buefy.min.css'
    fetchStyleText(bulmaUrl).then(style => {
      mount(style)
      setCacheValue('bulmaStyle', style)
    })
  }
}

// 注册设置页
GM_registerMenuCommand('Open Setting', openSetting, 'SH')

beautify()
console.log('highlight runing')