<script setup lang="ts">
import { ref, unref } from 'vue'
// import { Icon } from '@/components/Icon'
import { propTypes } from '@/utils/propTypes'
import { useDesign } from '@/hooks/web/useDesign'
import { ElDrawer, ElDivider } from 'element-plus'
import ColorRadioPicker from './components/ColorRadioPicker.vue'
import { useAppStore } from '@/store/modules/app'
import { useCssVar } from '@vueuse/core'
import { trim, setCssVar, humpToUnderline } from '@/utils'
import { colorIsDark, lighten, hexToRGB } from '@/utils/color'
import { useI18n } from '@/hooks/web/useI18n'
import THEME_COLORS from '@/config/theme'

const { t } = useI18n()

const drawer = ref(false)
const appStore = useAppStore()
// 主题色相关
const systemTheme = ref(appStore.getTheme.elColorPrimary)

const setSystemTheme = (color: string, themeName: string) => {
  setCssVar('--el-color-primary', color)
  appStore.setTheme(THEME_COLORS[themeName])
  const leftMenuBgColor = useCssVar('--left-menu-bg-color', document.documentElement)
  setMenuTheme(trim(unref(leftMenuBgColor)))
}

const setMenuTheme = (color: string) => {
  const primaryColor = useCssVar('--el-color-primary', document.documentElement)
  const isDarkColor = colorIsDark(color)
  const theme: Recordable = {
    // 左侧菜单边框颜色
    leftMenuBorderColor: isDarkColor ? 'inherit' : '#eee',
    // 左侧菜单背景颜色
    leftMenuBgColor: color,
    // 左侧菜单浅色背景颜色
    leftMenuBgLightColor: isDarkColor ? lighten(color!, 6) : color,
    // 左侧菜单选中背景颜色
    leftMenuBgActiveColor: isDarkColor
      ? 'var(--el-color-primary)'
      : hexToRGB(unref(primaryColor), 0.1),
    // 左侧菜单收起选中背景颜色
    leftMenuCollapseBgActiveColor: isDarkColor
      ? 'var(--el-color-primary)'
      : hexToRGB(unref(primaryColor), 0.1),
    // 左侧菜单字体颜色
    leftMenuTextColor: isDarkColor ? '#bfcbd9' : '#333',
    // 左侧菜单选中字体颜色
    leftMenuTextActiveColor: isDarkColor ? '#fff' : 'var(--el-color-primary)',
    // logo字体颜色
    logoTitleTextColor: isDarkColor ? '#fff' : 'inherit',
    // logo边框颜色
    logoBorderColor: isDarkColor ? color : '#eee'
  }
  appStore.setTheme(theme)
  appStore.setCssVarTheme()
}

const { getPrefixCls } = useDesign()

const prefixCls = getPrefixCls('themeSkin')

defineProps({
  color: propTypes.string.def('')
})
</script>

<template>
  <div :class="prefixCls" @click="drawer = true">
    <!-- <Icon :size="18" icon="ant-design:skin-outlined" :color="color" /> -->
    <i class="el-icon v-icon" style="font-size: 18px" :style="{ color }">
      <svg
        focusable="false"
        data-prefix="fa-regular"
        data-icon="tshirt"
        class="svg-inline--fa fa-tshirt fa-w-20"
        role="img"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 640 512"
      >
        <path
          d="M637 123C633 109 623 98 611 92L436 3C425 -3 412 0 405 10C394 26 363 43 320 43C277 43 246 26 235 10C228 0 215 -3 204 3L29 92C17 98 7 109 3 123C-2 136 -1 150 6 163L44 240C57 266 89 277 114 265L160 244L160 459C160 488 184 512 213 512H427C456 512 480 488 480 459L480 244L525 264C551 277 583 266 596 240L634 163C641 150 642 136 637 123ZM591 142L553 219C552 221 549 222 545 221L466 186C458 182 450 183 443 188C436 192 432 200 432 208L432 459C432 462 430 464 427 464H213C210 464 208 462 208 459L208 208C208 200 204 192 197 188C193 185 189 184 184 184C181 184 178 184 174 186L94 221C91 222 88 221 87 219L49 142C48 140 48 139 48 138C49 137 49 136 51 135L210 54C236 77 276 90 320 90C364 90 404 77 430 54L589 135C591 136 591 137 592 138C592 139 592 140 591 142Z"
          fill="currentColor"
        /></svg
      ></i>
    <ElDrawer v-model="drawer" direction="rtl" size="350px">
      <template #header>
        <span class="text-16px font-600">主题设置</span>
      </template>

      <!-- 系统主题 -->
      <ElDivider>{{ t('setting.systemTheme') }}</ElDivider>
      <ColorRadioPicker
        v-model="systemTheme"
        :schema="['#409eff', '#1f9659', '#ee4f12']"
        :themeNames="['blue', 'green', 'red']"
        @change="setSystemTheme"
      /> </ElDrawer
    ></div>
</template>
