import makeStyles from '@mui/styles/makeStyles';
import type { Theme } from '../@styles/theme-provider';

const createClasses = makeStyles<
  Theme,
  { badgeContent: number; userArrowCallback: boolean; isNotificationOpen: boolean | undefined }
>(theme => ({
  container: {
    height: '100%',
    display: 'flex',
    alignItems: 'center'
  },
  iconsContainer: {
    width: 'auto',
    height: '100%',
    alignItems: 'center',
    '& hr': {
      marginRight: theme.spacing(2),
      marginLeft: theme.spacing(2)
    }
  },
  userRole: {
    ...theme.typography.caption1,
    color: theme.palette.primary[400]
  },
  icon: props => {
    const { isNotificationOpen } = props;
    return {
      color: !isNotificationOpen ? theme.palette.primary[400] : theme.palette.secondary[500],
      display: 'flex',
      alignContent: 'center'
    };
  },
  arrow: props => {
    const { userArrowCallback } = props;

    return {
      cursor: userArrowCallback ? 'pointer' : 'default',
      color: theme.palette.primary[500],
      marginLeft: theme.spacing(1)
    };
  },
  badge: props => {
    const { badgeContent } = props;
    if (badgeContent > 99) {
      return {
        transform: 'scale(1) translate(70%, -50%)',
        padding: theme.spacing(0, 2)
      };
    }
    if (badgeContent >= 10) {
      return {
        transform: 'scale(1) translate(60%, -50%)',
        padding: theme.spacing(0, 1.5)
      };
    }
    return {};
  },
  buttonWithIcon: {
    marginRight: theme.spacing(-1),
    marginLeft: theme.spacing(-1),
    '&:hover': {
      backgroundColor: 'inherit'
    },
    '& > p': {
      color: theme.palette.secondary[500],
      textAlign: 'start',
      marginLeft: theme.spacing(0.5)
    }
  },
  buttonIcon: {
    color: theme.palette.secondary[500]
  },
  iconButtonLink: {
    '&:hover': {
      textDecoration: 'inherit'
    },
    '& .MuiButtonBase-root > *': {
      color: theme.palette.secondary[500]
    }
  },
  name: {
    color: theme.palette.primary[500]
  },
  userInfo: {
    display: 'flex',
    flexDirection: 'row',
    cursor: 'pointer'
  },
  notificationButton: {
    '&:hover': {
      backgroundColor: 'inherit'
    }
  },
  divider: {
    backgroundColor: 'inherit',
    backgroundImage: theme.palette.background.verticalDivider,
    border: 'none',
    width: 1
  }
}));

export default createClasses;