import React from 'react';
import { Stepper, Step, StepLabel, StepIconProps, Typography } from '@mui/material';
import AirplanemodeActiveIcon from '@mui/icons-material/AirplanemodeActive';
import StoreIcon from '@mui/icons-material/Store';
import bottleIcon from '../assets/icons/bottle-svgrepo-com-grey.svg';
import { Dewar } from "../../openapi";

// Constants
const ICON_STYLE = { width: 24, height: 24 };

// Define types for icons mapping.
const ICONS: { [key: number]: React.ReactElement } = {
    0: <img src={bottleIcon} alt="Bottle Icon" style={ICON_STYLE} />,
    1: <AirplanemodeActiveIcon style={ICON_STYLE} />,
    2: <StoreIcon style={ICON_STYLE} />,
};

// Define StepIconContainer to accept correct props and handle typing better
interface StepIconContainerProps extends React.HTMLAttributes<HTMLDivElement> {
    color: string;
}

const StepIconContainer: React.FC<StepIconContainerProps> = ({ color, children, ...rest }) => (
    <div style={{ color }} {...rest}>
        {children}
    </div>
);

type StepIconComponentProps = {
    icon: number;
    dewar: Dewar;
} & StepIconProps;

const StepIconComponent = ({ icon, dewar, ...props }: StepIconComponentProps) => {
    const { iconIndex, color } = getIconProperties(icon, dewar);

    return (
        <StepIconContainer color={color} {...props}>
            {ICONS[iconIndex]}
        </StepIconContainer>
    );
};

// Extracted function to determine icon properties
const getIconProperties = (icon: number, dewar: Dewar) => {
    const iconIndex = icon - 1;
    const color = determineIconColor(dewar, iconIndex);
    return { iconIndex, color };
};

// Original determineIconColor function remains unchanged
const determineIconColor = (dewar: Dewar, index: number) => {
    let color = 'grey';

    if (index === 0) {
        if (dewar.status === 'In Preparation') {
            color = 'blue';
        } else if (dewar.status === 'Ready for Shipping') {
            color = 'green';
        }
    }
    if (index === 1) {
        if (dewar.status === 'Ready for Shipping' && dewar.shippingStatus !== 'shipped') {
            color = 'blue';
        } else if (dewar.shippingStatus === 'shipped') {
            color = 'green';
        }
    }
    if (index === 2) {
        if (dewar.shippingStatus === 'shipped' && dewar.arrivalStatus !== 'arrived') {
            color = 'blue';
        } else if (dewar.arrivalStatus === 'arrived') {
            color = 'green';
        }
    }
    return color;
};

// Define your steps
const steps = ['In Preparation', 'Ready for Shipping', 'Arrived'];

const CustomStepper = ({ dewar }: { dewar: Dewar }) => {
    // Determine the current active step
    const activeStep = steps.indexOf(dewar.status) !== -1 ? steps.indexOf(dewar.status) : 0;

    return (
        <Stepper alternativeLabel activeStep={activeStep}>
            {steps.map((label, index) => (
                <Step key={label}>
                    <StepLabel
                        StepIconComponent={(stepProps) => <StepIconComponent {...stepProps} icon={index + 1} dewar={dewar} />}
                    >
                        {label}
                    </StepLabel>
                    <Typography variant="body2">
                        {index === 0 ? dewar.ready_date :
                            index === 1 ? dewar.shipping_date :
                                index === 2 ? dewar.arrival_date : ''}
                    </Typography>
                </Step>
            ))}
        </Stepper>
    );
};

export default CustomStepper;