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 { useEffect, useState } from 'react';
import ClearIcon from '@mui/icons-material/Clear';

const steps = [
  'Request',
  'Review',
  'Approval',
  'Decline',
];

export default function HorizontalLinearAlternativeLabelStepper({data}) {
  const [active, setActive] = useState(0);
  const [status, SetStatus] = useState(null);
  let updatedSteps = [...steps];
  useEffect(() => {
    if (data && data.data) {
      if (data.data.status.status === 'requested') {
        setActive(1);
        updatedSteps = updatedSteps.filter(step => step !== 'Decline');
      }
      else if (data.data.status.status === 'reviewed') {
        setActive(2);
        updatedSteps = updatedSteps.filter(step => step !== 'Decline');
      }
      else if (data.data.status.status === 'approved')
      {
        setActive(3);
        updatedSteps = updatedSteps.filter(step => step !== 'Decline');
      }
      else if(data.data.status.status === 'declined')
      {
        setActive(4)
        updatedSteps = updatedSteps.filter(step => step !== 'Approval');
      }
    }
    SetStatus(updatedSteps);
  }, [data]);

  

  
  return (
    <Box sx={{ width: '100%', marginBottom: 2 }}>
      <Stepper activeStep={active} alternativeLabel>
        {status?.map((label) => (
          <Step key={label}>
            <StepLabel icon={label==='Decline' ? <ClearIcon sx={{ color: 'white', backgroundColor: 'red', borderRadius: '50%' }} /> : ''}>{label}</StepLabel>
          </Step>
        ))}
      </Stepper>
    </Box>
  );
}
