import React, { memo, useState } from 'react';
import { connect } from 'react-redux';
import GalleryGroup from './GalleryGroup';
import { addComponent } from 'models/component';
import styles from './Gallery.less';

const icons = {
  常规: 'icon-btn_regular',
  交互: 'icon-btn_interaction'
};

const categorys = ['常规', '交互'];

function Gallery({ components, addComponent }) {
  const [currentCategory, setCurrentCategory] = useState<number>();
  const getNestedConstants = () => {
    return categorys
      .map((d) => ({
        key: d,
        values: components.filter((v) => (v.category.indexOf(d) > -1 || (v.category != undefined && d === '常规')) && v.show)
      }))
      .filter((d) => d.values.length);
  };

  const onMouseEnter = (i) => {
    setCurrentCategory(i);
  };
  const onMouseLeave = () => {
    setCurrentCategory(-1);
  };

  return (
    <ul className={styles.container}>
      {getNestedConstants().map((d, i) => {
        const list = d.values;
        // const iconName = icons[d.key];
        return (
          <li className={styles.cate} key={i} onMouseEnter={() => onMouseEnter(i)} onMouseLeave={onMouseLeave}>
            {/* <i className={'icon iconfont ' + iconName} /> */}
            <span>{d.key.slice(0, 2)}</span>
            {currentCategory === i && (
              <div className={styles.group}>
                <GalleryGroup list={list} addComponent={addComponent} />
              </div>
            )}
          </li>
        );
      })}
    </ul>
  );
}

const mapStateToProps = ({ mobileConstants }) => {
  const { list } = mobileConstants;

  return {
    components: list
  };
};

const mapDispatchToProps = {
  addComponent
};

export default connect(mapStateToProps, mapDispatchToProps)(memo(Gallery));
