import {
  alpha,
  Box,
  Chip,
  ListItem,
  Popover,
  PopoverProps,
  styled,
} from '@mui/material'

export const StyledPopover = styled((props: PopoverProps) => (
  <Popover
    elevation={0}
    anchorPosition={{
      left: 0,
      top: 0,
    }}
    anchorOrigin={{ vertical: 'top', horizontal: 'left' }}
    transitionDuration={150}
    {...props}
  />
))<{ popoverWidth: number }>(({ theme, popoverWidth }) => ({
  '& .MuiPaper-root': {
    width: popoverWidth,
    borderRadius: '10px',
    boxShadow: '0px 4px 16px #0000000F',
    marginTop: '1px',
    '& .MuiList-root': {
      padding: 0,
      '& li': {
        height: '60px',
        borderBottom: (theme) => theme.borders.grayLight,
        ':hover': {
          backgroundColor: 'rgba(0, 0, 0, 0.025)',
        },
      },
      '& > :last-child': {
        borderBottom: 'none',
      },
    },
  },
}))

export const StyledListContainer = styled(Box)(({ theme }) => ({
  maxHeight: 'calc(100vh - 400px)',
  overflowY: 'auto',
  paddingTop: '10px',
  '&::-webkit-scrollbar': {
    width: '0.5em',
    height: '0.5em',
  },

  '&::-webkit-scrollbar-thumb': {
    backgroundColor: 'rgba(0, 0, 0, 0.15)',
    borderRadius: '3px',

    '&:hover': {
      background: 'rgba(0, 0, 0, 0.2)',
    },
  },
}))

export const StyledListItem = styled(ListItem)(({ theme }) => ({
  height: '40px',
  cursor: 'pointer',
  padding: '10px',
  background: 'none',
  '&.Mui-focused': {
    background: 'none',
  },
  '& .MuiCheckbox-root': {
    padding: 0,
    marginRight: '10px',
  },
}))

export const StyledAnchor = styled(Box)(({ theme }) => ({
  height: '50px',
  border: theme.borders.grayLight,
  borderRadius: '10px',
  padding: '14px',
  cursor: 'pointer',
  ':hover': {
    borderColor: alpha(theme.palette.common.black, 0.3),
  },
  transition: 'border-color 200ms ease',
  '& > .MuiTypography-root': {
    fontSize: '14px',
    pointerEvents: 'none',
  },
}))

export const StyledSelectedChip = styled(Chip)(({ theme }) => ({
  height: '40px',
  background: '#F8F8F8',
  border: '1px solid #D6D6D6',
  '& .MuiSvgIcon-root': {
    color: theme.palette.secondary.main,
    fontSize: '15px',
    margin: '0 14px',
    '&:hover': {
      color: theme.palette.secondary.main,
    },
  },
}))
