import React from "react";
import PropTypes from "prop-types";
import {
  StepProgressContainer,
  Progress,
  StepBar,
  StepLine,
} from "./StepProgress.styled";
import { ReactComponent as Checkmark } from "../../assets/images/svg/checkmark.svg";

const StepProgress = (props) => {
  const steps = [];
  for (let i = 1; i <= props.numberOfSteps; i++) {
    steps.push({
      done: i < props.current,
      current: i === props.current,
    });
  }
  const functions = [];
  steps.forEach((item, index) => {
    if (props.functions[index]) {
      functions.push(props.functions[index]);
    } else {
      functions.push(() => {});
    }
  });
  return (
    <StepProgressContainer done>
      {steps.map((item, index) =>
        index === 0 ? (
          <StepBar
            current={item.current}
            done={item.done}
            key={index}
            onClick={
              item.done
                ? props.functions[index]
                : () => {
                    console.log("neuspeh");
                  }
            }
          >
            {item.done ? <Checkmark /> : index + 1}
          </StepBar>
        ) : (
          <React.Fragment key={index}>
            <StepLine done={item.done || item.current}>
              <Progress done={item.done || item.current} />
            </StepLine>
            <StepBar
              current={item.current}
              done={item.done}
              onClick={item.done ? props.functions[index] : () => {}}
            >
              {item.done ? <Checkmark /> : index + 1}
            </StepBar>
          </React.Fragment>
        )
      )}
    </StepProgressContainer>
  );
};

StepProgress.propTypes = {
  children: PropTypes.node,
  handleNext: PropTypes.node,
  current: PropTypes.number,
  numberOfSteps: PropTypes.number,
  functions: PropTypes.array,
};
StepProgress.defaultProps = {
  functions: [],
};

export default StepProgress;
