import React from "react";

class CardMedia extends React.PureComponent {
  static AUTO_THUMB_CLASSES = [
    "purple",
    "red",
    "pink",
    "indigo",
    "blue",
    "light-blue",
    "cyan",
    "teal",
    "green",
    "yellow",
    "orange",
  ];

  componentWillMount() {
    this.setState({
      autoThumbClass:
        CardMedia.AUTO_THUMB_CLASSES[
          Math.floor(Math.random() * CardMedia.AUTO_THUMB_CLASSES.length)
        ],
    });
  }

  render() {
    const { title, thumbnail } = this.props;
    const atClass = this.state.autoThumbClass;

    if (thumbnail) {
      return (
        <div
          className="card__media"
          style={{ backgroundImage: "url('" + thumbnail + "')" }}
        />
      );
    }

    return (
      <div className={`card__media card__media--autothumb ${atClass}`}>
        <div className="card__autothumb__text">
          {title &&
            title
              .replace(/\s+/g, "")
              .substring(0, Math.min(title.replace(" ", "").length, 5))
              .toUpperCase()}
        </div>
      </div>
    );
  }
}

export default CardMedia;