import { changeTheme } from './echarts';
import {startViewTransition} from "@/services/utils";

export const themes: any = {
  dark: {
    '--color': '#bdc7db',
    '--color-title': '#e3e8f4',
    '--color-desc': '#617b91',
    '--color-gray': '#4f5b75',
    '--color-background': '#1e2430',
    '--color-background-active': '#121924',//'#161f2c',
    '--color-background-hover': '#181f29',
    '--color-background-input': '#303746',
    '--color-background-popup': '#303746',
    '--color-background-popup-hover': '#454f64',
    '--color-border': '#000000',
    '--color-border-input': '#535f79',
    '--color-border-input-hover': '#454f64',
    '--color-scrollbar': '#535F79',
    '--color-scrollbar-hover': '#e5e5e5',
    '--td-component-border': '#42516c',
    '--color-background-editor': '#080b0f',
    '--color-border-editor': '#1e2430',
    '--color-border-popup': 'transparent',
    '--shadow-popup': 'none',
    '--td-bg-color-component':'#535f79',
    '--color-background-groups':'#1e2430',
    '--color-background-views-hover':'#3E4D6B',
    '--color-switch-handle':'#bdc7db',
  },
  light: {
    '--color': '#737A8A', //'#595959',
    '--color-title':'#666D79',// '#262626',
    '--color-desc': '#8c8c8c',
    '--color-gray': '#bfbfbf',
    '--color-background': '#ffffff',
    '--color-background-active':'#FFFFFF', //'#f7f8f9',
    '--color-background-hover': '#EFF1F6',
    '--color-background-input': '#F2F4F8',
    '--color-background-popup': '#ffffff',
    '--color-background-popup-hover': '#EFF1F6',//'#454f64',
    '--color-border': '#f0f1f2',
    '--color-border-input': '#e5e5e5',
    '--color-border-input-hover': '#dcdcdc',
    '--color-scrollbar': '#dad7d7',//2
    '--color-scrollbar-hover': '#e5e5e5',//1
    '--td-component-border': '#f3f3f3',
    '--color-background-editor': '#f0f1f2',
    '--color-border-editor': '#c6c6c666' ,//'#1e2430',
    '--color-border-popup': '#dddddd',
    '--shadow-popup': '0 5px 8px 0px rgb(0 0 0 / 10%)',
    '--td-bg-color-component':'#F7F8FA',
    '--color-background-groups':'#F7F8FA',
    '--color-background-views-hover':'#EFF1F6',
    '--color-switch-handle':'#fff'
  },
};

export function switchTheme(themeName?: string) {
  startViewTransition(()=>{
    //编辑器样式
    let theme = themes[themeName||'dark'];
    for (let key in theme) {
      document.documentElement.style.setProperty(key, theme[key]);
    }

    //echarts样式（系统组件-图表）
    changeTheme(`le-${themeName||'dark'}`);

    //系统组件其他图元样式？

    //画布中的图元？

    //画布样式
    let options:any = {
      ruleColor:'#222E47',
      background: '#1e2430',
      color: '#bdc7db',
      ruleOptions:{
        background:'#121924',
        textColor:'#6E7B91'
      },
    }
    if(themeName === 'light'){
      options = {
        ruleColor:'#C8D0E1',
        background: '#fff',
        color: '#000',
        ruleOptions:{
          background:'#F7F8FA',
          textColor:'#C8D0E1'
        },
      }
    }
    // meta2d?.setOptions(options);
    // meta2d?.render();
    meta2d.setTheme(themeName||'dark');
    localStorage.setItem('le-theme', themeName||'dark');
  })
}
