import React, { Component } from "react";
import PropTypes from "prop-types";
import {
  colors,
  spinnerAnimations,
  spinnerModes
} from "../../constants/variables";
export interface SpinnerProps {
  animation?: string;
  classes?: string;
  color?: string;
  mode?: string;
  growing?: boolean;
}

class EfeSpinner extends Component<SpinnerProps, any> {
  /* Props
   * ------------------------------------------------
   *   @prop { string }   animation                - Optional. Animation of spinner. Defined value:ease, square Default value: linear
   *   @prop { string }   classes                  - Optional. String value added to the classes.
   *   @prop { string }   color                    - Optional. Color of the spinner component. Defined spinner colors: primary, secondary, success, info, warning, danger, ligth. Default value: primary
   *   @prop { boolean }  growing                  - Optional. Growing animation of spinner. Default value: false
   *   @prop { string }   mode                     - Optional. Mode of spinner. Defined spinner mode: default, circle, double-circle, bubble, loader-bubble. Default value: circle
   */

  /* PropTypes
   * ---------------------------------------------- */
  static propTypes = {
    animation: PropTypes.string,
    classes: PropTypes.string,
    color: PropTypes.string,
    growing: PropTypes.bool,
    mode: PropTypes.string
  };

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

  render() {
    return <div className={this._getClasses()}></div>;
  }

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

  _getClasses = () => {
    const { animation, color, mode = "circle" } = this.props;
    let className = "efe-spinner";
    // if(color&&mode!='growing'){
    //     className += ` ba--spinner-${color}`
    // }

    if (spinnerAnimations.includes(animation || "") && mode !== "growing") {
      className += ` efe-spinner-animation-${animation}`;
    }

    if (spinnerModes.includes(mode)) {
      className += ` ${mode}-spinner`;
    }

    if (spinnerModes.includes(mode) && colors.includes(color || "primary")) {
      className += ` efe-spinner-${mode}-${color}`;
    }

    if (spinnerAnimations.includes(animation || "")) {
      className += ` efe-spinner-${animation}-${color}`;
    }

    return className;
  };
}

export default EfeSpinner;
