import React, { Component } from "react";
import PropTypes from "prop-types";
import { cardSize } from "../../constants/variables";

export interface CardProps {
  classes: string;
  color: string;
  description: string;
  image?: any;
  imageAltText?: string;
  imageUrl?: any;
  title: string;
  date: Date;
}

export default class EfeCard extends Component<any, any> {
  /* Props
   * ------------------------------------------------
   *   @prop { string }   classes                  - Optional. String value added to the classes.
   *   @prop { string }   color                    - Optional. Color of the card component.
   *   @prop { string }   description              - Required. Description of the card component.
   *   @prop { boolean }  image                    - Optional. The feature that determines whether the picture will be available.
   *   @prop { string }   imageAltText             - Optional. The text of the picture.
   *   @prop { string }   imageUrl                 - Optional. Address that will redirect if the image is clickable.
   *   @prop { string }   title                    - Required. Title of the card component.
   *   @prop { string }   size                     - Optional. Size of the card component. Defined card sizes: Large, medium, small. Defined default value: medium
   */

  /* PropTypes
   * ---------------------------------------------- */
  static propTypes = {
    classes: PropTypes.string,
    color: PropTypes.string,
    description: PropTypes.string.isRequired,
    image: PropTypes.string,
    imageAltText: PropTypes.bool,
    imageUrl: PropTypes.string,
    title: PropTypes.string.isRequired,
    size: PropTypes.string
  };

  /* Life Cycle Functions
   * ------------------------------------------------ */

  render() {
    const { date, description, title } = this.props;
    return (
      <div className={this._getClasses()} style={this._getStyling()}>
        <div className={"efe-card-main"}>
          <div className={"efe-card-title text-white"}>{title}</div>
          <div className={"efe-card-seperator"}></div>
          <div className={"efe-card-description text-white"}>{description}</div>
        </div>
        <div className={"efe-card-footer text-white"}>{date}</div>
      </div>
    );
  }

  /* Component Functions
   * ------------------------------------------------ */

  _getClasses = () => {
    const { classes, size } = this.props;
    let className = `efe-card ${classes || ""}`;

    if (cardSize.includes(size)) {
      className += `efe-card-${size}`;
    }
    return className;
  };

  _getStyling = () => {
    const { color, imageUrl } = this.props;
    let backgroundImage = "";
    let backgroundColor = "";
    let styling = {
      backgroundColor,
      backgroundImage
    };

    styling.backgroundColor = `${color || ""}`;
    styling.backgroundImage = `url(${imageUrl || ""})`;

    return styling;
  };
}
