import { createTheme as _createTheme } from '@mui/material/styles';
import merge from 'lodash/merge';
import ExpandMoreRoundedIcon from '@mui/icons-material/ExpandMoreRounded';
import IconButton from '@mui/material/IconButton';
import { ReactSVG } from 'react-svg';
import { ASSETS_URL } from '../../../../consts/common';
import { _palette, spacing, _typography, transitions, scrollWidth } from './definitions';
import CustomCheckbox from './CustomCheckbox';

declare module '@mui/material/styles' {
  interface BreakpointOverrides {
    customxs: true;
    customsm: true;
    custommd: true;
    customlg: true;
    customxl: true;
  }
}

const endIcon = {
  marginRight: '0 !important',
  marginLeft: spacing(1)
};

const startIcon = {
  marginRight: spacing(1),
  marginLeft: '0 !important'
};

const shadows = [
  'none',
  '0px 2px 6px #4F72BF26',
  '0px 0px 12px #4F72BF1F', // pinned columns
  '0px 0px 15px #347FF726',
  '0px 0px 20px #DEEBFF',
  '0px 0px 6px #00000058',
  '0px 0px 16px #DEEBFF',
  '0px 8px 8px -4px #DEEBFF', // sticky column header
  '0px 0px 8px #DEEBFF', // input hover
  '0px 0px 16px #D6E6FF', // dropdown(?)
  '0px 0px 10px #CBD2E2CC', // toggle
  '11px 50px 45px 20px #D8E5F8',
  '10px 0px 15px #347FF71A',
  '0px -8px 8px -8px #DEEBFF' // sticky pagination
];

const defaultBreakpoint = {
  xs: 0,
  sm: 600,
  md: 900,
  lg: 1200,
  xl: 1536
};

