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

export const useStyles = makeStyles((theme) => ({
  textFilter: {
    height: '32px',
    '& .MuiInputBase-root': {
      height: '32px',
      fontSize: pxToRem(12),
      paddingRight: 0,
    },
  },
  selectFilter: {
    boxShadow: 'none',
    '& .MuiOutlinedInput-notchedOutline': { border: 0 },
    '&.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline': {
      border: 0,
    },
    '&.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline': {
      border: 0,
    },
    height: '32px',
    fontSize: pxToRem(12),
    fontFamily: theme.fontFamily.semiBold,
    opacity: 0.56,
    fontWeight: 600,
    lineHeight: 'normal',
    '& .MuiSelect-select.MuiInputBase-input': {
      marginRight: theme.spacing(0),
      paddingRight: theme.spacing(0),
    },
  },
  ListItemTextClass: {
    paddingLeft: theme.spacing(0.6),
  },
  tableBodyRow: {
    cursor: 'pointer',
    backgroundColor: theme.palette.grey[0],
    borderRadius: '8px',
    '&.Mui-selected': {
      backgroundColor: theme?.palette?.primary?.highlight,
    },
  },
  tableHeadRow: {
    cursor: 'pointer',
    backgroundColor: theme.palette.grey[30],
    borderRadius: '8px',
    boxShadow: '0px 0px 0px #fff',
  },
  tableCheckbox: {
    '& .MuiSvgIcon-root': {
      width: '21px',
    },
  },
  muiTableBodyCell: {
    '& .MuiTableCell-root': {
      opacity: '0.7',
    },
    // lineHeight: '2.5rem',
    margin: theme.spacing(1),
    fontWeight: '500',
    fontSize: pxToRem(16),
    fontStretch: 'normal',
    fontStyle: 'normal',
    letterSpacing: 'normal',
    fontFamily: 'Inter-Medium',
    color: theme.palette.grey[10],
    textAlign: 'left',
  },
  muiTableHeadCell: {
    lineHeight: '2.0rem',
    fontSize: pxToRem(12),
    fontFamily: 'Inter-Bold',
    fontWeight: 'bold',
    fontStretch: 'normal',
    fontStyle: 'normal',
    letterSpacing: 'normal',
    alignContent: 'center',
    opacity: 0.56,
    color: theme.palette.grey[10],
    margin: theme.spacing(2.5),
    '& .Mui-TableHeadCell-Content': {
      '& .Mui-TableHeadCell-Content-Labels': {
        '& span': {
          '& .MuiIconButton-sizeSmall ': {
            display: 'none',
          },
        },
      },
    },
    '& .MuiTableRow-head': {
      backgroundColor: theme.palette.grey[0],
    },
    '& .MuiCollapse-root': {
      marginTop: '-32px',
    },
  },
  tableGrayRow: {
    cursor: 'pointer',
    backgroundColor: theme.palette.grey[26],
    borderRadius: theme.spacing(0.8),
  },
  tablehighlightRow: {
    cursor: 'pointer',
    backgroundColor: `${theme?.palette?.primary?.highlight} !important`,
    borderRadius: theme.spacing(0.8),
    '& .MuiTableCell-root': {
      backgroundColor: `${theme?.palette?.primary?.highlight} !important`,
    },
  },
  prevNextBtn: {
    display: 'flex',
    fontFamily: 'Inter-Regular',
    fontSize: pxToRem(14),
    justifyContent: 'center',
    paddingLeft: '12px',
    paddingRight: '12px',
    boxShadow: '0px 1px 2px 0px #e9eaeb',
    color: theme.palette.grey[10],
    border: '1px solid #E9EAEB',
    borderRadius: '8px',
  },
  menuItem: {
    paddingTop: theme.spacing(1.5),
    paddingBottom: theme.spacing(1.5),
    fontSize: pxToRem(14),
  },
  searchContainer: {
    display: 'flex',
    justifyContent: 'space-between',
  },
  searchBar: {
    margin: theme.spacing(2.0),
    // marginBottom: theme.spacing(2.8),
    backgroundColor: theme.palette.grey[0],
    '& .MuiOutlinedInput-root': {
      borderRadius: theme.spacing(1.0),
      // height: theme.spacing(4.0),
    },
    '&.MuiTextField-root': {
      width: theme.spacing(40.0),
      // height: theme.spacing(4.0),
      borderRadius: theme.spacing(1.0),
      // maxHeight: theme.spacing(4.0),
    },
    '& .MuiOutlinedInput-input::placeholder': {
      fontStyle: 'normal',
      fontSize: pxToRem(14),
      color: theme.palette.grey[10],
      opacity: 0.9,
    },
  },
  searchDatePicker: {
    margin: theme.spacing(2.0),
    backgroundColor: theme.palette.grey[0],
    borderRadius: theme.spacing(1.8),
    width: theme.spacing(32.0),
    '& .MuiOutlinedInput-root': {
      borderRadius: theme.spacing(1.8),
    },
    '&.MuiTextField-root': {
      width: theme.spacing(40.0),
      borderRadius: theme.spacing(1.8),
    },
    '& .MuiOutlinedInput-input::placeholder': {
      fontStyle: 'normal',
      fontSize: pxToRem(14),
      color: theme.palette.grey[10],
      opacity: 0.9,
    },
    '& .MuiPickersInputBase-root': {
      borderRadius: theme.spacing(1.4),
    },
    '& .MuiPickersSectionList-root': {
      padding: `12.5px !important`,
    },
  },
  searchIconImg: {
    width: theme.spacing(2.0),
    minWidth: theme.spacing(1.8),
  },
  pageSizeDropdown: {
    display: 'flex',
    margin: theme.spacing(2.0),
    marginBottom: theme.spacing(2.8),
  },
  dropDownLabel: {
    alignSelf: 'center',
    marginRight: theme.spacing(0.6),
  },
  perPageDropdown: {
    backgroundColor: theme.palette.grey[0],
    '& .MuiSelect-outlined': {
      borderRadius: theme.spacing(1.0),
      height: theme.spacing(1.0),
      minHeight: theme.spacing(1.6),
      display: 'flex',
      alignItems: 'center',
    },
    '&.MuiSelect-root': {
      height: theme.spacing(1.0),
      borderRadius: theme.spacing(1.0),
      maxHeight: theme.spacing(1.0),
    },
    '& .MuiSelect-icon': {
      color: theme.palette.primary.main,
    },
  },
}));
