import { ChevronRight } from '@mui/icons-material'
import {
  Box,
  ListItemButtonProps,
  ListItemIcon,
  ListItemText,
  ListItemButton as MuiListItemButton,
  styled,
} from '@mui/material'
import { ReactNode } from 'react'

interface Props extends ListItemButtonProps {
  hasChildren?: boolean
  isActive?: boolean
  label: String
  icon?: any
}

export const ListItemButton = ({
  isActive,
  hasChildren,
  onClick,
  label,
  icon: Icon,
}: Props) => {
  return (
    <StyledListItemButton isActive={isActive} onClick={onClick}>
      {Icon ? (
        <ListItemIcon>{<Icon />}</ListItemIcon>
      ) : (
        <Box minWidth={16}></Box>
      )}
      <ListItemText primary={label} />
    </StyledListItemButton>
  )
}

export const StyledChevronIcon = styled(ChevronRight)<{ open: boolean }>(
  ({ theme, open }) => ({
    transform: open ? 'rotate(90deg)' : 'rotate(0deg)',
    transition: 'transform 0.2s ease-in-out',
  }),
)

export const StyledListItemButton = styled(MuiListItemButton)<{
  isActive: boolean
  children: ReactNode
  dropDown?: boolean
}>(({ theme, isActive, dropDown = false }) => ({
  gap: '10px',
  fontWeight: 'bold',
  padding: '8px 20px',
  backgroundColor: isActive && '#1d1d1d',
  '&:hover': {
    backgroundColor: isActive && '#1d1d1d',
  },
  '&:after': {
    content: '""',
    position: 'absolute',
    height: '100%',
    left: 0,
    top: 0,
    width: isActive ? '6px' : 0,
    opacity: isActive ? (dropDown ? 0 : 1) : 0,
    transition: theme.transitions.create(['opacity', 'width']),
    background: theme.palette.common.yellow,
    borderTopRightRadius: '3px',
    borderBottomRightRadius: '3px',
  },
  '&.MuiButton-endIcon, &.MuiButton-startIcon': {
    transition: theme.transitions.create(['color']),

    '&.MuiSvgIcon-root': {
      fontSize: 'inherit',
      transition: 'none',
    },
  },
  '& .MuiSvgIcon-root': {
    fontSize: theme.typography.pxToRem(20),
    marginRight: theme.spacing(1),
    // color: isActive
    //   ? theme.sidebar.menuItemColorActive
    //   : theme.sidebar.menuItemIconColor,
  },
  '& .MuiTypography-root': {
    color: theme.palette.common.white,
  },
  '& svg': {
    color: theme.palette.common.white,
  },
  '& .MuiListItemIcon-root': {
    minWidth: 0,
    maxWidth: '1rem',
  },
}))
