text: import React, { Component } from "react";
  import PropTypes from "prop-types";
  import classNames from "classnames";
  import "./stepper.scss";
  
  export default class Stepper extends Component {
    constructor() {
      super();
      this.state = {
        // Completed - to add a check mark
        // Selected - to fill step with color
        // Highlighted - to make text of selected step bold
        steps: [],
      };
    }
  
    componentDidMount() {
      const { steps, currentStepNumber } = this.props;
  
      const stepsState = steps.map((step, index) => {
        const stepObj = {};
        stepObj.description = step;
        stepObj.highlighted = index === 0 ? true : false;
        stepObj.selected = index === 0 ? true : false;
        stepObj.completed = false;
        return stepObj;
      });
  
      const currentSteps = this.updateStep(currentStepNumber, stepsState);
  
      this.setState({
        steps: currentSteps,
      });
    }
  
    componentDidUpdate(prevProps) {
      const { steps } = this.state;
      const currentSteps = this.updateStep(this.props.currentStepNumber, steps);
  
      if (prevProps.currentStepNumber !== this.props.currentStepNumber)
        this.setState({
          steps: currentSteps,
        });
    }
  
    updateStep(stepNumber, steps) {
      const newSteps = [...steps];
      let stepCounter = 0;
  
      // Completed - to add a check mark
      // Selected - to fill step with color
      // Highlighted - to make text of selected step bold
  
      while (stepCounter < newSteps.length) {
        //First Step
        if (stepCounter === 1 && stepCounter === stepNumber) {
          newSteps[stepCounter] = {
            ...newSteps[stepCounter],
            highlighted: true,
            selected: true,
            completed: false,
          };
          stepCounter++;
        }
        // Current step
        if (stepCounter === stepNumber) {
          newSteps[stepCounter] = {
            ...newSteps[stepCounter],
            highlighted: true,
            selected: true,
            completed: false,
          };
          stepCounter++;
        }
        // Past step
        else if (stepCounter < stepNumber) {
          newSteps[stepCounter] = {
            ...newSteps[stepCounter],
            highlighted: false,
            selected: true,
            completed: true,
          };
          stepCounter++;
        }
        // Future step
        else {
          newSteps[stepCounter] = {
            ...newSteps[stepCounter],
            highlighted: false,
            selected: false,
            completed: false,
          };
          stepCounter++;
        }
      }
  
      return newSteps;
    }
  
    render() {
      const { direction, stepColor } = this.props;
      const { steps } = this.state;
  
      const stepsJSX = steps.map((step, index) => {
        return (
          <div className="step-wrapper" key={index}>
            <div
              className={`step-number ${
                step.selected
                  ? "step-number step-number-selected"
                  : "step-number-disabled"
              }`}
              style={{ background: `${step.selected ? stepColor : "none"}` }}
            ></div>
            <div
              className={`step-description ${
                step.highlighted && "step-description-active"
              }`}
            >
              {step.description}
            </div>
            {index !== steps.length - 1 && (
              <div
                className={`divider-line ${
                  step.completed
                    ? "divider-line divider-line-completed"
                    : "divider-line"
                }`}
              />
            )}
          </div>
        );
      });
  
      return (
        <div className="stepper-container-horizontal">
          <div className={`stepper-wrapper-${direction}`}>{stepsJSX}</div>
        </div>
      );
    }
  }
  
  Stepper.propTypes = {
    direction: PropTypes.string.isRequired,
    currentStepNumber: PropTypes.number.isRequired,
    steps: PropTypes.array.isRequired,
    stepColor: PropTypes.string.isRequired,
  };
  