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

export const useStyles = makeStyles((theme) => ({
  appBarStyle: {
    backgroundColor: theme.palette.grey[28],
  },
  contentBox: {
    marginTop: '3%',
  },
  mainContent: {
    marginTop: theme.spacing(4),
    marginBottom: theme.spacing(4),
    marginLeft: theme.spacing(4),
    marginRight: theme.spacing(4),
    width: '100%',
    overflowX: 'scroll',
    '&::-webkit-scrollbar': {
      height: '6px',
    },
  },
  logoBox: {
    display: 'flex',
    width: '100%',
    marginLeft: '1%',
    [theme.breakpoints.down('md')]: {
      width: 'auto',
    },
  },
  logo: {
    maxHeight: '61px',
    objectFit: 'contain',
    justifyContent: 'center',
  },
  whitePaper: {
    width: '100%',
    marginBottom: theme.spacing(0.3),
    paddingBottom: theme.spacing(0.7),
    borderRadius: `${theme.spacing(2)} ${theme.spacing(2)} ${theme.spacing(
      1
    )} ${theme.spacing(1)}`,
  },
  inputLabel: {
    marginBottom: theme.spacing(0.5),
    fontSize: pxToRem(12),
    color: theme.palette.grey[10],
  },
  textAreaLast: {
    width: '-webkit-fill-available',
    '&.MuiButtonBase-root': {
      padding: theme.spacing(0.8),
    },
  },
  helperText: {
    color: theme.palette.error.main,
    fontStyle: 'italic',
  },
  formRoot: {
    paddingTop: theme.spacing(3.2),
  },
  formPassswordHeading: {
    fontSize: pxToRem(14),
    fontWeight: '600',
  },
  passwordTextFiled: {
    marginTop: theme.spacing(0),
  },
  icon: {
    cursor: 'pointer',
    paddingLeft: theme.spacing(3),
    display: 'flex',
    alignItems: 'center',
    width: '50px',
    [theme.breakpoints.up('md')]: {
      width: '50px',
    },
    [theme.breakpoints.up('lg')]: {
      width: '50px',
    },
    [theme.breakpoints.up('xl')]: {
      width: '50px',
    },
  },
  formPasswordHeadingRoot: {
    paddingTop: theme.spacing(2),
    paddingLeft: theme.spacing(2),
    width: '100%',
  },
  subjectText: {
    fontSize: pxToRem(12),
    position: 'absolute',
    right: pxToRem(8),
    top: '90%',
    transform: 'translateY(-90%)',
  },
  // --- AddForm Style ---
  screenViewGridItem: {
    marginTop: theme.spacing(1),
  },
  paperContainerBox: {
    width: '100%',
  },
  countryCodeBox: {
    padding: pxToRem(12),
    paddingRight: pxToRem(20),
    paddingLeft: pxToRem(16),
    borderRadius: pxToRem(10),
    backgroundColor: theme.palette.grey[20],
  },
  countryCodeLabel: {
    marginBottom: theme.spacing(0),
    opacity: 1,
    fontFamily: 'Inter-Regular',
  },
  mobileNumberInput: {
    fontFamily: 'Inter-Regular',
    '& .MuiInputBase-root': {
      paddingLeft: theme.spacing(0),
      border: 0,
    },
    '& .MuiOutlinedInput-input': {
      paddingLeft: theme.spacing(0),
    },
  },
  passwordCheckListTitle: {
    color: theme.palette.grey[20],
    fontSize: pxToRem(12),
    fontStyle: 'italic',
    textAlign: 'left',
    marginBottom: theme.spacing(0.4),
  },
  emailNote: {
    color: theme.palette.grey[20],
    fontSize: pxToRem(14),
    fontStyle: 'italic',
    textAlign: 'left',
    marginBottom: theme.spacing(0.4),
  },
  passwordCheckList: {
    fontSize: pxToRem(14),
    paddingTop: theme.spacing(0.2),
    fontStyle: 'italic',
    color: theme.palette.grey[600],
  },
  stateTextField: {
    '& .Mui-disabled': {
      WebkitTextFillColor: theme.palette.grey[10], // Change to the appropriate color value
      opacity: 1,
    },
  },
  termsAndConditionErrorMessage: {
    color: theme.palette.error.main,
    fontStyle: 'italic',
    fontSize: pxToRem(12),
    marginTop: theme.spacing(0.5),
  },
  checkBox: {
    marginTop: theme.spacing(3),
    paddingRight: theme.spacing(1),
  },
  checkBoxLabel: {
    marginTop: theme.spacing(3.2),
    marginLeft: theme.spacing(1.2),
    fontSize: pxToRem(16),
    color: theme.palette.common.black,
  },
  linkText: {
    color: theme.palette.grey[53],
  },
  placeholderText: {
    fontStyle: 'italic',
    fontSize: pxToRem(14),
    opacity: 0.5,
    color: theme.palette.grey[10],
  },
  // logo style
  reactCrop: {
    /* Set a minimum height and width */
    minHeight: '200px',
    minWidth: '200px',
  },
  dropZoneOuterBox: {
    width: '100%',
  },
  inputTitle: {
    '&.MuiTypography-body1': {
      fontSize: pxToRem(12),
      color: theme.palette.grey[10],
    },
    marginBottom: theme.spacing(0.6),
    marginLeft: theme.spacing(0.6),
    color: theme.palette.grey[10],
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  imgButton: {
    color: theme?.palette?.primary?.main,
    fontSize: pxToRem(12),
    fontWeight: 600,
    fontFamily: theme?.fontFamily?.Regular,
    backgroundColor: 'transparent',
    border: 'none',
    cursor: 'pointer',
    margin: `${theme.spacing(0)} ${theme.spacing(0.8)}`,
    padding: theme.spacing(0),
    outline: 'none',
  },
  logoUploadErrorBox: {
    display: 'flex',
    justifyContent: 'space-between',
  },
  errorText: {
    color: theme.palette.error.main,
    fontSize: pxToRem(12),
    fontStyle: 'italic',
  },
  addButton: {
    border: `1px dashed ${theme.palette.primary.main}`,
    width: '100%',
    height: '130px',
    backgroundColor: theme.palette.common.white,
    borderRadius: theme.spacing(1),
    marginBottom: theme.spacing(1.48),
  },
  addButtonContent: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    flexDirection: 'column',
    height: '100%',
    cursor: 'pointer',
    width: '100%',
  },
  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',
  },
  formSectionHeadingMargin: {
    marginTop: theme.spacing(1.5),
  },

  termsAndConditionDrawer: {
    '& .MuiDrawer-paper': {
      maxWidth: pxToRem(550),
      boxShadow: '-10px 0px 10px -2px rgba(0,0,0,0.1)',
    },
    [theme.breakpoints.down('md')]: {
      width: '100%',
    },
  },
  verifyIcon: {
    fontSize: pxToRem(20),
    color: theme.palette.grey[54],
  },
  chipOuter: {
    display: 'flex',
    flexWrap: 'wrap',
    paddingLeft: theme.spacing(3.2),
  },
  chip: {
    minWidth: '170px',
    height: '42px',
    padding: theme.spacing(1.5),
    margin: theme.spacing(1),
    marginRight: theme.spacing(1.5),
    justifyContent: 'space-between',
    borderRadius: '24px',
    fontSize: pxToRem(14),
  },
  billingUserOuterSection: {
    marginTop: theme.spacing(3.0),
  },
  billingUserEmailSection: {
    padding: `${theme.spacing(2.2)} ${theme.spacing(3.2)}`,
  },
  saveUserButton: {
    marginLeft: theme.spacing(1.0),
    width: '150px',
    display: 'flex',
    justifyContent: 'space-evenly',
    borderRadius: '8px',
    height: '47px',
    // opacity: 0.5,
  },
  billingUserEmailWrapper: {
    display: 'flex',
    [theme.breakpoints.down('md')]: {
      flexDirection: 'column',
      gap: '15px',
    },
  },
}));
