import React from 'react';
import classNames from 'classnames';
import { Button } from 'antd';
import styles from './style.module.less';

const initNum = 20;

export default function EmojiPart(props) {
  const { data, value, onChange } = props;
  const { label, path, num } = data;
  const [current, setCurrent] = React.useState(initNum);

  const list = new Array(current).fill();

  const onMore = () => {
    const next = current + 20;
    if (next >= num) {
      setCurrent(num);
    } else {
      setCurrent(next);
    }
  };

  return (
    <div className={styles['emoji-part']}>
      <div className={styles.body}>
      {
        list.map((_, inx) => {
          const src = `${path}${inx + 1}.png`;

          return (
            <img
              key={inx}
              alt=""
              src={getRealPath(src)}
              className={classNames({ [styles.active]: value === src })}
              onClick={() => onChange(src)}
            />
          )
        })
      }
      {
        current < num && (
          <Button type='link' onClick={onMore}>
            加载更多
          </Button>
        )
      }
      </div>
    </div>
  );
}
