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));