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

let theme = createTheme({
  palette: {
    primary: {
      main: '#258141',
      divider: 'rgba(0,0,0,.1)',
    },
    error: {
      main: '#813a25ff',
      divider: 'rgba(0,0,0,.1)',
    },
    warning: {
      main: '#F7B485',
      divider: 'rgba(0,0,0,.1)',
      color: '#441306',
    },
  },
  components: {
    MuiButton: {
      styleOverrides: {
        root: {
          borderRadius: '.5rem',
          textTransform: 'none',
          height: '2rem',
          padding: '0.38rem 0.75rem',
        },
        startIcon: {
          marginRight: '0.45rem',
        },
      },
      variants: [
        {
          props: { variant: 'grey' },
          style: {
            backgroundColor: '#F3F3F5',
            color: '#4A5565',
            '&:hover': {
              backgroundColor: '#E5E5E7',
            },
          },
        },
        {
          props: { variant: 'outlined', color: 'default' },
          style: {
            borderColor: 'rgba(0, 0, 0, 0.1)',
            color: 'var(--GreyDark, rgba(74, 85, 101, 1))',
            '&:hover': {
              borderColor: 'rgba(0, 0, 0, 0.2)',
              backgroundColor: 'rgba(0, 0, 0, 0.04)',
            },
          },
        },
        {
          props: { variant: 'contained', color: 'warning' },
          style: {
            backgroundColor: 'rgb(255, 242, 228)',
            color: 'rgb(183, 59, 11)',
            boxShadow: 'none',
            border: '1px solid transparent',
            '&:hover': {
              boxShadow: 'none',
              border: '1px solid rgb(183, 59, 11)',
            },
          },
        },
      ],
    },
    MuiFormLabel: {
      styleOverrides: {
        root: {
          marginBottom: '0.4rem',
          color: '#4A5565',
          '&.Mui-focused': {
            color: '#4A5565',
          },
          '& .MuiFormLabel-asterisk': {
            color: '#c24e21',
          },
        },
      },
    },
    MuiOutlinedInput: {
      styleOverrides: {
        root: {
          borderRadius: '8px',
          '& fieldset': {
            border: '1px solid rgba(0,0,0,0.1)',
          },
          '&:hover fieldset': {
            borderColor: 'rgba(0,0,0,0.1)',
          },
          '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
            borderWidth: '1px',
          },
        },
      },
    },
    MuiAutocomplete: {
      styleOverrides: {
        popper: {
          zIndex: 60,
        },
      },
    },
    MuiIconButton: {
      variants: [
        {
          props: { color: 'grey' },
          style: {
            backgroundColor: 'var(--GreyLight, rgba(243, 243, 245, 1))',
            '&:hover': {
              backgroundColor: 'var(--GreyLight, rgba(243, 243, 245, 1))',
            },
          },
        },
        {
          props: { shape: 'rounded' },
          style: {
            borderRadius: '0.5rem',
          },
        },
        {
          props: { variant: 'outlined' },
          style: {
            border: '1px solid rgba(0, 0, 0, 0.1)',
            borderRadius: '0.5rem',
            gap: '0.375rem',
          },
        },
        {
          props: { variant: 'outlined', 'data-active': true },
          style: {
            border: '0.06rem solid var(--Primary, rgba(37, 129, 65, 1))',
            background: 'var(--PrimaryLight, rgba(237, 248, 240, 1))',
          },
        },
      ],
    },
    MuiMenu: {
      styleOverrides: {
        paper: {
          border: '0.06rem solid rgba(233, 233, 233, 1)',
          borderRadius: '0.75rem',
          boxShadow: '0rem 0.25rem 15rem 0rem rgba(0, 0, 0, 0.1)',
          paddingTop: 0,
          paddingBottom: 0,
        },
        list: {
          paddingTop: 0,
          paddingBottom: 0,
        },
      },
    },
    MuiTypography: {
      variants: [
        {
          props: { variant: 'grey' },
          style: {
            color: 'var(--Grey, rgba(74, 85, 101, 1))',
            fontSize: '0.88rem',
          },
        },
      ],
    },
    MuiTooltip: {
      defaultProps: {
        slotProps: {
          popper: {
            modifiers: [
              {
                name: 'offset',
                options: {
                  offset: [0, -8],
                },
              },
            ],
          },
        },
      },
      styleOverrides: {
        tooltip: {
          backgroundColor: '#FFFFFF',
          border: '1px solid #212121',
          color: '#212121',
          '& .MuiTooltip-arrow': {
            color: '#FFFFFF',
            '&::before': {
              border: '1px solid #212121',
            },
          },
        },
      },
    },
  },
  zIndex: {
    modal: 30,
    table: 29,
    tooltip: 40,
  },

  adminTable: {
    fontSize: '0.75rem',
    MuiTableRow: {
      styleOverrides: {
        root: {
          height: '2.75rem',
          '& .MuiTableCell-root': {
            padding: '0px 8px',
            height: '2.75rem',
          },
        },
      },
    },
    MuiTableCell: {
      styleOverrides: {
        root: {
          padding: '0px 8px',
          height: '2.75rem',
        },
      },
    },
  },
});

theme = createTheme(theme);

export default theme;
