import { createElement, memo } from 'react';
import PropTypes, { number } from 'prop-types';
import { Menu } from '@alifd/next';
import EditorItem from './EditorItem';
import ShadowEditor from '../ShadowEditor';

import './index.scss';

const { SubMenu, Item, Group } = Menu;

// 根据 namespace 进行分组
function groupByNameSpace(items) {
  const data = {};

  items.forEach(item => {
    let cur = data;
    const names = item.namespace.split('/');

    names.forEach((k, i) => {
      cur = cur[k] || (cur[k] = []);

      if (names.length - 1 !== i) {
        cur = cur.children || (cur.children = {});
      }
    });
    cur.push(item);
  });

  return data;
}

function sortFn(a, b) {
  if (a === 'default') {
    return -1;
  } else if (b === 'default') {
    return 1;
  } else {
    return a > b ? -1 : 1;
  }
}

function ConfigEditor(props) {
  const { onChange = () => {}, theme, variables, type } = props;

  // 渲染配置面板
  function render(variables) {
    function loop(items, level = 0) {
      if (Array.isArray(items)) {
        let itemEls = items.map(item => (
          <Item key={item.name}>
            {<EditorItem data={item} theme={theme} onChange={onChange} />}
          </Item>
        ));

        if (items.children) {
          itemEls = [].concat(itemEls, loop(items.children, level + 1));
        }

        return itemEls;
      } else {
        const menus = Object.keys(items)
          .sort(sortFn)
          .map(k => {
            const El = level === 0 ? SubMenu : Group;

            return (
              <El key={`${level}-${k}`} label={k}>
                {loop(items[k], level + 1)}
              </El>
            );
          });

        return menus;
      }
    }

    if (!Object.keys(variables).length) {
      return null;
    }

    return (
      // setting key prop for rerender
      type === 'shadow' ? (
        <ShadowEditor onChange={onChange} variable={variables[0]} />
      ) : (
        <Menu inlineIndent={0} defaultOpenAll focusable={false}>
          {loop(groupByNameSpace(variables))}
        </Menu>
      )
    );
  }
  return <div className='css-var-config-editor'>{render(variables)}</div>;
}

ConfigEditor.propTypes = {
  onChange: PropTypes.func,
  theme: PropTypes.arrayOf(PropTypes.object),
  variables: PropTypes.arrayOf(PropTypes.object),
  type: PropTypes.oneOf(['shadow']),
};

export default memo(ConfigEditor);