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

export const useStyles = makeStyles((theme) => ({
  header: {
    minHeight: theme.spacing(3.3),
    margin: theme.spacing(0.5),
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    flexWrap: 'wrap',
    [theme.breakpoints.down('sm')]: {
      alignItems: 'flex-start',
    },
    width: '99%',
  },
  detailPageHeader: {
    minHeight: theme.spacing(3.2),
    margin: theme.spacing(0.5),
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'flex-start',
    // flexWrap: 'wrap',
  },
  title: {
    width: 'max-content',
  },
  globalIcon: {
    width: '24px',
    height: '24px',
    marginLeft: theme?.spacing(1),
    marginTop: theme?.spacing(1.5),
  },
  headerResponsive: {
    display: 'flex',
    flexWrap: 'wrap',
    [theme.breakpoints.down('sm')]: {
      alignItems: 'flex-start',
    },
  },
  extraText: {
    display: 'flex',
    justifyContent: 'flex-end',
    marginRight: theme.spacing(2.0),
  },
  secondaryButton: {
    display: 'flex',
    alignItems: 'center',
  },
  headerActions: {
    display: 'flex',
    alignItems: 'center',
    flexWrap: 'wrap',
    maxWidth: '720px',
    justifyContent: 'flex-end',
  },
  detailHeaderActions: {
    display: 'flex',
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  searchBar: {
    marginRight: theme.spacing(1.6),
    width: '251px',
    height: '43px',
    '& .MuiAutocomplete-root': {
      height: '43px',
      borderWidth: 0,
    },
    '&.MuiFormControl-root': {
      margin: '16px',
    },
  },
  selectBar: {
    marginLeft: theme.spacing(10),
    width: '251px',
    height: '43px',
    '& .MuiOutlinedInput-root': {
      height: '43px',
      borderWidth: 0,
    },
  },
  addButton: {
    '&.MuiButtonBase-root': {
      padding: `${theme.spacing(0.6)} ${theme.spacing(1.6)}`,
      backgroundColor: theme?.palette?.primary?.colors,
      color: theme?.palette?.common?.white,
      fontSize: pxToRem(15),
      fontFamily: theme?.fontFamily?.light,
      width: 'auto',
      justifyContent: 'center',
    },

    whiteSpace: 'nowrap',
    maxHeight: pxToRem(48),
    minHeight: pxToRem(48),
    marginTop: '5px',
    minWidth: pxToRem(127),
  },
  addButtonOutlined: {
    '&.MuiButtonBase-root': {
      padding: `${theme.spacing(0.6)} ${theme.spacing(1.6)}`,
      backgroundColor: theme?.palette?.primary?.colors,
      color: theme?.palette?.grey[10],
      fontSize: pxToRem(15),
      fontFamily: theme?.fontFamily?.light,
      width: 'auto',
      border: `1px solid ${theme.palette.grey[29]}`,
      justifyContent: 'center',
      '&:hover': {
        backgroundColor: theme.palette.grey[50],
      },
      minHeight: theme.spacing(4.4),
    },

    whiteSpace: 'nowrap',
    maxHeight: pxToRem(48),
    minHeight: pxToRem(48),
    marginTop: '5px',
    minWidth: pxToRem(127),
  },
  gobackIcon: {
    fontSize: '28px',
    marginRight: theme.spacing(2.0),
    display: 'flex',
    alignItems: 'center',
    cursor: 'pointer',
  },
  headerTitle: {
    display: 'flex',
    alignItems: 'center',
    maxWidth: '100%',
  },
  dropdownContainer: {
    height: '42px',
    width: '251px',
    marginRight: theme?.spacing(1.6),
  },
  dropdownAutocomplete: {
    marginRight: theme.spacing(1.5),
    width: '251px',
    maxHeight: '43px',
    minHeight: '43px',

    '& .MuiOutlinedInput-root': {
      height: '48px',
      backgroundColor: theme.palette.grey[2],
    },
  },
}));
