import React, { useState, useEffect, useCallback } from 'react';
import { Service } from '@zenview/micro-basic-library';
import { cache } from '@zenview/micro-utils';
import './index.less';

const defaultThemeKey = cache.getCache('defaultThemeKey');

export default function ThemeHeader() {
  const [dicts, setDicts] = useState([]);
  const [themeKey, setThemeKey] = useState(defaultThemeKey || 'default');
  useEffect(() => {
    Promise.all([Service.$http({ url: '/resource/config/themeConfig.json' }), Service.$http({ url: '/resource/config/themeConfig-custom.json' })]).then(res => {
      setDicts(res);
    });
  }, []);

  const changeActiveTheme = useCallback(item => {
    setThemeKey(item.mode);
    // formartThemeConfig(item);
  }, []);

  useEffect(() => {
    cache.setCache('defaultThemeKey', themeKey);
    if (dicts.length > 0) {
      // formartThemeConfig(dicts.find(v => v.mode === themeKey));
    }
  }, [dicts, themeKey]);

  return (
    <div className="theme-header">
      <div className="theme-page-title">组件示例</div>
      <div className="dict-theme">
        {dicts.map(item => (
          <span className={item.mode === themeKey ? 'active' : ''} key={item.mode} onClick={() => changeActiveTheme(item)}>
            {item.title}
          </span>
        ))}
      </div>
    </div>
  );
}
