import { createTheme } from "@mui/material";


export const penaMuiTheme = createTheme({
    breakpoints: {
        values: {
            xs: 300,
            sm: 560,
            md: 900,
            lg: 1200,
            xl: 1536,
        },
    },
    palette: {
        mode: "light",
        primary: {
            main: "#000000",
        },
        secondary: {
            main: "#252734"
        },
        text: {
            primary: "#000000",
            secondary: "#7E2AEA",
        },
        background: {
            default: "#F2F3F7",
        },
        lightPurple: {
            main: "#333647",
        },
        darkPurple: {
            main: "#252734",
        },
        brightPurple: {
            main: "#7E2AEA",
        },
        fadePurple: {
            main: "#C19AF5",
        },
        grey1: {
            main: "#434657",
        },
        grey2: {
            main: "#9A9AAF",
        },
        grey3: {
            main: "#4D4D4D",
        },
        orange: {
            main: "#FB5607",
        },
        navbarbg: {
            main: "#FFFFFF",
        },
    },
    components: {
        MuiButton: {
            variants: [
                {
                    props: { variant: "pena-contained" },
                    style: ({ theme }) => theme.unstable_sx({
                        border: `1px solid ${theme.palette.brightPurple.main}`,
                        backgroundColor: theme.palette.brightPurple.main,
                        minWidth: "180px",
                        py: "9px",
                        borderRadius: "8px",
                        boxShadow: "none",
                        fontSize: "18px",
                        lineHeight: "24px",
                        fontWeight: 400,
                        textTransform: "none",
                        color: "white",
                        "&:hover": {
                            backgroundColor: "#944FEE",
                        },
                        "&:active": {
                            backgroundColor: "#FFFFFF",
                            color: theme.palette.brightPurple.main,
                        }
                    }),
                },
                {
                    props: { variant: "pena-outlined" },
                    style: ({ theme }) => theme.unstable_sx({
                        border: `1px solid white`,
                        backgroundColor: "rgb(0 0 0 / 0)",
                        minWidth: "180px",
                        py: "9px",
                        borderRadius: "8px",
                        boxShadow: "none",
                        fontSize: "18px",
                        lineHeight: "24px",
                        fontWeight: 400,
                        textTransform: "none",
                        color: "white",
                        "&:hover": {
                            backgroundColor: "#252734",
                        },
                        "&:active": {
                            backgroundColor: theme.palette.brightPurple.main,
                            borderColor: theme.palette.brightPurple.main,
                        }
                    }),
                },
            ],
            defaultProps: {
                disableTouchRipple: true,
            },
        },
        MuiTypography: {
            defaultProps: {
                variantMapping: {
                    p1: "p",
                }
            },
        },
    },
    typography: {
        h5: {
            fontSize: "24px",
            lineHeight: "28.44px",
            fontWeight: 500,
        },
        button: {
            fontSize: "18px",
            lineHeight: "24px",
            fontWeight: 400,
            textTransform: "none",
        },
        body1: {
            fontSize: "18px",
            lineHeight: "21.33px",
            fontWeight: 400,
        },
        body2: {
            fontSize: "16px",
            lineHeight: "20px",
            fontWeight: 500,
        },
        p1: {
            fontSize: "20px",
            lineHeight: "24px",
            fontWeight: 500,
        },
        price: {
            fontWeight: 500,
            fontSize: "20px",
            lineHeight: "24px",
            color: "#4D4D4D",
        },
        oldPrice: {
            fontWeight: 400,
            fontSize: "18px",
            lineHeight: "21px",
            textDecorationLine: "line-through",
            color: "#FB5607",
        },
        fontFamily: [
            "Rubik",
            "-apple-system",
            "BlinkMacSystemFont",
            '"Segoe UI"',
            '"Helvetica Neue"',
            "Arial",
            "sans-serif",
            '"Apple Color Emoji"',
            '"Segoe UI Emoji"',
            '"Segoe UI Symbol"',
        ].join(","),
    },
});

declare module '@mui/material/Button' {
    interface ButtonPropsVariantOverrides {
        "pena-contained": true;
        "pena-outlined": true;
    }
}


declare module "@mui/material/styles" {
    interface Palette {
        lightPurple: Palette["primary"],
        darkPurple: Palette["primary"],
        brightPurple: Palette["primary"],
        fadePurple: Palette["primary"],
        grey1: Palette["primary"],
        grey2: Palette["primary"],
        grey3: Palette["primary"],
        orange: Palette["primary"],
        navbarbg: Palette["primary"],
    }
    interface PaletteOptions {
        lightPurple?: PaletteOptions["primary"],
        darkPurple?: PaletteOptions["primary"],
        brightPurple?: PaletteOptions["primary"],
        fadePurple?: PaletteOptions["primary"],
        grey1?: PaletteOptions["primary"],
        grey2?: PaletteOptions["primary"],
        grey3?: PaletteOptions["primary"],
        orange?: PaletteOptions["primary"],
        navbarbg?: PaletteOptions["primary"],
    }
    interface TypographyVariants {
        infographic: React.CSSProperties;
        p1: React.CSSProperties;
        price: React.CSSProperties;
        oldPrice: React.CSSProperties;
    }
    interface TypographyVariantsOptions {
        infographic?: React.CSSProperties;
        p1?: React.CSSProperties;
        price?: React.CSSProperties;
        oldPrice?: React.CSSProperties;
    }
}

declare module "@mui/material/Typography" {
    interface TypographyPropsVariantOverrides {
        infographic: true;
        p1: true;
        price: true;
        oldPrice: true;
    }
}