import { Done } from '@mui/icons-material'
import { alpha, Box, styled, Typography } from '@mui/material'
import { CSSProperties, useEffect, useState } from 'react'

export const StyledStepsContainer = styled(Box)(({ theme }) => ({
  padding: '10px 0',
  display: 'flex',
  justifyContent: 'center',
  gap: '10px',
}))

export const StyledStep = styled(Box, {
  shouldForwardProp: (prop) =>
    !['active', 'disableHover'].includes(prop as string),
})<{ active: boolean; disableHover: boolean }>(
  ({ theme, active, disableHover }) => ({
    width: '100px',
    position: 'relative',
    display: 'grid',
    gridTemplateRows: '50px 1fr',
    placeItems: 'center',
    gap: '10px',
    cursor: disableHover ? 'default' : 'pointer',
    padding: '6px',
    borderRadius: '10px',
    transition: 'background 0.3s ease',
    '&:hover': {
      background: disableHover ? 'none' : theme.palette.secondary.light,
    },
    '& .MuiTypography-root': {
      color: alpha(theme.palette.secondary.main, active ? 1 : 0.6),
      fontWeight: 'bold',
      textAlign: 'center',
    },
    '& .connector': {
      position: 'absolute',
      top: '30%',
      left: '50%',
      width: '100%',
      borderBottom: `1px dashed #1212128A`,
    },
    '&:last-of-type': {
      '& .connector': {
        display: 'none',
      },
    },
  }),
)

export const StyledCircle = styled(Box, {
  shouldForwardProp: (prop) => prop !== 'active',
})<{ active: boolean }>(({ theme, active }) => ({
  height: '50px',
  width: '50px',
  borderRadius: '50%',
  background: 'white',
  zIndex: 30,
  backgroundImage: `url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='100' ry='100' stroke='gray' stroke-width='1.2' stroke-dasharray='8' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e")`,
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  ...(active && {
    border: `1px solid ${theme.palette.primary.main}`,
    backgroundImage: 'none',
  }),
}))

interface StepsHeaderProps {
  steps: { step: number; label: string }[]
  onChange: (step: number) => void
  activeStep?: number
  disableClick?: boolean
  containerStyles?: CSSProperties
  stepStyles?: CSSProperties
}

export default function StepsHeader({
  steps,
  onChange,
  activeStep: _activeStep = 0,
  disableClick = false,
  containerStyles,
  stepStyles,
}: StepsHeaderProps) {
  const [activeStep, setActiveStep] = useState(0)

  const handleClick = (step) => {
    setActiveStep(step)
    onChange(step)
  }

  useEffect(() => {
    setActiveStep(_activeStep)
  }, [_activeStep])
  return (
    <StyledStepsContainer sx={{ ...containerStyles }}>
      {steps?.map((item) => (
        <StyledStep
          active={activeStep > item?.step - 1}
          disableHover={disableClick}
          onClick={() => {
            if (disableClick) return
            handleClick(item.step)
          }}
          key={item?.step}
          sx={{ ...stepStyles }}
        >
          <StyledCircle active={activeStep > item?.step - 1}>
            {activeStep > item?.step - 1 && <Done color="success" />}
          </StyledCircle>
          <Typography variant="body1" sx={{ fontSize: '13px' }}>
            {item?.label}
          </Typography>
          <Box className="connector"></Box>
        </StyledStep>
      ))}
    </StyledStepsContainer>
  )
}
