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

export const useStyles = makeStyles((theme) => ({
  mainBox: {
    marginTop: theme.spacing(1.5),
  },
  iconSize: {
    fontSize: pxToRem(28),
  },
  dropZoneOuterBox: {
    width: '100%',
  },
  reactCrop: {
    /* Set a minimum height and width */
    minHeight: '200px',
    minWidth: '200px',
  },
  inputTitle: {
    '&.MuiTypography-body1': {
      fontSize: pxToRem(12),
    },
    fontSize: pxToRem(12),
    color: theme.palette.grey[10],
    marginBottom: pxToRem(7),
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  imgButton: {
    color: theme?.palette?.primary?.main,
    fontSize: pxToRem(12),
    fontWeight: 400,
    fontFamily: theme?.fontFamily?.regular,
    backgroundColor: 'transparent',
    border: 'none',
    cursor: 'pointer',
    margin: `0 ${theme.spacing(0.8)}`,
    padding: theme.spacing(0),
    outline: 'none',
  },

  onImageButton: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    position: 'absolute',
    top: '50%',
    left: '50%',
    marginLeft: 'auto',
    transform: 'translate(-50%, -50%)',
    backgroundColor: 'rgba(0,0,0,0.2)',
    borderRadius: theme.spacing(1),
    width: '100%',
    height: '100%',
  },
  temp: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    height: '100%',
  },
  addButton: {
    border: `1px dashed ${theme.palette.primary.main}`,
    width: '100%',
    height: '130px',
    backgroundColor: theme.palette.common.white,
    borderRadius: theme.spacing(1),
    position: 'relative',
    display: 'grid',
    placeItems: 'center',
  },
  addButtonContent: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    flexDirection: 'column',
    height: '100%',
    cursor: 'pointer',
    width: '100%',
    fontSize: pxToRem(16),
  },
  addText: {
    opacity: 1,
    fontFamily: theme?.fontFamily?.medium,
    fontSize: pxToRem(14),
    height: '16px',
    fontWeight: 500,
    lineHeight: 'normal',
    letterSpacing: 'normal',
    marginTop: theme?.spacing(1),
  },
  addIcon: {
    width: '26px',
    height: '24px',
  },
  addSubtext: {
    fontSize: pxToRem(12),
    color: theme.palette.grey[10],
    opacity: '0.6',
    textAlign: 'center',
    padding: `${theme.spacing(0.5)} ${theme.spacing(7)}`,
    [theme.breakpoints.down('md')]: {
      padding: theme.spacing(1),
    },
    [theme.breakpoints.down('lg')]: {
      padding: theme.spacing(1),
    },
  },
  previewBox: {
    display: 'flex',
    justifyContent: 'end',
    alignItems: 'start',
    width: '153px',
    height: '111px',
    borderRadius: theme.spacing(0.4),
    backgroundSize: 'cover',
  },
  previewFullScreenBox: {
    margin: theme.spacing(4),
  },
  previewHeading: {
    display: 'flex',
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  previewImageGrid: {
    display: 'flex',
    alignItems: 'center',
    flexDirection: 'column',
    justifyContent: 'center',
    marginTop: theme.spacing(2),
  },
  previewImage: {
    maxHeight: '450px',
    [theme.breakpoints.down('sm')]: {
      maxHeight: '350px',
    },
  },
  previewFileTitle: {
    marginTop: theme.spacing(-3),
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    [theme.breakpoints.down('sm')]: {
      marginTop: theme.spacing(0),
    },
  },
  pdfAndDocPreviewBox: {
    minHeight: '450px',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    flexDirection: 'column',
  },
  pdfAndDocPreviewDownloadButton: {
    marginTop: theme.spacing(2),
    fontFamily: theme?.fontFamily?.regular,
  },
  transFormImageBox: {
    minHeight: '65vh',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
  },
  controlButtons: {
    marginTop: theme.spacing(1),
  },
  customTransFormWrapper: {
    overflow: 'visible',
  },
  controlButton: {
    color: theme.palette.common.white,
    cursor: 'pointer',
    border: 'none',
    borderRadius: theme.spacing(0),
    padding: theme.spacing(1.2),
    '&:hover': {
      backgroundColor: 'rgba(0,0,0,0.9)',
      color: theme.palette.common.white,
    },
  },
  zoomOutButton: {
    backgroundColor: 'rgba(0,0,0,0.7)',
    borderTopLeftRadius: theme.spacing(0.8),
    borderBottomLeftRadius: theme.spacing(0.8),
  },
  zoomResetButton: {
    backgroundColor: 'rgba(0,0,0,0.4)',
  },
  zoomInButton: {
    backgroundColor: 'rgba(0,0,0,0.7)',
    borderTopRightRadius: theme.spacing(0.8),
    borderBottomRightRadius: theme.spacing(0.8),
  },
  eyeButton: {
    padding: pxToRem(3),
    borderRadius: pxToRem(4),
    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,
    },
  },
  downloadButton: {
    marginLeft: pxToRem(7),
    padding: pxToRem(3),
    borderRadius: pxToRem(4),
    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,
    },
  },
  previewCloseButton: {
    color: theme.palette.common.white,
    '&:hover': {
      backgroundColor: 'rgba(0,0,0,0.7)',
      color: theme.palette.common.white,
    },
  },
  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',
  },
  errorMessage: {
    color: theme.palette.error.main,
    fontStyle: 'italic',
    fontSize: pxToRem(12),
    marginTop: theme.spacing(0.5),
    fontFamily: theme.fontFamily.medium,
  },
}));