export const createTheme = (args?: {
  palette?: Partial<typeof _palette>;
  typography?: Partial<typeof _typography>;
}) => {
  const { palette: overridePalette, typography: overrideTypography } = args || {};
  const palette = merge(_palette, overridePalette);
  const typography = merge(_typography, overrideTypography);

  const containedPrimaryActive = {
    backgroundColor: palette.secondary[600]
  };

  const menuPaper = {
    border: `1px solid ${palette.primary[200]}`,
    borderRadius: spacing(0.5),
    boxShadow: shadows[2],
    overflow: 'unset',
    '&:before': {
      boxShadow: shadows[2],
      borderTop: `1px solid ${palette.primary[200]}`,
      borderLeft: `1px solid ${palette.primary[200]}`,
      borderTopLeftRadius: spacing(0.5),
      content: "''",
      position: 'absolute',
      top: '-4px',
      left: '8px',
      width: '8px',
      height: '8px',
      backgroundColor: palette.common.white,
      transform: 'rotate(45deg)'
    }
  };

  const containedSecondaryActive = {
    boxShadow: `${shadows[6]} !important`,
    backgroundColor: palette.common.white,
    color: palette.secondary[600]
  };

  return _createTheme({
    constants: {
      scrollWidth
    },
    typography,
    palette,
    spacing,
    breakpoints: {
      values: {
        ...defaultBreakpoint,
        customxs: 1280,
        customsm: 1366,
        custommd: 1441,
        customlg: 1680,
        customxl: 1920
      }
    },
    // Remove this when we have 25 box shadows
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore
    shadows: [...shadows, ...Array(25 - shadows.length).fill('none')],
    components: {
      MuiAutocomplete: {
        styleOverrides: {
          root: {
            '&[aria-expanded="false"] .MuiInputBase-root': {
              '&.MuiAutocomplete-tag': {
                maxWidth: `calc(100% - ${spacing(14)}px)`
              }
            }
          },
          input: {
            minWidth: 0
          },
          inputRoot: {
            padding: spacing(0, 1),
            "&:not(:nth-last-of-type(4)):[class='MuiAutocomplete-tag']": {
              marginBottom: 0,
              marginRight: spacing(0.5)
            },
            '&[class*="MuiOutlinedInput-root"]': {
              paddingTop: 0,
              paddingBottom: 0,
              paddingLeft: 0,
              '& .MuiAutocomplete-endAdornment': {
                right: spacing(2)
              }
            }
          },
          clearIndicator: {
            marginLeft: spacing(0.5),
            marginRight: 0,
            padding: 0,
            color: palette.primary[200]
          },
          popupIndicator: {
            marginLeft: spacing(0.5),
            marginRight: 0,
            padding: 0,
            color: palette.primary[400]
          },
          paper: {
            margin: spacing(1, 0),
            overflowY: 'auto'
          },
          listbox: {
            ...menuPaper,
            padding: 0,
            height: 'unset',
            overflow: 'auto',
            borderColor: 'transparent',
            boxShadow: 'none',
            '&:before': {
              content: "''",
              position: 'absolute',
              top: spacing(1),
              right: 0,
              bottom: spacing(1),
              left: 0,
              zIndex: 0,
              pointerEvents: 'none',
              border: menuPaper.border,
              borderRadius: menuPaper.borderRadius,
              boxShadow: menuPaper.boxShadow
            },
            '&:after': {
              ...menuPaper['&:before'],
              top: '4px'
            },
            // remove double-scroll
            '&:not(.global-search)': {
              maxHeight: 'none'
            },
            // Due to using custom listbox component
            '&.global-search': {
              margin: spacing(1, 1, 1, 0)
            },
            '& > div > .MuiTextField-root > .MuiInputBase-root > fieldset': {
              border: 0
            }
          },
          endAdornment: {
            height: spacing(5),
            top: 0,
            alignItems: 'center',
            display: 'flex',
            '& div > div': {
              display: 'flex'
            }
          },
          tag: {
            marginTop: 0,
            marginRight: spacing(0.5),
            marginBottom: spacing(0.5),
            marginLeft: 0,
            width: 'fit-content !important',
            minWidth: spacing(5),
            // avoid ellipsis for the first chip
            '&:first-of-type': {
              minWidth: 'auto'
            },
            // limitTags ballon styling
            '&:not(.MuiChip-root)': {
              ...typography.caption1,
              marginLeft: spacing(0.75),
              padding: spacing(0, 0.5),
              minWidth: spacing(3),
              height: spacing(3),
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              backgroundColor: palette.secondary[500],
              color: palette.common.white,
              borderRadius: spacing(0.5),
              // for tooltip positioning
              '& span': {
                display: 'flex',
                alignItems: 'center',
                height: '100%'
              }
            }
          },
          option: {
            '&[aria-selected="true"]:not(.Mui-focused)': {
              backgroundColor: 'inherit !important'
            },
            '&:not(:last-child)': {
              marginBottom: spacing(0.25)
            }
          }
        },
        defaultProps: {
          popupIcon: null
        }
      },
      MuiBreadcrumbs: {
        styleOverrides: {
          root: {
            color: palette.primary[400],
            '& a': {
              color: 'inherit',
              '&:hover': {
                color: 'inherit'
              }
            }
          },
          li: {
            '&:hover': {
              color: palette.primary[500]
            }
          }
        }
      },
      MuiDialog: {
        styleOverrides: {
          paper: {
            borderRadius: `${spacing(1)}`,
            position: 'absolute',
            top: `${spacing(15)}`,
            maxWidth: '880px'
          }
        }
      },
      MuiDialogTitle: {
        styleOverrides: {
          root: {
            color: palette.primary[500],
            padding: spacing(3, 3, 0, 3)
          }
        }
      },
      MuiDialogContent: {
        styleOverrides: {
          root: {
            padding: `${spacing(1, 3, 3)} !important`
          }
        }
      },
      MuiDialogContentText: {
        styleOverrides: {
          root: {
            ...typography.body2,
            color: palette.primary[500],
            margin: spacing(0, 0, 1.5, 0)
          }
        }
      },
      MuiDialogActions: {
        styleOverrides: {
          root: {
            padding: spacing(0, 3, 3)
          },
          spacing: {
            '& > :not(:first-of-type)': {
              marginLeft: spacing(2)
            }
          }
        }
      },
      MuiChip: {
        styleOverrides: {
          root: {
            ...typography.caption1,
            backgroundColor: palette.secondary[100],
            color: palette.primary[500],
            height: '24px',
            '&:hover': {
              backgroundColor: palette.secondary[200]
            }
          },
          sizeSmall: {
            minWidth: spacing(6.5),
            height: spacing(2),
            '& > .MuiChip-labelSmall': {
              paddingLeft: spacing(0.5),
              paddingRight: spacing(1)
            }
          },
          sizeMedium: {
            minWidth: spacing(9),
            height: spacing(3)
          },
          label: {
            ...typography.caption1,
            paddingLeft: spacing(1),
            paddingRight: spacing(1)
          },
          deletable: {
            '&:focus': {
              backgroundColor: palette.secondary[100]
            }
          },
          deleteIcon: {
            margin: 0,
            fill: palette.primary[200],
            display: 'flex',
            width: spacing(3),
            height: spacing(3),
            '& > div > div': {
              display: 'flex',
              width: '16px'
            },
            '&:hover': {
              backgroundColor: 'transparent'
            }
          },
          deleteIconSmall: {
            marginLeft: 0,
            marginRight: 0,
            width: spacing(1.5),
            height: spacing(1.5),
            '& > div > div': {
              width: spacing(1.5),
              '& > svg': {
                width: spacing(1.5)
              }
            }
          }
        },
        defaultProps: {
          tabIndex: -1,
          deleteIcon: (
            <IconButton size="small" aria-label="Remove chip" role="button">
              <ReactSVG src={`${ASSETS_URL}/icons/icon_closeCircle.svg`} />
            </IconButton>
          )
        }
      },
      MuiButtonGroup: {
        styleOverrides: {
          groupedHorizontal: {
            borderColor: palette.primary[200]
          },
          groupedContainedSecondary: {
            '&:not(:last-child)': {
              borderColor: palette.primary[200],
              borderRight: 'none !important'
            }
          }
        },
        defaultProps: {
          variant: 'contained',
          color: 'secondary',
          disableRipple: true,
          disableElevation: true
        }
      },
      MuiCssBaseline: {
        styleOverrides: {
          '& html': { height: '100vh' },
          '& body': {
            height: 'auto',
            fontSize: '14px'
          },
          '& #__next': { height: '100vh' },
          '*::-webkit-scrollbar': {
            width: scrollWidth,
            height: scrollWidth
          },
          '::-webkit-scrollbar-thumb': {
            background: palette.background.scrollbar,
            borderRadius: spacing(1.5)
          }
        }
      },
      MuiAlert: {
        styleOverrides: {
          root: {
            display: 'flex',
            alignItems: 'center',
            padding: spacing(1.5, 2),
            boxShadow: shadows[4],
            minHeight: spacing(6),
            '& .MuiAlert-icon': {
              ...typography.h6,
              alignItems: 'center',
              marginRight: spacing(1),
              padding: 0
            }
          },
          message: {
            ...typography.h6,
            display: 'flex',
            alignItems: 'center',
            padding: 0
          },
          action: {
            marginRight: 0,
            paddingLeft: spacing(2),
            paddingTop: 0,
            alignItems: 'center',
            '& > *, .MuiButton-root': {
              marginLeft: spacing(2)
            },
            '& .MuiIconButton-root': {
              padding: 0,
              marginLeft: spacing(2)
            }
          },
          // standard
          standardSuccess: {
            backgroundColor: palette.common.white,
            borderColor: palette.common.white,
            color: palette.primary[500],
            '& .MuiAlert-icon': {
              color: palette.success[500]
            },
            '& .MuiAlert-action': {
              color: palette.primary[400]
            }
          },
          standardError: {
            backgroundColor: palette.common.white,
            borderColor: palette.common.white,
            color: palette.primary[500],
            '& .MuiAlert-icon': {
              color: palette.error[500]
            },
            '& .MuiAlert-action': {
              color: palette.primary[400]
            }
          },
          standardInfo: {
            backgroundColor: palette.common.white,
            borderColor: palette.common.white,
            color: palette.primary[500],
            '& .MuiAlert-icon': {
              color: palette.secondary[500]
            },
            '& .MuiAlert-action': {
              color: palette.primary[400]
            }
          },
          standardWarning: {
            backgroundColor: palette.common.white,
            borderColor: palette.common.white,
            color: palette.primary[500],
            '& .MuiAlert-icon': {
              color: palette.warning[500]
            },
            '& .MuiAlert-action': {
              color: palette.primary[400]
            }
          },
          // filled
          filledSuccess: {
            backgroundColor: palette.success[500],
            borderColor: palette.success[500],
            color: palette.common.white
          },
          filledError: {
            backgroundColor: palette.error[500],
            borderColor: palette.error[500],
            color: palette.common.white
          },
          filledInfo: {
            borderColor: palette.secondary[700],
            backgroundColor: palette.secondary[700],
            color: palette.common.white
          },
          filledWarning: {
            backgroundColor: palette.warning[500],
            borderColor: palette.warning[500],
            color: palette.common.white
          },
          // outlined
          outlinedSuccess: {
            backgroundColor: palette.common.white,
            borderColor: palette.common.white,
            borderLeftColor: palette.success[500],
            borderLeftWidth: spacing(0.5),
            color: palette.primary[500],
            '& .MuiAlert-icon': {
              color: palette.success[500]
            },
            '& .MuiAlert-action': {
              color: palette.primary[400]
            }
          },
          outlinedError: {
            backgroundColor: palette.common.white,
            borderColor: palette.common.white,
            borderLeftColor: palette.error[500],
            borderLeftWidth: spacing(0.5),
            color: palette.primary[500],
            '& .MuiAlert-icon': {
              color: palette.error[500]
            },
            '& .MuiAlert-action': {
              color: palette.primary[400]
            }
          },
          outlinedInfo: {
            backgroundColor: palette.common.white,
            borderColor: palette.common.white,
            borderLeftColor: palette.secondary[500],
            borderLeftWidth: spacing(0.5),
            color: palette.primary[500],
            '& .MuiAlert-icon': {
              color: palette.secondary[500]
            },
            '& .MuiAlert-action': {
              color: palette.primary[400]
            }
          },
          outlinedWarning: {
            backgroundColor: palette.common.white,
            borderColor: palette.common.white,
            borderLeftColor: palette.warning[500],
            borderLeftWidth: spacing(0.5),
            color: palette.primary[500],
            '& .MuiAlert-icon': {
              color: palette.warning[500]
            },
            '& .MuiAlert-action': {
              color: palette.primary[400]
            }
          }
        },
        defaultProps: {
          variant: 'filled',
          severity: 'info',
          iconMapping: {
            success: ' ',
            error: ' ',
            info: ' ',
            warning: ' '
          }
        }
      },
      MuiPopover: {
        styleOverrides: {
          root: {
            cursor: 'auto'
          }
        }
      },
      MuiSelect: {
        styleOverrides: {
          icon: {
            color: palette.primary[400],
            top: 'initial'
          },
          iconOutlined: {
            right: spacing(2)
          },
          select: {
            '&:focus': {
              backgroundColor: palette.common.white
            },
            '&.Mui-disabled': {
              color: `${palette.secondary[300]} !important`
            },
            paddingRight: `${spacing(4.5)} !important`,
            minHeight: 'unset'
          }
        },
        defaultProps: {
          variant: 'outlined',
          IconComponent: ExpandMoreRoundedIcon
        }
      },
      MuiDivider: {
        styleOverrides: {
          root: {
            borderColor: palette.primary[200]
          }
        }
      },
      MuiOutlinedInput: {
        styleOverrides: {
          root: {
            ...typography.body2,
            lineHeight: spacing(2),
            '& fieldset': {
              borderColor: palette.primary[200]
            },
            '&:hover fieldset': {
              boxShadow: shadows[8],
              borderColor: `${palette.primary[200]} !important`
            },
            '&.Mui-focused fieldset': {
              borderWidth: `${spacing(0.125)} !important`,
              borderColor: `${palette.secondary[500]} !important`,
              boxShadow: 'none'
            },
            '&.Mui-disabled ': {
              '& div > svg': {
                fill: palette.primary[100]
              },
              '& fieldset': {
                borderColor: `${palette.primary[100]} !important`,
                color: palette.primary[100]
              },
              '&:hover': {
                boxShadow: 'none',
                '& fieldset': {
                  boxShadow: 'none'
                }
              }
            },
            '&.Mui-error': {
              '& fieldset': {
                borderColor: `${palette.error.main} !important`
              },
              '&:hover fieldset': {
                borderColor: `${palette.error.main} !important`
              },
              '&.Mui-focused fieldset': {
                borderColor: `${palette.error.main} !important`
              }
            }
          },
          colorSecondary: {
            '& fieldset': {
              borderColor: `${palette.success.main} !important`
            },
            '&:hover fieldset': {
              borderColor: `${palette.success.main} !important`
            },
            '&.Mui-focused fieldset': {
              borderColor: `${palette.success.main} !important`
            }
          },
          input: {
            '&.Mui-disabled ': {
              WebkitTextFillColor: palette.primary[100]
            }
          },
          sizeSmall: {
            paddingTop: 0,
            paddingBottom: 0,
            height: spacing(4)
          },
          adornedEnd: {
            paddingRight: spacing(2)
          }
        }
      },
      MuiFormHelperText: {
        styleOverrides: {
          root: {
            ...typography.caption1,
            marginTop: spacing(0.25),
            marginInlineStart: spacing(2)
          }
        }
      },
      MuiInputBase: {
        styleOverrides: {
          root: {
            backgroundColor: palette.common.white,
            '&:hover': {
              boxShadow: 'none !important'
            }
          },
          input: {
            height: spacing(5),
            boxSizing: 'border-box',
            padding: `${spacing(1.5, 2)} !important`,
            color: palette.primary[500],
            '&::placeholder': {
              color: palette.primary[400],
              opacity: 1
            },
            '&.Mui-disabled': {
              '&::placeholder': {
                color: palette.primary[100]
              }
            }
          },
          sizeSmall: {
            height: spacing(4)
          },
          inputSizeSmall: {
            height: spacing(4),
            padding: `${spacing(1, 2)} !important`
          },
          adornedEnd: {
            '& > div': {
              minWidth: spacing(2),
              fill: palette.primary[600]
            },
            '&.Mui-disabled > div': {
              fill: palette.secondary[300]
            }
          },
          multiline: {
            height: 'auto !important',
            padding: '0 !important'
          },
          inputMultiline: {
            ...typography.subtitle1
          }
        }
      },
      MuiInputLabel: {
        styleOverrides: {
          root: {
            ...typography.h4,
            display: 'flex',
            flexDirection: 'column',
            color: palette.primary[600],
            '& > div': {
              marginTop: spacing(1)
            }
          }
        }
      },
      MuiFormGroup: {
        styleOverrides: {
          root: {
            '& .Mui-disabled': {
              color: palette.secondary[300]
            }
          }
        }
      },
      MuiRadio: {
        styleOverrides: {
          root: {
            color: palette.primary[200],
            '&:hover': {
              background: 'none',
              color: palette.secondary[500]
            },
            '&.Mui-checked': {
              color: palette.secondary[500]
            },
            '&.Mui-disabled': {
              color: palette.primary[100],
              '&.Mui-checked': {
                color: palette.primary[100]
              }
            }
          },
          colorSecondary: {
            color: palette.error[500],
            '&:hover': {
              color: palette.error[500],
              backgroundColor: palette.action.hover
            },
            '&.Mui-checked': {
              color: palette.error.main
            }
          }
        },
        defaultProps: {
          color: 'default'
        }
      },
      MuiLinearProgress: {
        styleOverrides: {
          colorPrimary: {
            backgroundColor: `${palette.primary[200]} !important`
          }
        }
      },
      MuiTableCell: {
        styleOverrides: {
          root: {
            padding: spacing(0, 2),
            borderBottom: `1px solid ${palette.primary[200]}`,
            backgroundClip: 'padding-box',
            '& > div': {
              height: '72px'
            }
          }
        }
      },
      MuiTable: {
        styleOverrides: {
          root: {
            '& .MuiCheckbox-root:hover': {
              backgroundColor: 'transparent'
            }
          }
        },
        defaultProps: {
          color: 'default'
        }
      },
      MuiTableRow: {
        styleOverrides: {
          root: {
            '&.Mui-selected': {
              backgroundColor: palette.secondary[100],
              '& .MuiTableCell-root': {
                backgroundColor: palette.secondary[100]
              }
            }
          },
          head: {
            '& .MuiTableCell-root': {
              '& > div': {
                height: '48px'
              }
            }
          }
        }
      },
      MuiTableBody: {
        styleOverrides: {
          root: {
            '& .MuiTableRow-hover': {
              '&:hover .MuiTableCell-root': {
                backgroundColor: `${palette.secondary[100]} !important`
              }
            }
          }
        }
      },
      MuiCheckbox: {
        styleOverrides: {
          root: {
            padding: spacing(1),
            '&.Mui-disabled > div': {
              borderColor: palette.primary[100]
            },
            '&.Mui-checked:not(.MuiCheckbox-indeterminate)': {
              color: palette.common.white,
              '& > div': {
                backgroundColor: palette.secondary[500],
                borderRadius: spacing(0.5),
                '& .injected-svg': {
                  display: 'block',
                  width: spacing(1.5),
                  height: spacing(1.5),
                  margin: 'auto'
                }
              },
              '&.Mui-disabled > div': {
                backgroundColor: palette.primary[100]
              }
            },
            '&:hover': {
              background: 'none',
              '& > div.MuiGrid-root': {
                borderColor: palette.secondary[500]
              }
            },
            opacity: 1
          },
          colorSecondary: {
            '&:hover': {
              backgroundColor: palette.action.hover
            }
          },
          indeterminate: {
            '& > div': {
              backgroundColor: `${palette.common.white} !important`,
              borderColor: palette.secondary[500],
              borderRadius: spacing(0.5),
              borderStyle: 'solid',
              borderWidth: spacing(1 / 8),
              color: palette.secondary[500],
              width: spacing(2),
              height: spacing(2),
              '& div .injected-svg': {
                fill: 'currentColor'
              }
            },
            '&.Mui-disabled > div': {
              borderColor: palette.primary[100],
              color: palette.primary[100]
            }
          }
        },
        defaultProps: {
          color: 'default',
          disableRipple: true,
          icon: <CustomCheckbox palette={palette} />,
          checkedIcon: <CustomCheckbox checked palette={palette} />,
          indeterminateIcon: <CustomCheckbox indeterminate palette={palette} />
        }
      },
      MuiTextField: {
        styleOverrides: {
          root: {
            '& .MuiInputBase-root': {
              '&:hover': {
                boxShadow: shadows[6]
              }
            }
            // @todo: move to searchfield component scope
            // minWidth: '280px'
          }
        },
        defaultProps: {
          variant: 'outlined',
          rows: 3
        }
      },
      MuiFormControlLabel: {
        styleOverrides: {
          root: {
            '& .MuiIconButton-colorSecondary .MuiBox-root': {
              borderColor: `${palette.error.main} !important`
            }
          },
          label: {
            ...typography.caption1,
            color: palette.primary[600],
            '&.Mui-disabled': {
              color: palette.primary[100]
            }
          }
        }
      },
      MuiBadge: {
        styleOverrides: {
          badge: {
            minWidth: 0,
            width: '14px',
            height: '14px',
            '&.MuiBadge-colorError': {
              backgroundColor: palette.error[500]
            }
          }
        },
        defaultProps: {
          color: 'error'
        }
      },
      MuiIconButton: {
        styleOverrides: {
          root: {
            '&:focus-visible': {
              backgroundColor: palette.action.hover
            }
          },
          sizeSmall: {
            padding: spacing(1)
          }
        }
      },
      MuiTabs: {
        styleOverrides: {
          root: {
            ...typography.h5,
            minHeight: 0,
            '& button': {
              height: spacing(4)
            },
            '& a': {
              ...typography.interactive1,
              height: '40px'
            }
          },
          scroller: {
            display: 'flex'
          },
          indicator: {
            backgroundColor: palette.secondary[500],
            borderRadius: '1px'
          }
        },
        defaultProps: {
          textColor: 'primary'
        }
      },
      MuiTab: {
        styleOverrides: {
          root: {
            minHeight: 0,
            minWidth: '0 !important',
            padding: 0,
            marginRight: spacing(2),
            '&:last-child': {
              marginRight: '0'
            },
            '&:hover': {
              color: palette.secondary[600]
            },
            textTransform: 'capitalize'
          },
          textColorPrimary: {
            color: palette.primary[600],
            '&.Mui-selected': {
              color: palette.secondary[500],
              '&:hover': {
                color: palette.secondary[600]
              }
            }
          }
        }
      },
      MuiToolbar: {
        styleOverrides: {
          root: {
            padding: `14px ${spacing(4)}`,
            '& .MuiTablePagination-displayedRows': {
              ...typography.caption1,
              color: palette.primary[400],
              margin: 0
            }
          },
          gutters: {
            '@media (min-width: 0px)': {
              paddingLeft: spacing(4),
              paddingRight: spacing(4)
            }
          }
        }
      },
      MuiAvatar: {
        styleOverrides: {
          colorDefault: {
            color: palette.common.white,
            backgroundColor: palette.secondary[100]
          }
        }
      },
      MuiSvgIcon: {
        styleOverrides: {
          root: {
            height: '16px',
            width: '16px'
          }
        }
      },
      MuiList: {
        styleOverrides: {
          root: {
            '& ul': {
              padding: 0,
              '& > *:not(:last-of-type)': {
                marginBottom: spacing(0.5)
              }
            }
          }
        },
        defaultProps: {
          disablePadding: true
        }
      },
      MuiListItemIcon: {
        styleOverrides: {
          root: {
            minWidth: 0
          }
        }
      },
      MuiButton: {
        styleOverrides: {
          root: {
            ...typography.body2,
            textTransform: 'none',
            height: '40px',
            minWidth: '40px',
            padding: spacing(0, 2),
            '& > svg': {
              margin: spacing(0, -0.5)
            },
            // Support reactSVG
            '& > div': {
              display: 'flex',
              justifyContent: 'center',
              '& > div': {
                height: '16px'
              }
            },
            '& > .MuiButton-startIcon, > .MuiButton-endIcon': {
              '& > div': {
                fontSize: '22px'
              }
            }
          },
          containedPrimary: {
            backgroundColor: palette.secondary[500],
            fill: palette.common.white,
            '&.Mui-disabled': {
              backgroundColor: palette.primary[100],
              color: palette.common.white
            },
            '&:focus': containedPrimaryActive,
            '&:hover': containedPrimaryActive,
            '&:focus-visible': containedPrimaryActive,
            button: {
              backgroundColor: 'red'
            }
          },
          containedSecondary: {
            backgroundColor: palette.common.white,
            border: `1px solid ${palette.secondary[500]}`,
            borderRadius: spacing(0.5),
            color: palette.secondary[500],
            '&:hover': containedSecondaryActive,
            '&:focus-visible': containedSecondaryActive,
            '&.Mui-disabled': {
              backgroundColor: palette.common.white,
              borderColor: palette.primary[100],
              color: palette.primary[100],
              '& svg': {
                fill: palette.primary[100]
              }
            },
            '& svg': {
              fill: palette.secondary[500]
            }
          },
          text: {
            height: 'auto'
          },
          textPrimary: {
            padding: spacing(2, 0),
            '& span': {
              padding: 0
            },
            fill: palette.secondary[500],
            color: palette.secondary[500],
            '&.Mui-disabled': {
              color: palette.primary[100],
              fill: palette.primary[100]
            },
            '&:hover': {
              backgroundColor: 'inherit',
              color: palette.secondary[600],
              fill: palette.secondary[600]
            },
            '&:focus-visible': {
              backgroundColor: 'inherit',
              color: palette.secondary[600],
              fill: palette.secondary[600]
            }
          },
          sizeSmall: {
            height: spacing(4),
            paddingTop: 0,
            paddingBottom: 0
          },
          sizeLarge: {
            ...typography.body2,
            height: '48px',
            minWidth: '48px',
            padding: spacing(2),
            '& span': {
              padding: 0
            },
            '& svg': {
              margin: 0
            }
          },
          containedSizeSmall: {
            ...typography.body2,
            height: spacing(4),
            minWidth: spacing(4),
            '& .MuiButton-endIcon': endIcon,
            '& .MuiButton-startIcon': startIcon,
            '& .MuiButton-root svg': {
              margin: spacing(0, -1)
            },
            '& .MuiButton-root > div': {
              margin: spacing(0, -0.5)
            },
            '&:last-of-type': {
              padding: spacing(0, 1.5)
            }
          },
          endIcon,
          startIcon
        },
        defaultProps: {
          disableElevation: true,
          variant: 'contained'
        }
      },
      MuiTooltip: {
        styleOverrides: {
          tooltip: {
            ...typography.caption1,
            backgroundColor: palette.primary[600],
            padding: spacing(1),
            borderRadius: spacing(0.5),
            display: 'flex',
            alignItems: 'center',
            wordBreak: 'break-word',
            '& .injected-svg': {
              fill: palette.common.white,
              display: 'flex',
              width: spacing(2),
              height: spacing(2)
            }
          },
          arrow: {
            color: palette.primary[600]
          },
          tooltipPlacementLeft: {
            marginRight: spacing(2.25)
          },
          tooltipPlacementRight: {
            marginLeft: spacing(2.25)
          },
          tooltipPlacementTop: {
            marginBottom: spacing(1.75)
          },
          tooltipPlacementBottom: {
            marginTop: spacing(1.75)
          }
        },
        defaultProps: {
          arrow: true,
          leaveDelay: 0,
          placement: 'top'
        }
      },
      MuiCard: {
        styleOverrides: {
          root: {
            padding: spacing(2),
            border: `1px solid ${palette.primary[200]}`,
            borderRadius: spacing(1),
            boxShadow: `0px 2px 6px ${palette.primary[200]}`
          }
        },
        defaultProps: {
          elevation: 0
        }
      },
      MuiMenu: {
        styleOverrides: {
          list: {
            borderRadius: spacing(0.5),
            backgroundColor: palette.common.white,
            '& section.MuiBox-root > ul.MuiList-root > div.MuiListItem-gutters': {
              height: spacing(5)
            }
          },
          paper: {
            border: `1px solid ${palette.primary[200]}`,
            borderRadius: spacing(0.5),
            boxShadow: '0px 0px 10px #3B74A81F',
            overflow: 'unset',
            '&:before': {
              borderTop: `1px solid ${palette.primary[200]}`,
              borderLeft: `1px solid ${palette.primary[200]}`,
              content: "''",
              position: 'absolute',
              top: '-5px',
              left: '8px',
              width: '8px',
              height: '8px',
              backgroundColor: palette.common.white,
              transform: 'rotate(45deg)',
              borderTopLeftRadius: '3px'
            },
            '& a': {
              display: 'flex',
              alignItems: 'center',
              color: 'inherit'
            }
          }
        },
        defaultProps: {
          disablePortal: true
        }
      },
      MuiMenuItem: {
        styleOverrides: {
          root: {
            ...typography.body2,
            height: '40px',
            minHeight: 'unset',
            color: palette.primary[500],
            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
            // @ts-ignore
            pointerEvents: 'all',
            zIndex: 1300,
            transition: `background-color ${transitions.duration.short}ms ${transitions.easing.easeInOut}`,
            '&:hover, &.Mui-focusVisible': {
              backgroundColor: palette.secondary[100],
              '&.menuItemSelected': {
                backgroundColor: palette.secondary[200]
              },
              '& .MuiFormControlLabel-root': {
                color: palette.secondary[500]
              }
            },
            '&:hover .MuiFormControlLabel-root': {
              color: palette.secondary[500]
            },
            '& > div > div': {
              display: 'inline',
              overflow: 'hidden',
              textOverflow: 'ellipsis'
            },
            '& .MuiFormControlLabel-root': {
              '& .MuiFormControlLabel-label': {
                ...typography.body2,
                color: palette.primary[500]
              }
            }
          }
        }
      },
      MuiSwitch: {
        styleOverrides: {
          root: {
            width: '44px',
            height: '24px',
            padding: 0,
            alignItems: 'center',
            borderRadius: spacing(1.75),
            '&:hover': {
              boxShadow: shadows[10]
            }
          },
          track: {
            backgroundColor: palette.primary[200],
            opacity: 1
          },
          thumb: {
            width: '20px',
            height: '20px'
          },
          switchBase: {
            padding: spacing(0.25),
            '&:hover': {
              backgroundColor: 'transparent !important'
            }
          },
          colorPrimary: {
            '& .MuiSwitch-thumb': {
              backgroundColor: palette.common.white
            },
            '& .MuiSwitch-track': {
              backgroundColor: palette.secondary[500],
              opacity: 1
            },
            '&.Mui-checked': {
              '& + .MuiSwitch-track': {
                backgroundColor: palette.secondary[500],
                opacity: 1
              }
            },
            '&.Mui-disabled': {
              '& .MuiSwitch-thumb': {
                backgroundColor: palette.common.white,
                opacity: 0.4
              },
              '& + .MuiSwitch-track': {
                backgroundColor: palette.primary[100],
                opacity: 1
              }
            }
          },
          sizeSmall: {
            width: spacing(3.625),
            height: spacing(2),
            '& .MuiSwitch-switchBase': {
              padding: spacing(0.25),
              '& .MuiSwitch-thumb': {
                width: spacing(1.5),
                height: spacing(1.5)
              },
              '&.Mui-checked': {
                transform: 'translateX(13px)'
              }
            }
          }
        },
        defaultProps: {
          color: 'primary'
        }
      },
      MuiAccordionSummary: {
        styleOverrides: {
          root: {
            height: '72px'
          },
          content: {
            alignItems: 'center'
          },
          expandIconWrapper: {
            '& .MuiButtonBase-root > div > div': {
              display: 'flex',
              width: '16px',
              fill: palette.primary[500]
            }
          }
        },
        defaultProps: {
          // To disable the built in material-ui's button role
          role: undefined,
          tabIndex: null as unknown as undefined,
          expandIcon: (
            <IconButton size="large">
              <ReactSVG src={`${ASSETS_URL}/icons/icon_arrow.svg`} />
            </IconButton>
          )
        }
      },
      MuiLink: {
        styleOverrides: {
          root: {
            textDecoration: 'none',
            '&:hover': {
              textDecoration: 'underline'
            }
          }
        }
      },
      MuiPaper: {
        styleOverrides: {
          root: {
            '&:not(.MuiDrawer-paper):not(.MuiDialog-paper):not(.MuiAlert-root):not(.MuiAutocomplete-paper):not(.MuiAppBar-root):not(.MuiCard-root):not(.MuiAccordion-root)':
              {
                border: `1px solid ${palette.primary[200]}`,
                borderRadius: `${spacing(0.5)}`,
                boxShadow: '0px 0px 10px #3B74A81F',
                overflow: 'unset',
                '&:before': {
                  borderTop: `1px solid ${palette.primary[200]}`,
                  borderLeft: `1px solid ${palette.primary[200]}`,
                  content: "''",
                  position: 'absolute',
                  top: '-5px',
                  left: '8px',
                  width: '8px',
                  height: '8px',
                  backgroundColor: palette.common.white,
                  transform: 'rotate(45deg)'
                }
              }
          }
        }
      },
      MuiButtonBase: {
        defaultProps: {
          disableRipple: true
        }
      },
      MuiRating: {
        defaultProps: {
          readOnly: true,
          icon: <ReactSVG src={`${ASSETS_URL}/icons/icon_new.svg`} />
        }
      },
      MuiSnackbar: {
        defaultProps: {
          anchorOrigin: { vertical: 'top', horizontal: 'center' }
        },
        styleOverrides: {
          root: {
            '& .MuiAlert-action': {
              paddingTop: 0,
              alignItems: 'center',
              '& > *': {
                marginLeft: spacing(2)
              }
            }
          }
        }
      },
      MuiSkeleton: {
        styleOverrides: {
          root: {
            backgroundColor: palette.secondary[100],
            '&.darker': {
              backgroundColor: palette.secondary[200]
            }
          }
        }
      }
    }
  });
};