import * as React from 'react';
import Box from '@mui/material/Box';
import Stepper from '@mui/material/Stepper';
import Step from '@mui/material/Step';
import StepLabel from '@mui/material/StepLabel';
import Button from '@mui/material/Button';

import LocationStep from './steps/location/LocationStep'
import SoilStep from './steps/soilvariant/SoilStep'
import HabitatStep from './steps/habitat/HabitatStep';
import ZoneStep from './steps/zone/ZoneStep';
import SummaryStep from './steps/summary/ZoneStep';
import ResultsStep from './steps/results/ResultsStep'

const steps = [
  { 'label': 'Select location', 'component': LocationStep },
  { 'label': 'Choose soil', 'component': SoilStep },
  { 'label': 'Choose habitat', 'component': HabitatStep },
  { 'label': 'Select zone', 'component': ZoneStep },
  { 'label': 'Summary', 'component': SummaryStep },
  { 'label': 'Results', 'component': ResultsStep }
];

export default function StepperWizard(props) {
  const [activeStep, setActiveStep] = React.useState(0);
  const [nextDisabled, setNextDisabled] = React.useState(true);

  const handleNext = () => {
    setActiveStep((prevActiveStep) => prevActiveStep + 1);
    setNextDisabled(true);
  };

  const handleBack = () => {
    setActiveStep((prevActiveStep) => prevActiveStep - 1);
    setNextDisabled(true);
  };

  const handleReset = () => {
    setActiveStep(0);
    setNextDisabled(true);
    props.resetFilterState()
  };

  let CurrentStep = activeStep >= steps.length ? steps[steps.length - 1].component : steps[activeStep].component;

  return (
    <Box sx={{ width: '100%', height: '100%', display: "flex", flexDirection: "column", overflow: "hidden" }}>
      <Stepper activeStep={activeStep} sx={{ paddingRight: '3vw', paddingLeft: '3vw', marginBottom: '2vw' }}>
        {steps.map((step) => {
          return (
            <Step key={step.label}>
              <StepLabel>{step.label}</StepLabel>
            </Step>
          );
        })}
      </Stepper>
      <React.Fragment>
        <CurrentStep {...props} setNextDisabled={setNextDisabled} />
        <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2, pb: 2, paddingRight: '3vw', paddingLeft: '3vw' }}>
          <Button
            color="inherit"
            disabled={activeStep === 0}
            onClick={handleBack}
            sx={{ mr: 1 }}
          >
            Back
          </Button>
          <Box sx={{ flex: '1 1 auto' }} />
          {activeStep === steps.length - 1 ?
            <Button onClick={handleReset}>Reset</Button> : <Button onClick={handleNext} disabled={nextDisabled}>Next</Button>}
        </Box>
      </React.Fragment>
    </Box>
  );
}