import React, { Component } from "react";
import PropTypes from "prop-types";
import { colors, badgeTypes } from "../../constants/variables";
export interface BadgeProps {
  children: any;
  position: any;
  backgroundColor: any;
}

export default class EfeBadge extends Component<any, any> {
  /* Props
   * ------------------------------------------------
   *   @prop { string }    badgeColor             - Optional.  Color of the badge component. Defined badge colors: primary, secondary, success, info, warning, danger, ligth. Default value: primary
   *   @prop { string }    backgroundColor        - Optional.  Background of the badge component. Defined badge colors: primary, secondary, success, info, warning, danger, ligth. Default value: primary
   *   @prop { string }    color                  - Optional.  Text of the badge component.
   *   @prop { string }    type                   - Optional.  Type of the badge component. Defined badge types: outline, regular, pill, pill-padding. Default value: regular
   */

  /* PropTypes
   * ---------------------------------------------- */
  static propTypes = {
    badgeColor: PropTypes.string,
    backgroundColor: PropTypes.string,
    color: PropTypes.string,
    type: PropTypes.string
  };

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

  render() {
    const { children, link } = this.props;
    return link ? (
      <a href={`${link}`}>
        <div className={this._getClasses()} style={this._getStyling()}>
          <span>{children}</span>
        </div>
      </a>
    ) : (
      <div className={this._getClasses()} style={this._getStyling()}>
        <span>{children}</span>
      </div>
    );
  }

  /* Components Functions
   * ------------------------------------------------ */

  _getClasses = () => {
    const { badgeColor, type } = this.props;

    let classes = "efe-badge";

    if (colors.includes(badgeColor)) {
      classes += `  efe-badge-${
        type === "outline" ? "outline-" : ""
      }${badgeColor}`;
    }

    if (badgeTypes.includes(type)) {
      classes += ` efe-badge-${type}`;
    }

    return classes;
  };

  _getStyling = () => {
    const { backgroundColor, color } = this.props;

    let styling = {
      backgroundColor,
      color
    };

    if (backgroundColor) {
      styling.backgroundColor = backgroundColor;
    }
    if (color) {
      styling.color = color;
    }

    return styling;
  };
}
