import { alpha, Box, styled } from '@mui/material'

export const ProfileBox = styled(Box)(({
  theme,
  'aria-selected': selected,
}) => {
  const { mode, primary, text } = theme.palette
  const key = `${mode}-${!!selected}`

  const backgroundColor = mode === 'light' ? '#ffffff' : '#282A36'

  const color = {
    'light-true': text.secondary,
    'light-false': text.secondary,
    'dark-true': alpha(text.secondary, 0.65),
    'dark-false': alpha(text.secondary, 0.65),
  }[key]!

  const h2color = {
    'light-true': primary.main,
    'light-false': text.primary,
    'dark-true': primary.main,
    'dark-false': text.primary,
  }[key]!

  const borderSelect = {
    'light-true': {
      borderLeft: `3px solid ${primary.main}`,
      width: `calc(100% + 3px)`,
      marginLeft: `-3px`,
    },
    'light-false': {
      width: '100%',
    },
    'dark-true': {
      borderLeft: `3px solid ${primary.main}`,
      width: `calc(100% + 3px)`,
      marginLeft: `-3px`,
    },
    'dark-false': {
      width: '100%',
    },
  }[key]

  return {
    position: 'relative',
    display: 'block',
    cursor: 'pointer',
    textAlign: 'left',
    padding: '8px 16px',
    boxSizing: 'border-box',
    backgroundColor,
    ...borderSelect,
    borderRadius: '8px',
    color,
    '& h2': { color: h2color },
  }
})
