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

export interface ClassesProps {
  drawerWidthOpen: string;
  drawerWidthClose: string;
  open?: DrawerStates;
  hideHeader?: boolean;
}

const createClasses = makeStyles<Theme, ClassesProps>(theme => ({
  drawerRoot: {
    overflow: 'visible',
    backgroundColor: theme.palette.secondary[700],
    backgroundImage: theme.palette.navigationSidebar.background,
    color: theme.palette.common.white,
    border: 'none',
    '& a': {
      whiteSpace: 'nowrap',
      '&:hover': {
        textDecoration: 'none'
      }
    },
    height: '100vh'
  },
  drawerOpen: props => {
    const { drawerWidthOpen, open = 'closed' } = props;
    return {
      boxShadow: open === 'open' ? theme.shadows[12] : 'none',
      position: 'sticky',
      top: 0,
      bottom: 0,
      width: drawerWidthOpen
    };
  },
  drawerClose: props => {
    const { drawerWidthClose } = props;
    return {
      position: 'sticky',
      top: 0,
      bottom: 0,
      width: drawerWidthClose,
      alignItems: 'flex-start',
      '& #listItemText, #listItemIcon, #innerListItem, #innerListItemDropDownContainer, #new': {
        display: 'none'
      }
    };
  },
  padding0: {
    padding: '0 !important'
  },
  mspIcon: {
    padding: theme.spacing(1)
  },
  iconContainer: {
    backgroundColor: theme.palette.secondary[100],
    width: theme.spacing(4),
    height: theme.spacing(4),
    margin: '0 auto',
    borderRadius: '50%',
    marginBottom: theme.spacing(2)
  },
  listItem: {
    ...theme.typography.interactive1,
    cursor: 'pointer',
    minHeight: '48px',
    paddingLeft: theme.spacing(3),
    color: theme.palette.navigationSidebar.fontColor,
    marginBottom: theme.spacing(0.125),
    fill: theme.palette.navigationSidebar.icon,
    '&:hover': {
      '&:before': {
        borderRight: `${theme.spacing(0.5)} solid ${theme.palette.navigationSidebar.fontSelected}`,
        borderRadius: theme.spacing(0, 0.5, 0.5, 0),
        content: "''",
        position: 'absolute',
        height: '100%',
        width: theme.spacing(0.5),
        left: 0,
        boxSizing: 'inherit'
      },
      '& > .MuiListItemIcon-root': {
        paddingRight: theme.spacing(0.875),
        paddingLeft: theme.spacing(0.125)
      },
      '& > a > .MuiListItemIcon-root': {
        paddingRight: theme.spacing(0.875),
        paddingLeft: theme.spacing(0.125)
      }
    },
    '&:focus-visible': {
      color: theme.palette.navigationSidebar.fontColor,
      '& path': {
        fill: theme.palette.navigationSidebar.icon
      }
    }
  },
  listItemIcon: {
    paddingRight: theme.spacing(1),
    color: theme.palette.navigationSidebar.icon,
    transition: theme.transitions.create('padding', {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.enteringScreen
    }),
    '& .injected-svg': {
      width: '16px'
    },
    '& > div > div': {
      display: 'flex'
    }
  },
  listItemSelected: {
    '&:before': {
      borderRight: `${theme.spacing(0.5)} solid ${theme.palette.navigationSidebar.fontSelected}`,
      borderRadius: theme.spacing(0, 0.5, 0.5, 0),
      content: "''",
      position: 'absolute',
      height: '100%',
      width: theme.spacing(0.5),
      left: 0,
      boxSizing: 'inherit'
    },
    '& > .MuiListItemIcon-root': {
      paddingRight: theme.spacing(0.875),
      paddingLeft: theme.spacing(0.125)
    },
    '& > a > .MuiListItemIcon-root': {
      paddingRight: theme.spacing(0.875),
      paddingLeft: theme.spacing(0.125)
    },
    backgroundColor: theme.palette.navigationSidebar.hoverActive
  },
  listItemSeparator: props => {
    const { drawerWidthClose, drawerWidthOpen, open = 'closed' } = props;

    if (open === 'closed') {
      return {
        padding: theme.spacing(2, 1, 2),
        width: `calc(${drawerWidthClose} - 1px)`
      };
    }

    return {
      padding: theme.spacing(2, 3, 2),
      width: `calc(${drawerWidthOpen} - 1px)`
    };
  },
  listItemTitle: props => {
    const { open = 'closed' } = props;

    if (open === 'closed') {
      return {
        display: 'none'
      };
    }

    return {
      ...theme.typography.caption1,
      padding: theme.spacing(1, 3, 2),
      color: theme.palette.navigationSidebar.titleColor,
      whiteSpace: 'nowrap'
    };
  },
  subListItemContainer: {
    minHeight: theme.spacing(4),
    maxHeight: theme.spacing(4),
    padding: theme.spacing(0, 1, 0, 3),
    '&[class*=MuiListItem-gutters]:not(:last-child)': {
      marginBottom: theme.spacing(0.5)
    },
    '& a': {
      color: theme.palette.navigationSidebar.fontColor
    }
  },
  subListItem: {
    color: theme.palette.navigationSidebar.fontColor,
    cursor: 'pointer',
    width: '100%',
    height: theme.spacing(4),
    paddingLeft: theme.spacing(3),
    paddingRight: theme.spacing(1),
    borderRadius: theme.spacing(0.5),
    display: 'flex',
    alignItems: 'center',
    whiteSpace: 'nowrap',
    '&:hover': {
      backgroundColor: theme.palette.navigationSidebar.hoverActive,
      color: theme.palette.navigationSidebar.fontColor,
      textDecoration: 'none'
    },
    '&:focus-visible': {
      backgroundColor: theme.palette.navigationSidebar.hoverActive,
      color: theme.palette.navigationSidebar.fontColor,
      textDecoration: 'none'
    }
  },
  subListItemSelected: {
    backgroundColor: theme.palette.navigationSidebar.hoverActive
  },
  subSubListItem: {
    paddingLeft: theme.spacing(2),
    marginLeft: theme.spacing(2),
    height: 'inherit',
    display: 'flex',
    alignItems: 'center'
  },
  innerListItemDropDownContainer: {
    ...theme.typography.subtitle1,
    cursor: 'pointer',
    height: theme.spacing(4),
    padding: theme.spacing(0, 1, 0, 3),
    '&[class*=MuiListItem-gutters]:not(:last-child)': {
      marginBottom: theme.spacing(0.5)
    }
  },
  innerListItemDropDownOpen: {
    color: theme.palette.navigationSidebar.fontSelected,
    '&:hover': {
      backgroundColor: 'unset',
      color: theme.palette.navigationSidebar.fontSelected
    }
  },
  innerListItemDropDownSelected: {
    color: theme.palette.navigationSidebar.fontSelected
  },
  innerListItemContainer: {
    height: theme.spacing(4),
    padding: theme.spacing(0, 1, 0, 4),
    '&[class*=MuiListItem-gutters]:not(:last-child)': {
      marginBottom: theme.spacing(0.5)
    },
    '& a': {
      color: theme.palette.navigationSidebar.fontColor
    }
  },
  iconSelected: {
    '& path': {
      fill: theme.palette.navigationSidebar.fontSelected
    }
  },
  linkRoot: {
    display: 'flex',
    alignItems: 'center',
    padding: theme.spacing(1, 2, 1, 3),
    width: '100%',
    '&:hover': {
      color: 'inherit'
    }
  },
  marginVertical4: {
    marginBottom: theme.spacing(0.5),
    marginTop: theme.spacing(0.5)
  },
  itemWrap: {
    whiteSpace: 'nowrap',
    '& > span': {
      ...theme.typography.h5
    }
  },
  listWrap: props => {
    return {
      margin: props.hideHeader ? '32px 0 0 0' : 0,
      overflow: 'auto'
    };
  },
  listNavigation: {
    margin: 0,
    '& > .MuiListItem-root': {
      '&:hover': {
        color: theme.palette.navigationSidebar.fontColor,
        backgroundColor: theme.palette.navigationSidebar.hoverActive
      }
    }
  },
  logoContainer: {
    paddingLeft: theme.spacing(2.25),
    paddingTop: theme.spacing(2),
    marginBottom: theme.spacing(5),
    lineHeight: 0
  },
  mspClientPicker: {
    '& > div.MuiInputBase-root': {
      margin: '0 auto 16px auto',
      width: '200px'
    }
  },
  new: {
    backgroundColor: theme.palette.navigationSidebar.newBg,
    color: theme.palette.navigationSidebar.newText,
    borderRadius: theme.spacing(2),
    padding: theme.spacing(0.25, 1),
    fontSize: '11px',
    height: theme.spacing(2.5)
  },
  docked: {
    width: 0,
    height: '100%'
  },
  listItemOpen: {
    color: theme.palette.navigationSidebar.fontSelected,
    '& $listItemIcon': {
      color: theme.palette.navigationSidebar.fontSelected
    },
    '&:before': {
      borderRight: `${theme.spacing(0.5)} solid ${theme.palette.navigationSidebar.fontSelected}`,
      borderRadius: theme.spacing(0, 0.5, 0.5, 0),
      content: "''",
      position: 'absolute',
      height: '100%',
      width: theme.spacing(0.5),
      left: 0,
      boxSizing: 'inherit'
    },
    '&:hover': {
      '& $listItemIcon': {
        color: theme.palette.navigationSidebar.icon
      },
      '& > .MuiListItemIcon-root': {
        paddingRight: theme.spacing(1),
        paddingLeft: 0
      },
      '& > a > .MuiListItemIcon-root': {
        paddingRight: theme.spacing(1),
        paddingLeft: 0
      }
    }
  }
}));

export default createClasses;