import React, { useMemo } from 'react';
import { getDefaultTheme, objectToCSSVariables } from '@wakeapp/components';
import { copy } from '../utils';

// 灰度颜色，6级
const GRAY_COLOR_LEVELS = ['1', '2', '3', '4', '5', '6'];

// 语义化颜色
const EXTEND_COLORS: Array<{ name: string; color: string; desc?: string }> = [
  { name: '主题色', color: 'primary', desc: '' },
  { name: '次級颜色', color: 'secondary' },
  { name: '成功', color: 'success' },
  { name: '失败', color: 'error' },
  { name: '警告', color: 'warning' },
  { name: '提示', color: 'info' },
];
const EXTEND_COLORS_LEVELS: { [key: string]: string[] } = {
  primary: ['', '1', '2', '3', '4'],
  secondary: [''],
  success: ['', '1', '2', '3', '4'],
  error: ['', '1', '2', '3', '4'],
  warning: ['', '1', '2', '3', '4'],
  info: ['', '1', '2', '3', '4'],
};

let colorArr: Array<{ name: string; list: string[] }> = [];
const gary = GRAY_COLOR_LEVELS.map(level => `var(--gray-${level})`);
const garyAlpha = GRAY_COLOR_LEVELS.map(level => `var(--gray-alpha-${level})`);

const themeList = EXTEND_COLORS.map(({ name, color }) => {
  return {
    name,
    list: EXTEND_COLORS_LEVELS[color].map(level => `var(--${color}-color${level ? '-' + level : ''})`),
  };
});
colorArr = [
  ...colorArr,
  ...themeList,
  { name: '淺色背景灰色(纯色)', list: gary },
  { name: '深色背景灰色(透明度)', list: garyAlpha },
  { name: '文字颜色', list: ['var(--black-color)', 'var(--white-color)'] },
  { name: '边框颜色、分割线颜色', list: ['var(--border-color)', 'var(--cutting-line-color)'] },
];

export default () => {
  const DEFAULT_THEME = useMemo(() => objectToCSSVariables(getDefaultTheme()), []);

  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'space-between' }}>
      {colorArr.map(({ name, list }) => {
        return (
          <div key={name} style={{ width: '46%', marginBottom: '40px' }}>
            <div>{name}</div>
            {list.map(color => {
              return (
                <div
                  key={color}
                  onClick={() => copy(color)}
                  style={{
                    cursor: 'pointer',
                    background: `${color}`,
                    padding: '15px',
                    textShadow: '0 0 5px #fff',
                  }}
                >
                  {color} = {DEFAULT_THEME[color.slice(4, -1)]}
                </div>
              );
            })}
          </div>
        );
      })}
    </div>
  );
};
