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;