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

export const useStyles = makeStyles((theme) => ({
  mainGrid: {
    marginTop: theme.spacing(2),
    display: 'flex',
  },
  outerGrid: {
    width: '31%',
    backgroundColor: 'white',
    border: '1px solid',
    borderColor: theme.palette.grey[7],
    borderRadius: theme.shape.borderRadiusComponent,
  },
  disableOuterGrid: {
    opacity: 0.5,
    width: '31%',
    backgroundColor: 'white',
    border: '1px solid',
    borderColor: theme.palette.grey[7],
    borderRadius: theme.shape.borderRadiusComponent,
  },
  enableApprovedDocument: {
    width: '31%',
    backgroundColor: 'white',
    border: '1px solid',
    borderColor: theme.palette.grey[7],
    borderRadius: theme.shape.borderRadiusComponent,
  },
  outerBox: {
    padding: theme.spacing(2),
  },
  titleOfBox: {
    color: theme.palette.grey[40],
    fontSize: pxToRem(14),
    fontFamily: theme.fontFamily.semiBold,
  },
  logoPreviewImageBox: {
    position: 'relative',
    height: 176,
    width: 176,
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    overflow: 'hidden',
    margin: 'auto',
    marginTop: theme.spacing(2),
  },
  imageBox: {
    position: 'relative',
    height: 160,
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    overflow: 'hidden',
    marginTop: theme.spacing(2),
  },
  image: {
    maxWidth: '100%',
    maxHeight: '100%',
    width: 'auto',
    height: 'auto',
    margin: theme.spacing(0),
  },
  documentNumberAndNameLabelBox: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  documentNumberAndNameLabel: {
    fontSize: pxToRem(20),
    fontWeight: 600,
    color: theme.palette.common.black,
    overflow: 'hidden',
    whiteSpace: 'pre-wrap',
  },
  updatedDate: {
    marginTop: theme.spacing(0.5),
    textAlign: 'left',
    fontSize: pxToRem(12),
  },
  acceptButton: {
    color: theme.palette.grey[32],
    fontFamily: theme.fontFamily.regular,
    border: '1px solid',
    borderColor: theme.palette.grey[7],
    borderRadius: theme.shape.borderRadiusComponent,
    '&:hover': {
      backgroundColor: theme.palette.green.light,
    },
  },
  disableAcceptedButton: {
    color: theme.palette.common.white,
    backgroundColor: theme.palette.grey[32],
    fontFamily: theme.fontFamily.regular,
    borderRadius: theme.shape.borderRadiusComponent,
    cursor: 'default',
    '&:hover': {
      backgroundColor: theme.palette.grey[32],
    },
  },
  rejectButton: {
    border: '1px solid',
    borderColor: theme.palette.grey[7],
    fontFamily: theme.fontFamily.regular,
    borderRadius: theme.shape.borderRadiusComponent,
  },
  disableRejectedButton: {
    cursor: 'default',
    backgroundColor: theme.palette.primary.main,
    color: theme.palette.common.white,
    fontFamily: theme.fontFamily.regular,
    borderRadius: theme.shape.borderRadiusComponent,
    '&:hover': {
      backgroundColor: theme.palette.primary.main,
    },
  },
  rejectButtonIcon: {
    fontSize: pxToRem(22),
    marginRight: theme.spacing(0.6),
  },
  rejectedButtonIcon: {
    color: theme.palette.common.white,
    fontSize: pxToRem(22),
    marginRight: theme.spacing(0.6),
  },
  acceptButtonIcon: {
    fontSize: pxToRem(22),
    marginRight: theme.spacing(0.6),
  },
  acceptedButtonIcon: {
    color: theme.palette.common.white,
    fontSize: pxToRem(22),
    marginRight: theme.spacing(0.6),
  },
  buttonBox: {
    margin: 'auto',
    marginTop: theme.spacing(2),
    display: 'flex',
    justifyContent: 'space-evenly',
    alignItems: 'center',
    width: '80%',
    textAlign: 'center',
  },
  verifyIcon: {
    fontSize: pxToRem(20),
    color: theme.palette.grey[54],
  },
  onImageButton: {
    border: '1px solid',
    borderColor: theme.palette.grey[7],
    borderRadius: theme.shape.borderRadiusComponent,
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    position: 'absolute',
    top: '50%',
    left: '50%',
    marginLeft: 'auto',
    transform: 'translate(-50%, -50%)',
    backgroundColor: 'rgba(0,0,0,0.3)',

    width: '100.2%',
    height: '100.2%',
  },
  eyeButton: {
    padding: pxToRem(3),
    borderRadius: theme.shape.borderRadius,
    border: 'none',
    cursor: 'pointer',
    backgroundColor: 'rgba(0,0,0,0.6)',
    color: theme.palette.common.white,
    marginRight: pxToRem(7),
    '&:hover': {
      backgroundColor: 'rgba(0,0,0,0.7)',
      color: theme.palette.common.white,
    },
  },
  iconSize: {
    fontSize: pxToRem(28),
  },
  downloadButton: {
    marginLeft: pxToRem(7),
    padding: pxToRem(3),
    borderRadius: theme.shape.borderRadius,
    border: 'none',
    cursor: 'pointer',
    backgroundColor: 'rgba(0,0,0,0.6)',
    color: theme.palette.common.white,
    '&:hover': {
      backgroundColor: 'rgba(0,0,0,0.7)',
      color: theme.palette.common.white,
    },
  },

  // ............preview componnt style.....
  previewFullScreenBox: {
    margin: theme.spacing(4),
  },
  previewHeading: {
    display: 'flex',
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  previewDownloadButton: {
    cursor: 'pointer',
    color: theme.palette.common.white,
    '&:hover': {
      backgroundColor: 'rgba(0,0,0,0.7)',
      color: theme.palette.common.white,
    },
  },
  previewDownloadIcon: {
    height: pxToRem(26),
    width: pxToRem(26),
    cursor: 'pointer',
  },
  previewCloseButton: {
    color: theme.palette.common.white,
    '&:hover': {
      backgroundColor: 'rgba(0,0,0,0.7)',
      color: theme.palette.common.white,
    },
  },
  previewFileTitle: {
    marginTop: theme.spacing(-3),
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    [theme.breakpoints.down('sm')]: {
      marginTop: theme.spacing(0),
    },
  },
  previewImageGrid: {
    display: 'flex',
    alignItems: 'center',
    flexDirection: 'column',
    justifyContent: 'center',
    marginTop: theme.spacing(2),
  },
}));
