import ListItem from '@mui/material/ListItem';
import { styled } from '../styled';
import { ListItemStates } from './constants';
export const getBgColor = ({ selected, theme, }) => {
    if (selected) {
        return theme.palette.grey[200];
    }
    return 'transparent';
};
export const getColor = ({ theme, selected, listItemState, }) => {
    if (selected) {
        return theme.palette.primary[800];
    }
    if (listItemState === ListItemStates.Default) {
        return theme.palette.grey[900];
    }
    if (listItemState === ListItemStates.Hover) {
        return theme.palette.primary[800];
    }
    return theme.palette.grey[900];
};
export const StyledListItem = styled(ListItem, {
    shouldForwardProp: (prop) => prop !== 'selected',
}) `
  cursor: pointer;
  user-select: none;

  padding-left: ${({ theme }) => theme.spacing(3)};

  color: ${(props) => getColor({ ...props, listItemState: ListItemStates.Default })};

  background-color: ${(props) => getBgColor({ ...props })};
  border-radius: ${({ theme }) => theme.shape.small};

  :hover {
    color: ${(props) => getColor({
    ...props,
    listItemState: ListItemStates.Hover,
})};
  }
`;
