import { ref } from 'vue';
import { useGlobal, cookies, storageLocal, storageSession } from '@utogether/utils';
import { darken, lighten } from '../../utils';
import { useLayout } from './useLayout';
import { getConfig } from '../../config';
import type { themeColorsType } from '../types';
import { routerArrays } from '../types';
import { kTOKEN, kLOGINER, kCKTOKEN } from '../../contant';
import { router, resetRouter } from '../../router';
import { useMultiTagsStoreHook } from '../../store/modules/multiTags';
import { useAppStoreHook } from '../../store/modules/app';
import { useEpThemeStoreHook } from '../../store/modules/epTheme';
import { setTheme } from '../../plugins/vxe-table';

export function useDataThemeChange() {
  const { layoutTheme, layout } = useLayout();
  const themeColors = ref<Array<themeColorsType>>([
    /* 道奇蓝（默认） */
    { color: '#1b2a47', themeColor: 'default' },
    /* 亮白色 */
    { color: '#ffffff', themeColor: 'light' },
    /* 猩红色 */
    { color: '#f5222d', themeColor: 'dusk' },
    /* 橙红色 */
    { color: '#fa541c', themeColor: 'volcano' },
    /* 金色 */
    { color: '#fadb14', themeColor: 'yellow' },
    /* 绿宝石 */
    { color: '#13c2c2', themeColor: 'mingQing' },
    /* 酸橙绿 */
    { color: '#52c41a', themeColor: 'auroraGreen' },
    /* 深粉色 */
    { color: '#eb2f96', themeColor: 'pink' },
    /* 深紫罗兰色 */
    { color: '#722ed1', themeColor: 'saucePurple' }
  ]);

  const { $storage } = useGlobal();
  const dataTheme = ref<boolean>($storage?.layout?.darkMode);
  const overallStyle = ref<string>($storage?.layout?.overallStyle);
  const body = document.documentElement as HTMLElement;

  function toggleClass(flag: boolean, clsName: string, target?: HTMLElement) {
    const targetEl = target || document.body;
    let { className } = targetEl;
    className = className.replace(clsName, '').trim();
    targetEl.className = flag ? `${className} ${clsName}` : className;
  }

  /** 设置导航主题色 */
  function setLayoutThemeColor(theme = getConfig().Theme ?? 'default') {
    layoutTheme.value.theme = theme;
    document.documentElement.setAttribute('data-theme', theme);
    // 清空class
    document.documentElement.className = '';
    document.documentElement.classList.add(`layout-theme-${theme}`);
    $storage.layout = {
      layout: layout.value,
      theme,
      darkMode: dataTheme.value,
      sidebarStatus: $storage.layout?.sidebarStatus,
      epThemeColor: $storage.layout?.epThemeColor,
      overallStyle: overallStyle.value
    };

    if (theme === 'default' || theme === 'light') {
      setEpThemeColor(getConfig().EpThemeColor || '#409EFF');
    } else {
      const colors = themeColors.value.find(item => item.themeColor === theme);

      setEpThemeColor(colors.color);
    }
  }

  function setPropertyPrimary(mode: string, i: number, color: string) {
    document.documentElement.style.setProperty(
      `--el-color-primary-${mode}-${i}`,
      dataTheme.value ? darken(color, i / 10) : lighten(color, i / 10)
    );
  }

  /** 设置 `element-plus` 主题色 */
  const setEpThemeColor = (color: string) => {
    useEpThemeStoreHook().setEpThemeColor(color);
    document.documentElement.style.setProperty('--el-color-primary', color);
    for (let i = 1; i <= 2; i++) {
      setPropertyPrimary('dark', i, color);
    }
    for (let i = 1; i <= 9; i++) {
      setPropertyPrimary('light', i, color);
    }
  };

  /** 浅色、深色主题模式切换 */
  function dataThemeChange(overall?: string) {
    /* 如果当前是light夜间主题，默认切换到default主题 */
    overallStyle.value = overall;
    if (useEpThemeStoreHook().epTheme === 'light' && dataTheme.value) {
      setLayoutThemeColor('default');
    } else {
      setLayoutThemeColor(useEpThemeStoreHook().epTheme);
    }
    setTheme(!dataTheme.value ? 'light' : 'dark');
    if (dataTheme.value) {
      document.documentElement.classList.add('dark');
      document.documentElement.classList.remove('default');
    } else {
      document.documentElement.classList.add('default');
      document.documentElement.classList.remove('dark');
    }
  }

  function onReset() {
    cookies.remove(kCKTOKEN);
    cookies.remove(kTOKEN);
    cookies.remove(kLOGINER);
    storageLocal.clear();
    storageSession.clear();
    const { Grey, Weak, MultiTagsCache, EpThemeColor, Layout } = getConfig();
    useAppStoreHook().setLayout(Layout);
    setEpThemeColor(EpThemeColor);
    useMultiTagsStoreHook().multiTagsCacheChange(MultiTagsCache);
    toggleClass(Grey, 'html-grey', document.querySelector('html'));
    toggleClass(Weak, 'html-weakness', document.querySelector('html'));
    router.push('/login');
    useMultiTagsStoreHook().handleTags('equal', [...routerArrays]);
    resetRouter();
  }

  return {
    body,
    overallStyle,
    dataTheme,
    layoutTheme,
    themeColors,
    onReset,
    toggleClass,
    dataThemeChange,
    setEpThemeColor,
    setLayoutThemeColor
  };
}