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:
,
1: ,
2: ,
};
// Define StepIconContainer to accept correct props and handle typing better
interface StepIconContainerProps extends React.HTMLAttributes {
color: string;
}
const StepIconContainer: React.FC = ({ color, children, ...rest }) => (
{children}
);
type StepIconComponentProps = {
icon: number;
dewar: Dewar;
} & StepIconProps;
const StepIconComponent = ({ icon, dewar, ...props }: StepIconComponentProps) => {
const { iconIndex, color } = getIconProperties(icon, dewar);
return (
{ICONS[iconIndex]}
);
};
// 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 (
{steps.map((label, index) => (
}
>
{label}
{index === 0 ? dewar.ready_date :
index === 1 ? dewar.shipping_date :
index === 2 ? dewar.arrival_date : ''}
))}
);
};
export default CustomStepper;