import { TimelineItem } from '@mui/lab'
import { alpha, Box, Card, styled, Typography } from '@mui/material'

export const StyledListItem = styled(Box, {
  shouldForwardProp: (prop) => prop !== 'isActive',
})<{ isActive: boolean }>(({ theme, isActive }) => ({
  maxWidth: '400px',
  height: '85px',
  display: 'flex',
  border: theme.borders.grayLight,

  alignItems: 'center',
  cursor: 'pointer',
  transition: 'all 0.2s ease',
  ':first-child': {
    borderTopRightRadius: '10px',
    borderTopLeftRadius: '10px',
  },
  '&:hover': {
    background: alpha(theme.palette.secondary.main, 0.02),
  },

  '& .left': {
    paddingLeft: '10px',
    marginRight: 'auto',
    '& .MuiTypography-root': {
      marginTop: '4px',
      '& > span': {
        color: theme.palette.secondary.main,
      },
    },
  },
  '& .right': {
    paddingRight: '15px',
    display: 'flex',
  },
  '&:before': {
    transition: 'all 0.2s ease',
    content: "''",
    height: '95%',
    width: '4px',
    borderRadius: '2px',
    background: 'transparent',
    ...(isActive && {
      background: theme.palette.common.yellow,
    }),
  },

  ...(isActive && {
    background: alpha(theme.palette.secondary.main, 0.035),
  }),
}))

export const StyledRemarksContainer = styled(Box)({
  height: '170px',
  borderRadius: '10px',
  border: '1px solid #1212121A',
  marginBottom: '20px ',
})
export const StyledLetterBackGround = styled(Box)({
  width: '60px',
  height: '60px',
  display: 'flex',
  backgroundColor: 'black',
  justifyContent: 'center',
  alignItems: 'center',
})
export const StyledNamecontainer = styled(Box)({
  display: 'flex',
  gap: '20px',
  alignItems: 'center',
  margin: '25px',
})

export const StyledLetter = ({ letter }) => {
  //letter?.split(' ')[0][0]}${letter?.split(' ')[1][0]
  const value = `${letter?.split(' ')[0][0]}`

  return (
    <StyledLetterBackGround>
      <Typography variant="h1" sx={{ color: 'white' }}>
        {value.toLocaleUpperCase()}
      </Typography>
    </StyledLetterBackGround>
  )
}
export const StyledBox = styled(Box)({
  width: '900px',
  height: 'calc(80vh - 100px)',
  overflowY: 'auto',
  '&::-webkit-scrollbar': {
    width: '0px',
    height: '0px',
  },
})

export const StyledTimelineBox = styled(Box)({
  borderRadius: '10px',
  border: '1px solid #1212121A',
  margin: '20px 0',
  padding: '20px',
  maxWidth: '600px',
})

export const StyledTimeLineItem = styled(TimelineItem)(({ theme }) => ({
  '& .MuiTimelineDot-root': {
    backgroundColor: theme.palette.secondary,
  },
  '&:before': {
    content: 'none',
  },
}))

export const StyledLeftContainer = styled(Box)({
  maxHeight: 'calc(80vh - 50px)',
  //  maxHeight: 'calc(80vh - 130px)', 1st default value
  overflowY: 'auto',
  '&::-webkit-scrollbar': {
    width: '0px',
    height: '0px',
  },
})

export const StyledCardData = styled(Card)({
  borderRadius: '4px',
  width: 'auto',
  backgroundColor: '#1E19F51A',
  padding: '6px 10px',
})

export const StyledBoxDetails = styled(Box)({
  display: 'flex',
  justifyContent: 'space-between',
  width: '950px',
  padding: '20px',
})
