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>
    );
}