import { ElMessage as Message } from 'element-plus'
import { getCookieDomain } from '@/utils/auth'
// 处理 cookie
import Cookie from 'js-cookie'
// element-ui 默认主题色，与element-variables.scss 里的保持一致
const ORIGINAL_THEME = '#409EFF'
// element css 字符串
let CHALK = ''

declare const window: any

// 系统默认主题色
export const DEFAULT_THEME_COLOR = '#204BE3'
// 系统默认主题色缓存 key
export const DEFAULT_THEME_COLOR_KEY = 'themeColor'

// 初始化主题
export function initTheme() {
  // hack：为了只获取一级域名的cookie，需要把之前存在二级域名下的cookie清除掉
  // if (process.env.NODE_ENV !== 'development') {
  //   Cookie.remove('theme')
  //   Cookie.remove(DEFAULT_THEME_COLOR_KEY)
  //   Cookie.remove('navbarTheme')
  //   Cookie.remove('layoutConfig')
  // }

  let themeColor = getCookieInDomain(DEFAULT_THEME_COLOR_KEY)
  if ((themeColor && themeColor.includes('default')) || !themeColor)
    themeColor = DEFAULT_THEME_COLOR

  theme(themeColor).then()
}

// 存放 cookie 封装
export function setCookieInDomain(key, value) {
  return Cookie.set(key, value, {
    expires: 30,
    domain: getCookieDomain(),
    path: '/',
  })
}

// 获取 cookie 封装
export function getCookieInDomain(key, getType = 'get') {
  return Cookie[getType](key, { domain: getCookieDomain() })
}

// 修改主题色
async function theme(val) {
  const oldVal = CHALK ? getCookieInDomain('themeColor') || '' : ORIGINAL_THEME

  if (typeof val !== 'string') return

  const themeCluster = getThemeCluster(val.replace('#', ''))
  const originalCluster = getThemeCluster(oldVal.replace('#', ''))

  const $message = Message({
    message: '   Compiling the theme',
    customClass: 'theme-message',
    type: 'success',
    duration: 0,
    // icon: 'el-icon-loading',
  })

  // 如果没有缓存的css 字符串，请求保存下来
  if (!CHALK) {
    // const url = `${window.VUE_CDN_HOST}element-ui.css`
    // await getCSSString(url)
  }

  getHandler('chalk', 'chalk-style', themeCluster)

  // 匹配 element css 样式字符串，修改其中颜色值，并替换
  const styles = [].slice.call(document.querySelectorAll('style')).filter((style) => {
    const text = style.innerText
    return new RegExp(oldVal, 'i').test(text) && !/Chalk Variables/.test(text)
  })

  styles.forEach((style) => {
    const { innerText } = style
    if (typeof innerText !== 'string') return
    if (innerText.includes('theme-default')) return

    style.innerText = updateStyle(innerText, originalCluster, themeCluster)
  })

  // 修改 css var
  document.documentElement.style.setProperty('--el-color-primary', val)
  setThemeColors(val.replace('#', ''))
  // 保存到 Cookie
  setCookieInDomain(DEFAULT_THEME_COLOR_KEY, val)
  $message.close()
}

function getHandler(variable, id, themeCluster) {
  const originalCluster = getThemeCluster(ORIGINAL_THEME.replace('#', ''))
  const newStyle = updateStyle(CHALK, originalCluster, themeCluster)

  let styleTag = document.getElementById(id)
  if (!styleTag) {
    styleTag = document.createElement('style')
    styleTag.setAttribute('id', id)
    document.head.appendChild(styleTag)
  }
  styleTag.innerText = newStyle
}

// 更新 element style
function updateStyle(style, oldCluster, newCluster) {
  let newStyle = style
  oldCluster.forEach((color, index) => {
    newStyle = newStyle.replace(new RegExp(color, 'ig'), newCluster[index])
  })
  return newStyle
}

// // 获取 element css 字符串
function getCSSString(url) {
  return new Promise<void>((resolve) => {
    const xhr = new XMLHttpRequest()
    xhr.onreadystatechange = () => {
      if (xhr.readyState === 4 && xhr.status === 200) {
        CHALK = xhr.responseText.replace(/@font-face{[^}]+}/, '')
        resolve()
      }
    }
    xhr.open('GET', url)
    xhr.send()
  })
}

// 计算 主题色 浅色调
function tintColor(color, tint) {
  let red: string | number = parseInt(color.slice(0, 2), 16)
  let green: string | number = parseInt(color.slice(2, 4), 16)
  let blue: string | number = parseInt(color.slice(4, 6), 16)

  if (tint === 0) {
    // when primary color is in its rgb space
    return [red, green, blue].join(',')
  } else {
    red += Math.round(tint * (255 - red))
    green += Math.round(tint * (255 - green))
    blue += Math.round(tint * (255 - blue))

    red = red.toString(16)
    green = green.toString(16)
    blue = blue.toString(16)

    return `#${red}${green}${blue}`
  }
}

function shadeColor(color, shade) {
  let red: string | number = parseInt(color.slice(0, 2), 16)
  let green: string | number = parseInt(color.slice(2, 4), 16)
  let blue: string | number = parseInt(color.slice(4, 6), 16)

  red = Math.round((1 - shade) * red)
  green = Math.round((1 - shade) * green)
  blue = Math.round((1 - shade) * blue)

  red = red.toString(16)
  green = green.toString(16)
  blue = blue.toString(16)

  return `#${red}${green}${blue}`
}

// 根据 色值 计算主题色
function getThemeCluster(theme) {
  const clusters = [theme]
  for (let i = 0; i <= 9; i++) {
    clusters.push(tintColor(theme, Number((i / 10).toFixed(2))))
  }
  clusters.push(shadeColor(theme, 0.1))
  return clusters
}

// 根据当前选中的主题色生成一系列的浅色调
function setThemeColors(color) {
  const colors = getThemeCluster(color).slice(2)
  colors.forEach((color, i) => {
    if (i === colors.length - 1) {
      document.documentElement.style.setProperty(`--el-color-primary-active`, color)
      return
    }
    document.documentElement.style.setProperty(`--el-color-primary-light-${i + 1}`, color)
  })
}

export default theme