import * as classNames from "classnames";
import * as _ from "lodash";
import * as React from "react";
import Circle from "react-circle";

import { Loading, LoadingType } from "../Loading";

export enum ProgressType {
  Stepwise = "Stepwise",
  Circle = "Circle",
}

interface IStep {
  id: string;
  text?: string,
}

interface IProgressProps {
  type: ProgressType;
  steps?: IStep[];
  activeStep?: IStep;
  progress?: number;
}

export class Progress extends React.PureComponent<IProgressProps, {}> {
  public render() {
    return (
      <div className={classNames("progress", {
        "progress--complete": _.isNumber(this.props.progress) && this.props.progress === 100,
        [`progress--${this.props.type.toLowerCase()}`]: this.props.type,
      })}>
        {this.props.type === ProgressType.Stepwise && this.renderStepwise()}
        {this.props.type === ProgressType.Circle && this.renderCircle()}
      </div>
    );
  }

  private renderCircle() {
    return (
      <Circle
        progress={this.props.progress || 0}
        size={"20"}
        progressColor="white"
        bgColor="black"
        roundedStroke={true}
        showPercentage={false}
      />
    );
  }

  private renderStepwise() {
    return (
      <>
        <div className="progress__loader">
          <Loading type={LoadingType.Spinner} />
        </div>
        <div className="progress__steps">
          {this.props.steps.map(step => {
            return (
              <div
                className={classNames("progress__step", {
                  "progress__step--active": step.id === this.props.activeStep.id,
                })}
                key={step.id}
              >
                {step.text}
              </div>
            );
          })}
        </div>
      </>
    );
  }
}