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 } = 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);
    }
    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.value}>
                <span className="helper" />
                <img
                  src={`${prefixUrl}${item.value}.${item.ext}`}
                  alt={item.title}
                  style={{ display: "inline-block" }}
                  onClick={() => onClick(item.title)}
                />
              </div>
            ))}
          </div>
        ))}
      </Carousel>
    );
  }
}

export default Emoji;