/*
 * @Author: wjc
 * @Date: 2026-01-19 16:52:19
 * @LastEditors: wjc
 * @LastEditTime: 2026-01-22 09:43:34
 * @Description:
 */
import { TinyColor } from '@ctrl/tinycolor'
import { getColors } from 'theme-colors'

interface ColorItem {
  alias?: string
  color: string
  name: string
}

/**
 * 生成颜色变量的函数
 * @param colorItems 颜色项数组，每个项包含颜色、名称和可选的别名
 * @returns 颜色变量的记录对象，键为 CSS 变量名，值为颜色值:
 * @example
 * --primary-500: #505050;
 * --primary-400: #c0c0c0;
 * --primary-300: #d0d0d0;
 * --primary-200: #e0e0e0;
 * --primary-100: #f0f0f0;
 * --primary-50: #fafafa;
 */
function generatorColorVariables(colorItems: ColorItem[]) {
  const colorVariables: Record<string, string> = {}

  colorItems.forEach(({ alias, color, name }) => {
    if (color) {
      const colorsMap = getColors(new TinyColor(color).toHexString())

      let mainColor = colorsMap['500']

      const colorKeys = Object.keys(colorsMap)

      colorKeys.forEach((key) => {
        const colorValue = colorsMap[key]

        if (colorValue) {
          colorVariables[`--${name}-${key}`] = colorValue
          if (alias) {
            colorVariables[`--${alias}-${key}`] = colorValue
          }

          if (key === '500') {
            mainColor = colorValue
          }
        }
      })
      if (alias && mainColor) {
        colorVariables[`--${alias}`] = mainColor
      }
    }
  })
  return colorVariables
}

/**
 * 将 CSS 颜色变量设置到根元素样式中
 * @param variables 要更新的 CSS 变量与其新值的映射
 */
function setCSSVariables(
  variables: { [key: string]: string },
  id = '__uni-starter-styles__'
): void {
  // 获取或创建内联样式表元素
  const styleElement = document.querySelector(`#${id}`) || document.createElement('style')

  styleElement.id = id

  // 构建要更新的 CSS 变量的样式文本
  let cssText = ':root, page {'
  for (const key in variables) {
    if (Object.prototype.hasOwnProperty.call(variables, key)) {
      cssText += `${key}: ${variables[key]};`
    }
  }
  cssText += '}'

  // 将样式文本赋值给内联样式表
  styleElement.textContent = cssText

  // 将内联样式表添加到文档头部
  if (!document.querySelector(`#${id}`)) {
    setTimeout(() => {
      document.head.append(styleElement)
    })
  }
}

/**
 * 更新主要的 CSS 变量
 * @param  preference - 当前偏好设置对象，它的颜色值将被转换成 HSL 格式并设置为 CSS 变量。
 */
export function updateMainColorVariables(theme: any) {
  // 当修改到颜色变量时，更新 css 变量
  const root = document.documentElement
  if (!root) {
    return
  }
  if (!theme) {
    return
  }
  const { colorDestructive, colorPrimary, colorSuccess, colorWarning } = theme

  const colorVariables = generatorColorVariables([
    { color: colorPrimary, name: 'primary' },
    { alias: 'warning', color: colorWarning, name: 'yellow' },
    { alias: 'success', color: colorSuccess, name: 'green' },
    { alias: 'destructive', color: colorDestructive, name: 'red' },
  ])

  // 要设置的 CSS 变量映射
  const colorMappings = {
    '--green-500': '--success',
    '--primary-500': '--primary',
    '--red-500': '--destructive',
    '--yellow-500': '--warning',
  }

  // 统一处理颜色变量的更新
  Object.entries(colorMappings).forEach(([sourceVar, targetVar]) => {
    const colorValue = colorVariables[sourceVar]
    if (colorValue) {
      document.documentElement.style.setProperty(targetVar, colorValue)
    }
  })

  setCSSVariables(colorVariables)
}
