import { createTheme, PaletteColorOptions } from "@mui/material";
//import { createTheme } from "./types";

declare module '@mui/material/Button' {
  interface ButtonPropsVariantOverrides {
    enter: true;
  }
}

const fontFamily: string = "GilroyRegular";
const fontWeight: string = "600";

const theme = createTheme({
  palette: {
    primary: {
      main: "#111217"
    },
    secondary: {
      main: "#ffffff"
    },
    menu: {
      main: "#2f3339"
    },
    content: {
      main: "#26272c"
    },
    grayLight: {
      main: "#707070"
    },
    grayDark: {
      main: "#45494c"
    },
    grayMedium: {
      main: "#424242"
    },
    grayDisabled: {
      main: "#c0c1c3"
    },
    golden: {
      main: "#eaba5b"
    },
    goldenDark: {
      main: "#fe9903"
    },
    goldenMedium: {
      main: "#2a2b1d"
    }
  },

  typography: {
    body1: {
      fontFamily: fontFamily
    },
    subtitle1: {
      fontFamily: fontFamily,
      fontWeight: fontWeight,
      fontSize: 25
    },
    subtitle2: {
      fontFamily: fontFamily,
      fontSize: 25,
      textAlign: "center"
    },
    caption: {
      fontFamily: fontFamily,
      fontWeight: fontWeight,
      fontSize: 21
    },
    h5: {
      fontFamily: fontFamily,
      fontWeight: fontWeight,
      fontSize: 35
    },
    h6: {
      fontFamily: fontFamily,
      fontWeight: fontWeight,
      fontSize: 18
    },
    button: {
      fontFamily: fontFamily,
      fontWeight: fontWeight,
      fontSize: 22
    },
    h4: {
      fontFamily: fontFamily,
      fontWeight: fontWeight,
      fontSize: 16
    }
  },

  components: {
    MuiButton: {
      variants: [
        {
          props: {
            variant: 'enter' },
          style: {
            backgroundColor: "#26272c",
            padding: '12px 48px',
            "&:hover": {
              backgroundColor: "#2f3339"
            }

          },
        },
      ],
    },
  },



});


declare module '@mui/material/styles' {
  interface Theme {
    palette: {
      primary: {
        main: string
      },
      secondary: {
        main: string;
      },
      menu: {
        main: string;
      },
      content: {
        main: string;
      },
      grayLight: {
        main: string;
      },
      grayDark: {
        main: string;
      },
      grayMedium: {
        main: string;
      },
      grayDisabled: {
        main: string;
      },
      golden: {
        main: string;
      },
      goldenDark: {
        main: string;
      },
      goldenMedium: {
        main: string;
      },
      caption: {
        main: string;
      }
    }
  }
  interface PaletteOptions {
    menu?: PaletteColorOptions;
    content?: PaletteColorOptions;
    grayLight?: PaletteColorOptions;
    grayDark?: PaletteColorOptions;
    grayMedium?: PaletteColorOptions;
    grayDisabled?: PaletteColorOptions;
    golden?: PaletteColorOptions;
    goldenDark?: PaletteColorOptions;
    goldenMedium?: PaletteColorOptions;
  }
  // allow configuration using `createTheme`
  interface TypographyVariants {
    body1: React.CSSProperties;
    subtitle1: React.CSSProperties;
    subtitle2: React.CSSProperties;
    caption: React.CSSProperties;
    h5: React.CSSProperties;
    h6: React.CSSProperties;
    button: React.CSSProperties;
  }
}


export default theme;