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

export const useStyles = makeStyles((theme) => ({
  dialogWrapper: {
    // overflow: 'scroll',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
  },
  dialogScrollingWrapper: {
    overflow: 'scroll',
    overflowX: 'hidden',
  },
  dialogContainerWrapper: {
    marginTop: theme.spacing(3.2),
    marginBottom: theme.spacing(3.2),
    maxWidth: '1110px',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: '20px',
  },
  detailContainerWrapper: {
    marginTop: theme.spacing(3.2),
    marginBottom: theme.spacing(3.2),
    width: '100%',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    maxWidth: '1000px',
  },
  dialogTitleWrapper: {
    minWidth: '200px',
    maxWidth: '1110px',
    width: '100%',
    display: 'flex',
    alignItems: 'center',
    paddingTop: theme.spacing(2.4),
    justifyContent: 'space-between',
    flexDirection: 'column',
  },
  detailTitleWrapper: {
    width: '100%',
    display: 'flex',
    padding: `${theme.spacing(1.8)} ${theme.spacing(3.1)}`,
    marginBottom: theme.spacing(1),
    position: 'relative',
  },
  closeIcon: {
    cursor: 'pointer',
    position: 'absolute',
    right: 20,
    // top: 20,
  },
  backIcon: {
    cursor: 'pointer',
    position: 'absolute',
    left: 20,
    // top: 20,
  },
  actionWrapper: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    // padding: '20px 12px',
    // paddingBottom: theme.spacing(2.4),
  },
  actions: {
    '&.MuiDialogActions-root': {
      minWidth: '100px',
      maxWidth: '300px',
    },
  },
  imageWrapper: {
    width: '164px',
    height: '110px',
    marginTop: theme.spacing(1.6),
    marginBottom: theme.spacing(1),
  },
  imageContainer: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    flexDirection: 'column',
    textAlign: 'start',
    width: '100%',
  },
  imageContainerTitleLeftAligned: {
    display: 'flex',
    justifyContent: 'flex-start',
    alignItems: 'center',
    textAlign: 'start',
    width: '80%',
  },
  contentWrapper: {
    maxWidth: '530px',
    minWidth: '200px',
    // width: '100%',
    // overflow: 'hidden',
  },
  contentScrollWrapper: {
    width: '100%',
    height: '100%',
    overflowY: 'auto',
  },
  leftButton: {
    width: '186px',
    height: '48px',
    marginRight: theme.spacing(1),
    marginBottom: theme.spacing(2.0),
    border: 'none',
    borderRadius: '12px',
    cursor: 'pointer',
  },
  leftButtonText: {
    color: theme.palette.grey[34],
    opacity: '0.54',
    fontWeight: 600,
    fontFamily: theme?.fontFamily?.semiBold,
    fontSize: pxToRem(16),
    textTransform: 'none',
  },
  rightButton: {
    width: '186px',
    height: '48px',
    backgroundColor: theme?.palette?.primary?.main,
    color: theme?.palette?.common?.white,
    fontSize: pxToRem(16),
    marginBottom: theme.spacing(2.0),
    fontFamily: theme?.fontFamily?.semiBold,
    border: 'none',
    borderRadius: '12px',
    cursor: 'pointer',
    justifyContent: 'center',
  },
  rightButtonText: {
    textTransform: 'none',
    color: theme.palette.grey[0],
  },
  dialogModalWrapper: {
    '& .MuiDialog-paper': {
      background: theme.palette.grey[0],
    },
  },
  modalTitle: {
    fontFamily: theme.fontFamily.bold,
    fontSize: pxToRem(24),
    fontWeight: 600,
    lineHeight: 'normal',
    letterSpacing: 'normal',
  },
  modalTitleLeft: {
    fontFamily: theme.fontFamily.bold,
    fontSize: pxToRem(24),
    fontWeight: 600,
    lineHeight: 'normal',
    letterSpacing: 'normal',
    // marginLeft: '-240px',
    alignSelf: 'flex-start',
    marginBottom: '-20px',
  },
  modalSubTitleLeft: {
    width: '100%',
    marginTop: theme.spacing(2.5),
  },
  footerMainDiv: {
    width: '100%',
    marginTop: theme.spacing(0.6),
    padding: theme.spacing(1.8),
    backgroundColor: '#E9EAEB',
  },
  modalFooter: {
    display: 'flex',
    justifyContent: 'flex-end',
    paddingRight: theme.spacing(0.6),
    '& .MuiButton-root ': {
      display: 'flex',
      justifyContent: 'center',
    },
  },
  cancelButton: {
    marginRight: theme.spacing(0.5),
  },
}));
