import React, { useState, useEffect } from "react";
import steps from "../../../constants/steps";
import {
  Card,
  Stepper,
  Step,
  StepButton,
  StepLabel,
  makeStyles
} from "@material-ui/core";
import { useLocation, useHistory } from "react-router-dom";
import CustomStepConnector from "./CustomStepConnector";
import ColorlibStepIcon from "./ColorlibStepIcon";

const styles = () => ({
  stepperCard: {
    padding: "0px",
    margin: "15px"
  }
});

const useStyles = makeStyles(styles);

const ApplicationStepper = () => {
  const firstStep = steps.find((z) => z.id === 0);
  const [activeStep, setActiveStep] = useState(firstStep);
  const classes = useStyles();
  const location = useLocation();
  const history = useHistory();

  useEffect(() => {
    const step = steps.find((z) => z.route === location.pathname);
    if (step) {
      setActiveStep(step);
    }
  }, [location.pathname]);

  const handleStepClick = (step) => {
    if (!step) return;
    setActiveStep(step);
    if (location.pathname === step.route) return;
    history.push(step.route);
  };

  return (
    <Card className={classes.stepperCard}>
      <Stepper
        activeStep={activeStep.id}
        orientation="horizontal"
        connector={<CustomStepConnector />}
      >
        {steps.map((step) => (
          <Step key={step.id}>
            <StepButton
              id={"appStepper_" + step.title}
              disabled={step.disabled}
              onClick={() => handleStepClick(step)}
            >
              <StepLabel StepIconComponent={ColorlibStepIcon}>
                {step.title}
              </StepLabel>
            </StepButton>
          </Step>
        ))}
      </Stepper>
    </Card>
  );
};

export default ApplicationStepper;