import { createTheme } from '@mui/material/styles'

import typographyStyles from 'src/components/typography/styles'

import {
  backgroundColor,
  inputFontFamily,
  secondaryColor,
  fontColor,
  offColor,
  subheaderColor,
  fontSize3,
  zircon,
  zircon2,
  primaryColor,
  disabledColor2,
  disabledColor,
  smallestFontSize,
  inputFontWeight
} from './variables'

const { p } = typographyStyles

let theme = createTheme({
  typography: {
    fontFamily: inputFontFamily
  },
  palette: {
    primary: {
      light: secondaryColor,
      dark: secondaryColor,
      main: secondaryColor
    },
    secondary: {
      light: secondaryColor,
      dark: secondaryColor,
      main: secondaryColor
    },
    background: {
      default: backgroundColor
    }
  }
})

theme = createTheme(theme, {
  components: {
    MuiTypography: {
      styleOverrides: {
        root: { ...p },
        body1: { ...p }
      }
    },
    MuiButtonBase: {
      defaultProps: {
        disableRipple: true
      }
    },
    MuiSwitch: {
      styleOverrides: {
        root: {
          width: 32,
          height: 20,
          padding: 0,
          margin: theme.spacing(1)
        },
        thumb: {
          width: 16,
          height: 16
        },
        track: {
          borderRadius: 17,
          border: 'none',
          backgroundColor: offColor,
          opacity: 1,
          transition: theme.transitions.create(['background-color', 'border'])
        },
        switchBase: {
          padding: 2,
          '&.Mui-disabled': {
            color: disabledColor2,
            '& + .MuiSwitch-track': {
              backgroundColor: disabledColor,
              opacity: 1
            }
          },
          '&.Mui-checked': {
            transform: 'translateX(58%)',
            color: theme.palette.common.white,
            '&.Mui-disabled': {
              color: disabledColor2
            },
            '& + .MuiSwitch-track': {
              backgroundColor: secondaryColor,
              opacity: 1,
              border: 'none'
            }
          },
          '&.Mui-focusVisible .MuiSwitch-thumb': {
            border: '6px solid #fff',
            boxShadow: '0 0 4px 0 rgba(0,0,0,0.24)'
          }
        }
      }
    },
    MuiMenuItem: {
      styleOverrides: {
        root: {
          '&:hover': {
            backgroundColor: subheaderColor
          },
          '&.Mui-selected': {
            '&:hover': {
              backgroundColor: subheaderColor
            },
            backgroundColor: subheaderColor
          }
        }
      }
    },
    MuiAutocomplete: {
      styleOverrides: {
        root: {
          color: fontColor
        },
        noOptions: {
          padding: `6px 16px`
        },
        option: {
          '&.Mui-focused': {
            backgroundColor: subheaderColor
          },
          '&[aria-selected="true"]': {
            backgroundColor: `${subheaderColor} !important`
          }
        },
        paper: {
          color: fontColor,
          margin: 0
        },
        listbox: {
          padding: 0
        },
        tag: {
          '&[data-tag-index="0"]': {
            marginLeft: 0
          },
          margin: 2,
          backgroundColor: subheaderColor,
          borderRadius: 4,
          height: 18
        }
      }
    },
    MuiPaper: {
      styleOverrides: {
        elevation1: {
          boxShadow: '0 0 4px 0 rgba(0, 0, 0, 0.08)'
        }
      }
    },
    MuiChip: {
      styleOverrides: {
        root: {
          backgroundColor: subheaderColor,
          borderRadius: 4,
          margin: theme.spacing(0.5, 0.25),
          height: 18
        },
        label: {
          fontSize: smallestFontSize,
          color: fontColor,
          fontWeight: inputFontWeight,
          fontFamily: inputFontFamily,
          paddingRight: 4,
          paddingLeft: 4
        }
      }
    },
    MuiInput: {
      styleOverrides: {
        root: {
          color: fontColor
        },
        underline: {
          '&:before': {
            borderBottom: `2px solid ${fontColor}`
          }
        }
      }
    },
    MuiInputLabel: {
      styleOverrides: {
        root: {
          font: 'inherit',
          fontSize: fontSize3,
          color: offColor
        },
        shrink: {
          color: fontColor,
          transform: 'translate(0, 1.7px) scale(0.83)'
        }
      }
    },
    MuiFormLabel: {
      styleOverrides: {
        root: {
          '&.Mui-focused': {
            color: fontColor
          }
        }
      }
    },
    MuiListItem: {
      styleOverrides: {
        root: {
          '&:nth-of-type(odd)': {
            backgroundColor: backgroundColor
          }
        }
      }
    },
    MuiToggleButton: {
      styleOverrides: {
        root: {
          '&.Mui-selected': {
            backgroundColor: zircon,
            borderColor: primaryColor,
            borderTopColor: `${primaryColor} !important`,
            '&:hover': {
              backgroundColor: zircon2
            }
          },
          '&:hover': {
            backgroundColor: zircon2
          }
        }
      }
    },
    MuiToggleButtonGroup: {
      styleOverrides: {
        vertical: {
          borderRadius: 8,
          border: 'none',
          borderColor: zircon
        },
        firstButton: {
          borderTop: '1px solid',
          borderTopColor: zircon,
          borderTopRightRadius: 8,
          borderTopLeftRadius: 8,
          borderBottomRightRadius: 8,
          borderBottomLeftRadius: 8
        },
        lastButton: {
          borderTop: '1px solid',
          borderTopColor: zircon,
          borderTopRightRadius: 8,
          borderTopLeftRadius: 8,
          borderBottomRightRadius: 8,
          borderBottomLeftRadius: 8
        },
        middleButton: {
          borderTop: '1px solid',
          borderTopColor: zircon,
          borderTopRightRadius: 8,
          borderTopLeftRadius: 8,
          borderBottomRightRadius: 8,
          borderBottomLeftRadius: 8
        }
      }
    }
  }
})

export default theme