import { Theme } from "@mui/material/styles";
import { createTheme, PaletteColorOptions, ThemeOptions } from "@mui/material";
import { deepmerge } from "@mui/utils";
//import { createTheme } from "./types";

declare module "@mui/material/Button" {
  interface ButtonPropsVariantOverrides {
    enter: true;
  }
}
declare module "@mui/material/Paper" {
  interface PaperPropsVariantOverrides {
    bar: true;
  }
}
declare module "@mui/material/styles" {
  interface Theme {
    palette: {
      primary: {
        main: string;
      };
      secondary: {
        main: string;
      };
      menu: {
        main: string;
      };
      content: {
        main: string;
      };
      hover: {
        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;
    hover?: 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;
  }
}

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

const paletteColor = {
  palette: {
    primary: {
      main: "#111217",
    },
    secondary: {
      main: "#e6e8ec",
    },
    menu: {
      main: "#2f3339",
    },
    content: {
      main: "#26272c",
    },
    hover: {
      main: "#191a1e",
    },
    grayLight: {
      main: "#707070",
    },
    grayDark: {
      main: "#45494c",
    },
    grayMedium: {
      main: "#424242",
    },
    grayDisabled: {
      main: "#c0c1c3",
    },
    golden: {
      main: "#eaba5b",
    },
    goldenDark: {
      main: "#fe9903",
    },
    goldenMedium: {
      main: "#2a2b1d",
    },
  },
};
const theme: ThemeOptions = {
  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: {
      styleOverrides: {
        root: {
          color: paletteColor.palette.secondary.main,
          backgroundColor: paletteColor.palette.menu.main,
          padding: "12px",
          fontSize: "13px",
          "&:hover": {
            backgroundColor: paletteColor.palette.hover.main,
          },
        },
      },
      variants: [
        {
          props: {
            variant: "enter",
          },
          style: {
            color: paletteColor.palette.secondary.main,
            backgroundColor: paletteColor.palette.content.main,
            padding: "12px 48px",
            "&:hover": {
              backgroundColor: paletteColor.palette.hover.main,
            },
          },
        },
      ],
    },
    MuiPaper: {
      variants: [
        {
          props: {
            variant: "bar",
          },
          style: {
            backgroundColor: paletteColor.palette.grayMedium.main,
            padding: "15px",
            width: "100%",
          },
        },
      ],
    },
    MuiButtonBase: {
      styleOverrides: {
        root: {
          fontFamily,
          fontSize: "16px",
        },
      },
    },
  },
};
export default createTheme(deepmerge(paletteColor, theme));