import { alpha, darken, lighten } from '@mui/material'
import { ThemeOptions, createTheme } from '@mui/material/styles'
import { customCssBaseline } from './customCssBaseline'

const borderRadius = {
  small: '5px',
  large: '10px',
}

const PRIMARY_FONT = 'Avenir'
const SECONDARY_FONT = 'Poppins'

export const SCROLLBAR_DARK = {
  '&::-webkit-scrollbar': {
    width: '0.5em',
    height: '0.5em',
  },

  '&::-webkit-scrollbar-thumb': {
    backgroundColor: 'rgba(0, 0, 0, 0.15)',
    borderRadius: '3px',

    '&:hover': {
      background: 'rgba(0, 0, 0, 0.2)',
    },
  },
}

export const SCROLLBAR_LIGHT = {
  '&::-webkit-scrollbar': {
    width: '0.5em',
    height: '0.5em',
  },

  '&::-webkit-scrollbar-thumb': {
    backgroundColor: 'rgba(255, 255, 255, 0.15)',
    borderRadius: '3px',

    '&:hover': {
      background: 'rgba(255, 255, 255, 0.2)',
    },
  },
}

const themeColors = {
  primary: '#1E19F5',
  secondary: '#121212',
  secondaryLight: '#1212121A',
  success: '#57CA22',
  warning: '#FFA319',
  error: '#BC2C3D',
  info: '#33C2FF',
  black: '#223354',
  white: '#ffffff',
  primaryAlt: '#000C57',
  yellow: '#FFAF20',
  green: '#99C15B',
  grayLight: '#F2F2F2',
  pureBlack: '#000000',
  pureWhite: '#ffffff',
  secondaryDark: '#EFEFEF',
  offsetBlue: '#149ECD',
}

const colors = {
  primary: {
    main: themeColors.primary,
    light: alpha(themeColors.primary, 0.5),
    lighter: alpha(themeColors.primary, 0.1),
  },
  secondary: {
    main: themeColors.secondary,
    light: themeColors.grayLight,
    lighter: themeColors.secondaryLight,
    dark: themeColors.secondaryDark,
  },
  common: {
    green: themeColors.green,
    yellow: themeColors.yellow,
    black: themeColors.pureBlack,
    white: themeColors.pureWhite,
    blue: themeColors.offsetBlue,
  },
  error: {
    lighter: alpha(themeColors.error, 0.1),
    light: lighten(themeColors.error, 0.3),
    main: themeColors.error,
    dark: darken(themeColors.error, 0.2),
  },
}

const borders = {
  primary: `1px solid ${themeColors.primary}`,
  grayLight: `1px solid ${themeColors.secondaryLight}`,
}

