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

const Emoji = ({ onClick }) => {
  const content = [[], [], []];

  for (let i = 0; i < emoji.length; i++) {
    if (i < 20) {
      content[0].push(emoji[i]);
    } else if (i < 40) {
      content[1].push(emoji[i]);
    } else if (i < emoji.length) {
      content[2].push(emoji[i]);
    }
  }
  return (
    <Carousel>
      <div>
        {content[0].map((item, index) => (
          <div className="item" key={item.value}>
            <span className="helper" />
            <img
              src={`${prefixUrl}${item.value}.${ext}`}
              alt={item.title}
              style={{ display: "inline-block" }}
              onClick={() => onClick(item.title)}
            />
          </div>
        ))}
      </div>
      <div>
        {content[1].map((item, index) => (
          <div className="item" key={item.value}>
            <span className="helper" />
            <img
              src={`${prefixUrl}${item.value}.${ext}`}
              alt={item.title}
              style={{ display: "inline-block" }}
              onClick={() => onClick(item.title)}
            />
          </div>
        ))}
      </div>
      <div>
        {content[2].map(item => (
          <div className="item" key={item.value}>
            <span className="helper" />
            <img
              src={`${prefixUrl}${item.value}.${ext}`}
              alt={item.title}
              style={{ display: "inline-block" }}
              onClick={() => onClick(item.title)}
            />
          </div>
        ))}
      </div>
    </Carousel>
  );
};

export default Emoji;