import Check from '@mui/icons-material/Check'
import { StepContent } from '@mui/material'
import Stack from '@mui/material/Stack'
import Step from '@mui/material/Step'
import StepConnector, {
  stepConnectorClasses,
} from '@mui/material/StepConnector'
import { StepIconProps } from '@mui/material/StepIcon'
import StepLabel from '@mui/material/StepLabel'
import Stepper from '@mui/material/Stepper'
import { styled } from '@mui/material/styles'

const QontoConnector = styled(StepConnector)(({ theme }) => ({
  [`&.${stepConnectorClasses.alternativeLabel}`]: {
    top: 10,
    left: 'calc(-50% + 16px)',
    right: 'calc(50% + 16px)',
  },
  [`&.${stepConnectorClasses.active}`]: {
    [`& .${stepConnectorClasses.line}`]: {
      borderColor: '#2975D0',
    },
  },
  [`&.${stepConnectorClasses.completed}`]: {
    [`& .${stepConnectorClasses.line}`]: {
      borderColor: '#2975D0',
    },
  },
  [`& .${stepConnectorClasses.line}`]: {
    borderColor: '#d1d1d2',
    borderTopWidth: 1,
    borderRadius: 1,
  },
}))

const ColorlibStepIconRoot = styled('div')<{
  ownerState: { completed?: boolean; active?: boolean }
}>(({ theme, ownerState }) => ({
  zIndex: 1,
  color: '#fff',
  width: 25,
  height: 25,
  display: 'flex',
  borderRadius: '50%',
  justifyContent: 'center',
  alignItems: 'center',
  border: '1px solid #12121234',
  ...(ownerState.active && {
    boxShadow: '0px 3px 25px #303E6334',
    border: 'none',
    '& .QontoStepIcon-circle': {
      height: '10px',
      width: '10px',
      borderRadius: '50%',
      background:
        'transparent linear-gradient(180deg, #2522AF 0%, #2976D0 100%)',
    },
  }),
  ...(ownerState.completed && {
    background: 'transparent linear-gradient(180deg, #2522AF 0%, #2976D0 100%)',
    '& .QontoStepIcon-completedIcon': {
      height: '15px',
      width: '15px',
    },
  }),
}))

function ColorlibStepIcon(props: StepIconProps) {
  const { active, completed, className } = props

  return (
    <ColorlibStepIconRoot
      ownerState={{ completed, active }}
      className={className}
    >
      {completed ? (
        <Check className="QontoStepIcon-completedIcon" />
      ) : (
        <div className="QontoStepIcon-circle" />
      )}
    </ColorlibStepIconRoot>
  )
}

export default function PaymentStepper({ steps, active }) {
  return (
    <Stack
      sx={{
        width: '100%',
      }}
    >
      <Stepper
        activeStep={active}
        connector={<QontoConnector />}
        sx={{
          '& .MuiStep-root': {
            padding: '0px',
          },
          '& .MuiStepLabel-root': {
            display: 'flex',
            flexDirection: 'column',
          },
          '& .MuiStep-root span': {
            padding: '0px',
          },
        }}
      >
        {steps.map((item, index) => (
          <Step key={item.label}>
            <StepLabel StepIconComponent={ColorlibStepIcon}></StepLabel>
            <StepContent>{item.component} </StepContent>
          </Step>
        ))}
      </Stepper>
    </Stack>
  )
}
