import { makeStyles } from '@mui/styles';
import { pxToRem } from '../../theme/typography';

export const useStyles = makeStyles((theme) => ({
  root: {
    fontFamily: 'Inter-Regular',
    overflowX: 'visible',
    [theme.breakpoints.down('md')]: {
      overflowX: 'hidden',
    },
  },
  contentBox: {
    marginTop: 0,
    overflow: 'auto',
    height: '80vh',
    paddingLeft: theme.spacing(4.0),
    paddingRight: theme.spacing(4.0),
  },
  contentBoxMobile: {
    marginTop: 0,
    paddingLeft: theme.spacing(1.0),
    paddingRight: theme.spacing(1.0),
  },
  mainContent: {
    margin: theme.spacing(0),
    width: '100%',
    overflowX: 'scroll',
    '&::-webkit-scrollbar': {
      height: '6px',
    },
  },
  sidebarMain: {
    overflow: 'auto',
    backgroundColor: theme.palette.grey[0],
    // width: '220px',
    paddingTop: theme.spacing(3.5),
    color: theme.palette.grey[0],
    height: '100vh',
    // boxShadow: '10px 0 10px -3px rgba(230,230,230,0.75)',
  },
  profileCardfirstTile: {
    paddingTop: theme.spacing(0),
  },
  sidebar: {
    position: 'sticky',
    width: '220px',
    height: '100vh',
    zIndex: 99,
    flexShrink: 0,
    backgroundColor: theme.palette.grey[19],
    boxShadow: '10px 0 10px -3px rgba(230,230,230,0.75)',
    [theme.breakpoints.down('md')]: {
      position: 'fixed',
    },
  },
  listMainDiv: {
    padding: theme.spacing(1.8),
    color: theme.palette.grey[0],
  },
  sidebarLinkIcons: {
    display: 'block',
    maxWidth: '230px',
    maxHeight: '95px',
    width: 'auto',
    // height: 'auto',
  },
  redDot: {
    width: '7px',
    height: '7px',
    backgroundColor: theme.palette.grey[0],
    borderRadius: '50%',
    display: 'inline-block',
  },
  listItem: {
    color: theme.palette.grey[0],
    display: 'flex',
    overflowWrap: 'break-word',
  },
  sidebarListImg: {
    marginLeft: theme.spacing(1.0),
    marginRight: theme.spacing(2.0),
    alignSelf: 'center',
  },
  activeLink: {
    backgroundColor: theme.palette.primary.main,
    paddingTop: theme.spacing(0.2),
    paddingBottom: theme.spacing(0.2),
    color: theme.palette.grey[0],
    borderRadius: '74px',
    '&:hover': {
      backgroundColor: theme.palette.primary.main,
    },
  },
  activeLinkTextColor: {
    color: theme.palette.grey[0],
  },
  normalLinkTextColor: {
    color: theme.palette.grey[10],
  },
  activeLinkChildrenBackgroundColor: {
    backgroundColor: theme.palette.primary.main,
  },
  normalLinkChildrenBackgroundColor: {
    backgroundColor: theme.palette.grey[10],
  },
  activeLinkChildrenTextColor: {
    color: theme.palette.primary.main,
  },
  normalLinkChildrenTextColor: {
    color: theme.palette.grey[10],
  },
  header: {
    paddingLeft: theme.spacing(4.0),
    paddingRight: theme.spacing(4.0),
  },
  headerMobile: {
    paddingLeft: theme.spacing(1.0),
    paddingRight: theme.spacing(1.0),
  },
  companyImgDiv: {
    display: 'flex',
    justifyContent: 'center',
    alignContent: 'center',
    marginBottom: theme.spacing(3.0),
  },
  companyImg: {
    width: '180px',
    minWidth: '130px',
  },
  drawerPaper: {
    width: '220px',
    marginTop: theme.spacing(6.3),
    background: theme.palette.background.sidebar,
    color: theme.palette.common.white,
    paddingBottom: theme.spacing(7),
    overflowY: 'scroll',
    '&::-webkit-scrollbar': {
      width: 0,
    },
  },
  routeList: {
    paddingTop: theme.spacing(3.2),
  },
  primaryTypographyProps: {
    '&.MuiTypography-body1': {
      fontSize: pxToRem(14),
      fontFamily: theme.fontFamily.medium,
      color: theme.palette.common.white,
      letterSpacing: pxToRem(0),
    },
    color: theme.palette.common.white,
    fontFamily: theme.fontFamily.medium,
    fontSize: pxToRem(14),
  },
  profileSection: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'flex-end',
    cursor: 'pointer',
    position: 'relative',
  },
  sidebarRouter: {
    textDecoration: 'none',
  },
  activeSidebarRouter: {
    textDecoration: 'none',
    '& .MuiListItem-root': {
      background: theme.palette.grey[16],
    },
  },
  childActiveSidebarRouter: {
    textDecoration: 'none',
    '& .MuiListItem-root': {
      background: theme.palette.grey[17],
    },
  },
  accordionDiv: {
    '&:before': {
      display: 'none',
    },
  },
  accordionSummary: {
    paddingRight: '20px',
    '&.MuiAccordionSummary-root': {
      paddingTop: '2px',
      paddingBottom: '2px',
      paddingLeft: '15px',
      minHeight: '35px !important',
      overflow: 'hidden',
      maxHeight: '30px',
    },
  },
  blackColor: {
    color: 'black',
  },
  logout: {
    backgroundColor: theme.palette.primary.highlight,
    color: theme.palette.primary.main,
    fontSize: pxToRem(14),
    fontWeight: 500,
    width: '100%',
    '&:hover': {
      backgroundColor: theme.palette.primary.highlight,
    },
  },
  divider: {
    width: '100%',
    marginBottom: theme.spacing(1.6),
  },
  zIndex: {
    zIndex: 999,
  },
  optionContainer: {
    borderRadius: theme.shape.borderRadius,
    cursor: 'pointer',
  },
  profileList: {
    padding: theme.spacing(2),
    width: '100%',
    maxWidth: theme.spacing(35),
    minWidth: theme.spacing(18),
    backgroundColor: theme.palette.background.paper,
    borderRadius: '10px',
    [theme.breakpoints.down('md')]: {
      minWidth: '100%',
    },
    '& .MuiListItemButton-root': {
      mt: 0.5,
    },
  },
  notificationHeader: {
    padding: theme.spacing(1.6),
  },
  notificationListHeader: {
    width: '310px',
    padding: theme.spacing(1.6),
    display: 'flex',
    justifyContent: 'space-between',
    overflow: 'auto',
  },
  unreadDiv: {
    width: '60%',
  },
  recentDiv: {
    padding: theme.spacing(1.6),
    paddingTop: theme.spacing(2.0),
    paddingBottom: theme.spacing(2.0),
  },
  markAsReadDiv: {
    backgroundColor: theme.palette.grey[31],
    width: '40%',
    textAlign: 'center',
    cursor: 'pointer',
  },
  highlightBox: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: theme.palette.primary.highlight,
    borderRadius: '6px',
    padding: theme.spacing(0.8),
  },
  option: {
    display: 'flex',
    justifyContent: 'space-between',
    marginLeft: theme.spacing(1.2),
    marginRight: theme.spacing(1.2),
    width: '100%',
    alignItems: 'center',
  },
  optionText: {
    fontFamily: theme.fontFamily.medium,
  },
  profileName: {
    fontFamily: theme.fontFamily.bold,
    marginRight: theme.spacing(1.2),
    marginLeft: theme.spacing(1.2),
    letterSpacing: 'normal',
    fontSize: pxToRem(14),
    fontWeight: 'bold',
  },
  listClass: {
    cursor: 'pointer',
    display: 'flex',
    justifyContent: 'center',
  },
  avatar: {
    width: '36px',
    height: '36px',
  },
  listIcon: {
    width: '17%',
  },
  iconImage: {
    marginLeft: 'auto',
    marginRight: 'auto',
  },
  listText: {
    paddingLeft: theme.spacing(0.6),
  },
  accountCircleOutlined: {
    stroke: theme.palette.primary.highlight,
    strokeWidth: 1,
    width: '18px',
    height: '18px',
  },
  sidebarAccordion: {
    backgroundColor: 'transparent',
    '&.Mui-expanded': {
      backgroundColor: theme.palette.grey[16],
    },
    '&::before': {
      height: '0px',
    },
  },
  headerMainDiv: {
    display: 'flex',
    justifyContent: 'flex-end',
    marginLeft: theme.spacing(1),
    fontSize: pxToRem(14),
    paddingTop: theme.spacing(2.4),
    paddingBottom: theme.spacing(2.4),
    alignItems: 'center',
  },
  headerMainDivMobile: {
    display: 'flex',
    justifyContent: 'space-between',
    marginLeft: theme.spacing(0.5),
    marginRight: theme.spacing(0.5),
    fontSize: pxToRem(14),
    paddingTop: theme.spacing(2.4),
    paddingBottom: theme.spacing(2.4),
    alignItems: 'center',
  },
  dividerDiv: {
    width: '85%',
    margin: 'auto',
  },
  profileIcon: {
    width: '42px',
    minWidth: '40px',
    minHeight: '40px',
    height: '42px',
    borderRadius: '50%',
  },
  onlineDot: {
    position: 'absolute',
    width: '14px',
    height: '14px',
    bottom: '-2px',
    right: '-2px',
    backgroundColor: theme.palette.grey[32],
    border: '2px solid white',
    borderRadius: '50%',
  },
  notificationImg: {
    width: '42px',
    height: '42px',
    minHeight: '40px',
    minWidth: '40px',
  },
  notificationDot: {
    position: 'absolute',
    width: '14px',
    height: '14px',
    top: '4px',
    right: '20px',
    backgroundColor: theme.palette.primary.main,
    border: '2px solid white',
    borderRadius: '50%',
  },
  profilDiv: {
    display: 'flex',
    paddingLeft: theme.spacing(2.0),
  },
  notificationSection: {
    paddingLeft: theme.spacing(1.0),
    cursor: 'pointer',
  },
  notificationDiv: {
    paddingRight: theme.spacing(1.2),
    position: 'relative',
  },
  notificationList: {
    width: '320px',
    maxHeight: '65vh',
    overflow: 'auto',
  },
  listOuterDiv: {
    backgroundColor: theme.palette.grey[33],
    paddingLeft: theme.spacing(0.8),
    paddingRight: theme.spacing(0.8),
    paddingBottom: theme.spacing(0.8),
  },
  recentListOuterDiv: {
    paddingLeft: theme.spacing(0.8),
    paddingRight: theme.spacing(0.8),
    paddingBottom: theme.spacing(0.8),
  },
  notificationListImgDiv: {
    display: 'flex',
  },
  notificationHeadText: {
    fontSize: pxToRem(14),
  },
  notificationSubHeadText: {
    fontSize: pxToRem(12),
    backgroundColor: theme.palette.grey[31],
  },
  centerAlignClass: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    paddingLeft: theme.spacing(0.4),
    paddingRight: theme.spacing(0.6),
  },
  imgHeightWidth: {
    width: '55%',
  },
  unreadListBody: {
    height: '70px',
    display: 'flex',
    alignItems: 'center',
    cursor: 'pointer',
  },
  contentDiv: {
    fontSize: pxToRem(12),
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    display: '-webkit-box',
    WebkitLineClamp: 2,
    WebkitBoxOrient: 'vertical',
    width: '250px',
  },
  timestamp: {
    fontSize: pxToRem(11),
    color: '#524A3ED1',
  },
  headerAndMainContentBox: {
    backgroundColor: theme.palette.grey[19],
  },
  textDecorationNone: {
    textDecoration: 'none',
  },
  marginBottom: {
    marginBottom: theme.spacing(1.5),
  },
  dotOuterDiv: {
    display: 'flex',
    alignItems: 'center',
    cursor: 'pointer',
  },
  dotInnerDiv: {
    width: '7px',
    height: '7px',
    borderRadius: '50%',
    marginRight: '8px',
  },
  disabledLink: {
    pointerEvents: 'none',
    color: 'grey',
  },
  functionalityNotAvailablePopupBox: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    flexDirection: 'column',
    width: '100%',
    paddingLeft: theme.spacing(2.3),
    paddingRight: theme.spacing(2),
  },
  functionalityNotAvailableImage: {
    width: '100%',
    height: '50px',
    [theme.breakpoints.up('md')]: {
      width: '167px',
      height: '95px',
    },
  },
  functionalityNotAvailableTextBold: {
    fontFamily: 'Inter',
    fontSize: '30px',
    fontWeight: 700,
    lineHeight: '41px',
    textAlign: 'center',
    marginTop: theme.spacing(1.7),
  },
  functionalityNotAvailableText: {
    fontFamily: 'Inter',
    fontSize: pxToRem(14),
    fontWeight: 500,
    lineHeight: pxToRem(17.6),
    textAlign: 'center',
    marginTop: theme.spacing(2.1),
  },
  functionalityNotAvailableButton: {
    width: '186px',
    height: '48px',
    backgroundColor: theme?.palette?.primary?.main,
    color: theme?.palette?.common?.white,
    fontSize: pxToRem(16),
    marginTop: theme.spacing(2.2),
    fontFamily: theme?.fontFamily?.semiBold,
    border: 'none',
    borderRadius: '12px',
    cursor: 'pointer',
    display: 'flex',
    justifyContent: 'center',
  },
}));