const themeOptions = {
  typography: {
    fontFamily: ['Poppins', 'Avenir', 'sans-serif'].join(','),
  },
  borders: {
    ...borders,
  },
  palette: {
    primary: {
      dark: '#1E19F5',
      main: colors.primary.main,
      light: colors.primary.light,
      lighter: colors.primary.lighter,
    },
    secondary: {
      main: '#121212',
      light: colors.secondary.light,
      dark: themeColors.secondaryDark,
      lighter: themeColors.secondaryLight,
    },
    common: {
      green: themeColors.green,
      yellow: themeColors.yellow,
      blue: themeColors.offsetBlue,
    },
    error: {
      main: '#BC2C3D',
    },
    text: {
      primary: '#121212',
      secondary: '#959595',
      disabled: '#12121280',
    },
  },
  components: {
    MuiTypography: {
      styleOverrides: {
        root: {
          color: '#121212',
          fontSize: '14px',
          fontWeight: 500,
          fontFamily: PRIMARY_FONT,
        },
        h1: {
          fontSize: '18px',
          fontWeight: 600,
          fontFamily: SECONDARY_FONT,
        },
        h3: {
          fontSize: '16px',
          fontWeight: 600,
          fontFamily: SECONDARY_FONT,
        },
        h5: {
          fontSize: '14px',
          fontWeight: 500,
          fontFamily: SECONDARY_FONT,
        },
        h6: {
          fontSize: '15px',
          fontWeight: 600,
          fontFamily: SECONDARY_FONT,
        },
        paragraph: {
          fontSize: '16px',
          marginBottom: 0,
        },
        body2: {
          fontWeight: 600,
        },
        subtitle1: {
          fontSize: '14px',
          fontWeight: 500,
          color: '#121212b3',
        },
        subtitle2: {
          fontSize: '13px',
          fontWeight: 500,
          color: '#959595',
        },
      },
    },
    MuiButton: {
      defaultProps: {
        variant: 'contained',
        disableRipple: true,
        disableElevation: true,
        disableFocusRipple: true,
        disableTouchRipple: true,
      },
      styleOverrides: {
        root: {
          fontFamily: SECONDARY_FONT,
          height: '40px',
          fontSize: '14px',
          padding: '10px 40px',
          textTransform: 'capitalize',
          fontWeight: 600,
          borderRadius: borderRadius.small,
          '&.MuiButton-sizeSmall': {
            padding: '6px 8px',
            height: '40px',
            fontSize: '14px',
          },
        },
      },
    },
    MuiButtonBase: {
      defaultProps: {
        disableRipple: true,
        disableTouchRipple: true,
      },
      styleOverrides: {
        root: {
          fontFamily: SECONDARY_FONT,
          fontSize: '14px',
          fontWeight: 600,
        },
      },
    },
    MuiInputBase: {
      styleOverrides: {
        root: {
          fontFamily: PRIMARY_FONT,
          fontWeight: 500,
          minHeight: '50px',
          borderRadius: '10px',
          '& input': {
            fontSize: '15px',
            boxSizing: 'border-box',
            minHeight: '50px',
          },
          '&.MuiInputBase-sizeSmall': {
            borderRadius: '6px',
            minHeight: '40px',
            '& input': { minHeight: '40px' },
            '& fieldset': { minHeight: '40px' },
          },
        },
      },
    },
    MuiOutlinedInput: {
      styleOverrides: {
        root: {
          borderRadius: borderRadius.large,
          '& .MuiInputAdornment-positionEnd.MuiInputAdornment-outlined': {
            paddingRight: '14px',
          },
          '& .MuiInputAdornment-positionStart.MuiInputAdornment-outlined': {
            paddingLeft: '14px',
          },
          '& .MuiOutlinedInput-notchedOutline': {
            top: 1,
            minHeight: '50px',
            border: borders.grayLight,
            '& legend': {
              '& > span': {
                paddingRight: 2,
              },
            },
          },
          '&:hover .MuiOutlinedInput-notchedOutline': {
            borderColor: alpha(colors.common.black, 0.2),
          },
          '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
            borderColor: colors.primary.main,
            borderWidth: '0.5px',
            '& :hover': {
              borderColor: colors.primary.main,
              borderWidth: '0.5px',
            },
          },
        },
      },
    },
    MuiCheckbox: {
      defaultProps: {
        disableRipple: true,
      },
      styleOverrides: {
        root: {
          '& .MuiSvgIcon-root': {
            width: '18px',
            height: '18px',
          },
        },
      },
    },
    MuiFormControl: {
      styleOverrides: {
        root: {
          position: 'relative',
          '&.MuiTextField-root > .MuiInputBase-root': {
            padding: 0,
          },
          '& .MuiInputBase-inputMultiline': {
            padding: '14px',
          },
          '& .MuiSelect-select': {
            padding: '14px',
            '&.MuiInputBase-inputSizeSmall': {
              padding: '10px 14px',
            },
          },
          '& .MuiAutocomplete-inputRoot.MuiInputBase-root': {
            padding: '5px',
            '& > .MuiInputBase-input': {
              marginLeft: '5px',
              minHeight: '40px',
              padding: 0,
            },
          },
          '& .MuiFormHelperText-root': {
            fontStyle: 'oblique',
            position: 'absolute',
            fontSize: '13px',
            fontWeight: 600,
            textAlign: 'right',
            right: 0,
            bottom: -26,
          },
        },
      },
    },
    MuiAutocomplete: {
      styleOverrides: {
        tag: { margin: 1 },
        root: {
          '.MuiAutocomplete-inputRoot.MuiOutlinedInput-root .MuiAutocomplete-endAdornment':
            { right: 14 },
        },
        clearIndicator: {
          background: colors.error.lighter,
          borderRadius: '5px',
          color: colors.error.main,
          marginRight: 8,
          '&:hover': {
            background: colors.error.lighter,
            color: colors.error.dark,
          },
        },
        popupIndicator: {
          color: alpha(colors.common.black, 0.5),
          '&:hover': {
            background: colors.primary.lighter,
            color: colors.primary.main,
          },
        },
      },
    },
    MuiSwitch: {
      styleOverrides: {
        root: {
          height: '20px',
          padding: 0,
          '& .MuiSwitch-switchBase': {
            padding: 0,
            transitionDuration: '300ms',
            '&.Mui-checked': {
              color: colors.common.green,
              '& .MuiSwitch-thumb': {
                marginLeft: '0px',
              },
              '& + .MuiSwitch-track': {
                opacity: '1',
                border: `0.5px solid ${colors.common.green}`,
                background: '#EDEDED 0% 0% no-repeat padding-box',
              },
              '&.Mui-disabled + .MuiSwitch-track': {
                opacity: 0.5,
              },
            },
            '&.Mui-disabled .MuiSwitch-thumb': {
              color: colors.common.green,
              opacity: '0.5',
            },
          },
          '& .MuiSwitch-thumb': {
            width: '18px',
            height: '16px',
            borderRadius: '5px',
            marginTop: '2px',
            boxShadow: 'none',
            marginLeft: '2px',
          },
          '& .MuiSwitch-track': {
            borderRadius: '5px',
            width: '40px',
            height: '20px',
            backgroundColor: '#EDEDED',
            paddingLeft: '12px',
            opacity: '1',
          },
        },
      },
    },
    MuiMenu: {
      styleOverrides: {
        paper: {
          '&::-webkit-scrollbar': {
            width: '0.5em',
            height: '0.5em',
          },

          '&::-webkit-scrollbar-thumb': {
            backgroundColor: 'rgba(0, 0, 0, 0.15)',
            borderRadius: '3px',

            '&:hover': {
              background: 'rgba(0, 0, 0, 0.2)',
            },
          },
        },
      },
    },
    MuiIconButton: {
      defaultProps: {
        disableRipple: true,
        disableFocusRipple: true,
        disableTouchRipple: true,
        size: 'small',
      },
      styleOverrides: {
        root: {
          borderRadius: '10px',
        },
      },
    },
    MuiFormLabel: {
      styleOverrides: {
        root: {
          fontSize: '14px',
          color: '#959595',
        },
      },
    },
    MuiTextField: {
      defaultProps: {
        variant: 'outlined',
        color: 'primary',
        fullWidth: true,
      },
    },
    MuiTable: {
      styleOverrides: {
        root: {
          border: borders.grayLight,
          fontFamily: PRIMARY_FONT,
          fontSize: '14px',
          fontWeight: 500,
        },
      },
    },
    MuiTableHead: {
      styleOverrides: {
        root: {
          backgroundColor: themeColors.grayLight,
          '& th': {
            lineHeight: '20px',
            fontSize: '14px',
            fontWeight: 600,
            fontFamily: SECONDARY_FONT,
          },
        },
      },
    },
    MuiTableCell: {
      styleOverrides: {
        root: {
          lineHeight: '20px',
          padding: '15px',
          fontWeight: 500,
          fontFamily: PRIMARY_FONT,
          fontSize: '14px',
          '& .MuiCheckbox-root': {
            padding: 0,
          },
        },
      },
    },
    MuiCard: {
      styleOverrides: {
        root: {
          border: borders.grayLight,
          boxShadow: 'none',
          borderRadius: '10px',
          '&.MuiPaper-root': {
            height: 'fit-content',
          },
        },
      },
    },
    MuiMenuItem: {
      styleOverrides: {
        root: {
          fontWeight: 500,
          fontFamily: SECONDARY_FONT,
          fontSize: '14px',
        },
      },
    },
    MuiListItemText: {
      styleOverrides: {
        root: {
          '& .MuiTypography-root': {
            fontWeight: 500,
            fontFamily: SECONDARY_FONT,
            fontSize: '14px',
          },
        },
      },
    },
    MuiCardHeader: {
      styleOverrides: {
        root: {
          padding: '20px',
          '& .MuiCardHeader-title': {
            fontSize: '15px',
            fontFamily: SECONDARY_FONT,
            fontWeight: 500,
          },
          '& .MuiTypography-root.MuiCardHeader-subheader': {
            marginTop: '3px',
            fontSize: '13px',
            fontFamily: PRIMARY_FONT,
            fontWeight: 400,
          },
        },
      },
    },
    MuiCardContent: {
      styleOverrides: {
        root: {
          padding: '20px',
          paddingTop: 0,
        },
      },
    },
    MuiCardActions: {
      styleOverrides: {
        root: {
          padding: 0,
        },
      },
    },
    MuiFormHelperText: {
      styleOverrides: {
        root: {
          fontFamily: PRIMARY_FONT,
          fontSize: '12px',
          color: themeColors.error,
          marginLeft: '2px',
          marginRight: '2px',
        },
      },
    },
    MuiDialogTitle: {
      styleOverrides: {
        root: {
          fontFamily: SECONDARY_FONT,
          fontWeight: 500,
          fontSize: '16px',
          padding: 0,
        },
      },
    },
    MuiChip: {
      styleOverrides: {
        root: {
          fontFamily: PRIMARY_FONT,
          fontWeight: 500,
          fontSize: '14px',
        },
      },
    },
    MuiListItemButton: {
      styleOverrides: {
        root: {
          fontFamily: SECONDARY_FONT,
          fontSize: '14px',
          '& .MuiListItemText-primary.MuiTypography-root': {
            fontFamily: SECONDARY_FONT,
          },
        },
      },
    },
    MuiRadio: {
      defaultProps: {
        disableRipple: true,
      },
    },
    MuiCssBaseline: {
      styleOverrides: customCssBaseline,
    },
  },
}

// A custom theme for this app
const muiTheme = createTheme({ ...themeOptions })

export default muiTheme
