import React from "react";
import { Carousel } from "antd";
// import emoji, { prefixUrl } from "../../emoji";
import "./Emoji.css";
// 每页 20  5*4
// 共 20 * 3 = 60 (实际是 54)

// class Emoji

class Emoji extends React.Component {
  next() {
    if (this.carousel) {
      this.carousel.next();
    }
  }

  prev() {
    if (this.carousel) {
      this.carousel.prev();
    }
  }

  render() {
    const { onClick, emojiList } = this.props;
    const content = [];
    // let curPage = [];
    // for (let i = 0; i < 115; i++) {
    //   if (curPage.length < 30) {
    //     curPage.push(emoji[i]);
    //   } else {
    //     content.push(curPage);
    //     curPage = [];
    //   }
    // }
    // if (curPage.length > 0) {
    //   content.push(curPage);
    // }
    for (let i = 0; i < emojiList.length; i += 30) {
      content.push(emojiList.slice(i, i + 30));
    }

    return (
      <Carousel
        ref={node => {
          this.carousel = node;
        }}
      >
        {content.map((page, index) => (
          <div key={index} className="emoji">
            {page.map((item, index) => (
              <div className="item" key={item.id}>
                <span className="helper" />
                <img
                  src={item.url}
                  alt={item.name}
                  style={{ display: "inline-block" }}
                  onClick={() => onClick(item.name)}
                />
              </div>
            ))}
          </div>
        ))}
      </Carousel>
    );
  }
}

export default Emoji;