import { Check } from '@mui/icons-material';
import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord';
import { Box, Stack, Step, StepLabel, Stepper } from '@mui/material';
import StepConnector, {
  stepConnectorClasses,
} from '@mui/material/StepConnector';
import { styled } from '@mui/styles';
import React from 'react';
import { useStyles } from './styles/customStepperStyles';

const CustomStepper = ({ activeStep }) => {
  const classes = useStyles();
  const steps = ['Your details', 'Clinic details'];

  const ColorlibConnector = styled(StepConnector)(({ theme }) => ({
    [`&.${stepConnectorClasses.active}`]: {
      [`& .${stepConnectorClasses.line}`]: {
        backgroundColor: theme.palette.primary.main,
      },
    },
    [`&.${stepConnectorClasses.completed}`]: {
      [`& .${stepConnectorClasses.line}`]: {
        backgroundColor: theme.palette.primary.main,
      },
    },
    [`& .${stepConnectorClasses.line}`]: {
      height: 2,
      zIndex: 1,
      marginTop: theme.spacing(-1.2),
      width: 'calc(inherit +100%)',
      marginLeft: theme.spacing(-2.2),
      marginRight: theme.spacing(-4.5),
      backgroundColor: theme.palette.grey[29],
    },
  }));

  // Create a styled component that doesn't pass ownerState to DOM
  const ColorlibStepIconRoot = styled('div')(({ theme, completed, active }) => ({
    backgroundColor: theme.palette.grey[29],
    color: theme.palette.common.white,
    width: 24,
    height: 24,
    display: 'flex',
    borderRadius: '50%',
    justifyContent: 'center',
    alignItems: 'center',
    ...(active && {
      backgroundColor: theme.palette.primary.main,
    }),
    ...(completed && {
      backgroundColor: theme.palette.primary.main,
    }),
  }));

  function ColorlibStepIcon(props) {
    const { active, completed } = props;

    const icons = {
      1: completed ? (
        <Check className={classes.icons} />
      ) : (
        <FiberManualRecordIcon className={classes.icons} />
      ),
      2: completed ? (
        <Check className={classes.icons} />
      ) : (
        <FiberManualRecordIcon className={classes.icons} />
      ),
    };

    return (
      <ColorlibStepIconRoot
        completed={completed}
        active={active}
        className={classes.stepperLabel}
      >
        {icons[String(props.icon)]}
      </ColorlibStepIconRoot>
    );
  }
  return (
    <Stack className={classes.stack}>
      <Box container="true" className={classes.stepperBox}>
        <Stepper
          className={classes.stepperMain}
          activeStep={activeStep}
          connector={<ColorlibConnector />}
        >
          {steps.map((label) => (
            <Step key={label}>
              <StepLabel StepIconComponent={ColorlibStepIcon}>
                {label}
              </StepLabel>
            </Step>
          ))}
        </Stepper>
      </Box>
    </Stack>
  );
};

export default CustomStepper;
