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",
        },
        purple: {
            main: "#7E2AEA", // from brightPurple
            light: "#C19AF5", // from fadePurple
        },
        bg: {
            main: "#333647", // from lightPurple
            dark: "#252734", // from darkPurple
        },
        gray: {
            main: "#9A9AAF", // from grey2
            dark: "#4D4D4D", // from grey3
        },
        orange: {
            main: "#FB5607",
            light: "#FC712F",
        },
    },
    components: {
        MuiButton: {
            variants: [
                {
                    props: { variant: "pena-contained-dark" },
                    style: ({ theme }) => theme.unstable_sx({
                        border: `1px solid ${theme.palette.purple.main}`,
                        backgroundColor: theme.palette.purple.main,
                        minWidth: "180px",
                        py: "9px",
                        px: "43px",
                        borderRadius: "8px",
                        boxShadow: "none",
                        fontSize: "18px",
                        lineHeight: "24px",
                        fontWeight: 400,
                        textTransform: "none",
                        color: "white",
                        "&:hover": {
                            backgroundColor: "#944FEE",
                            border: `1px solid #944FEE`,
                        },
                        "&:active": {
                            backgroundColor: "#FFFFFF",
                            color: theme.palette.purple.main,
                        }
                    }),
                },
                {
                    props: { variant: "pena-outlined-dark" },
                    style: ({ theme }) => theme.unstable_sx({
                        border: `1px solid white`,
                        backgroundColor: "rgb(0 0 0 / 0)",
                        minWidth: "180px",
                        py: "9px",
                        px: "43px",
                        borderRadius: "8px",
                        boxShadow: "none",
                        fontSize: "18px",
                        lineHeight: "24px",
                        fontWeight: 400,
                        textTransform: "none",
                        color: "white",
                        "&:hover": {
                            backgroundColor: theme.palette.bg.dark,
                        },
                        "&:active": {
                            backgroundColor: theme.palette.purple.main,
                            borderColor: theme.palette.purple.main,
                        }
                    }),
                },
                {
                    props: { variant: "pena-contained-light" },
                    style: ({ theme }) => theme.unstable_sx({
                        border: `1px solid white`,
                        backgroundColor: "white",
                        minWidth: "180px",
                        py: "9px",
                        px: "43px",
                        borderRadius: "8px",
                        boxShadow: "none",
                        fontSize: "18px",
                        lineHeight: "24px",
                        fontWeight: 400,
                        textTransform: "none",
                        color: theme.palette.bg.dark,
                        "&:hover": {
                            backgroundColor: theme.palette.background.default,
                        },
                        "&:active": {
                            backgroundColor: "black",
                            color: "white",
                            border: `1px solid black`,
                        }
                    }),
                },
                {
                    props: { variant: "pena-outlined-light" },
                    style: ({ theme }) => theme.unstable_sx({
                        border: `1px solid white`,
                        backgroundColor: "rgb(0 0 0 / 0)",
                        minWidth: "180px",
                        py: "9px",
                        px: "43px",
                        borderRadius: "8px",
                        boxShadow: "none",
                        fontSize: "18px",
                        lineHeight: "24px",
                        fontWeight: 400,
                        textTransform: "none",
                        color: "white",
                        "&:hover": {
                            backgroundColor: "#581CA7",
                        },
                        "&:active": {
                            backgroundColor: "black",
                            borderColor: "black",
                        }
                    }),
                },
                {
                    props: { variant: "pena-outlined-purple" },
                    style: ({ theme }) => theme.unstable_sx({
                        border: `1px solid ${theme.palette.purple.main}`,
                        backgroundColor: "rgb(0 0 0 / 0)",
                        minWidth: "180px",
                        py: "9px",
                        px: "43px",
                        borderRadius: "8px",
                        boxShadow: "none",
                        fontSize: "18px",
                        lineHeight: "24px",
                        fontWeight: 400,
                        textTransform: "none",
                        color: theme.palette.purple.main,
                        "&:hover": {
                            backgroundColor: theme.palette.background.default,
                        },
                        "&:active": {
                            backgroundColor: "#581CA7",
                            borderColor: "#581CA7",
                            color: "white",
                        }
                    }),
                },
                {
                    props: { variant: "pena-navitem-dark" },
                    style: ({ theme }) => theme.unstable_sx({
                        backgroundColor: "rgb(0 0 0 / 0)",
                        p: 0,
                        boxShadow: "none",
                        fontSize: "16px",
                        lineHeight: "20px",
                        fontWeight: 500,
                        textTransform: "none",
                        color: "white",
                        "&:hover": {
                            color: "#944FEE",
                        },
                        "&:active": {
                            color: "#944FEE",
                        }
                    }),
                },
                {
                    props: { variant: "pena-navitem-light" },
                    style: ({ theme }) => theme.unstable_sx({
                        backgroundColor: "rgb(0 0 0 / 0)",
                        p: 0,
                        boxShadow: "none",
                        fontSize: "16px",
                        lineHeight: "20px",
                        fontWeight: 500,
                        textTransform: "none",
                        color: "black",
                        "&:hover": {
                            color: theme.palette.purple.main,
                        },
                        "&:active": {
                            color: theme.palette.purple.main,
                        }
                    }),
                },
            ],
            defaultProps: {
                disableTouchRipple: true,
            },
        },
        MuiIconButton: {
            defaultProps: {
                disableTouchRipple: true,
            },
        },
        MuiTypography: {
            defaultProps: {
                variantMapping: {
                    p1: "p",
                }
            },
        },
    },
    typography: palette => ({
        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: palette.gray.dark,
        },
        oldPrice: {
            fontWeight: 400,
            fontSize: "18px",
            lineHeight: "21px",
            textDecorationLine: "line-through",
            color: palette.orange.main,
        },
        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-light": true;
        "pena-outlined-light": true;
        "pena-contained-dark": true;
        "pena-outlined-dark": true;
        "pena-outlined-purple": true;
        "pena-navitem-light": true;
        "pena-navitem-dark": true;
    }
}

declare module "@mui/material/styles" {
    interface Palette {
        purple: Palette["primary"],
        bg: Palette["primary"],
        gray: Palette["primary"],
        orange: Palette["primary"],
    }
    interface PaletteOptions {
        purple?: PaletteOptions["primary"],
        bg?: PaletteOptions["primary"],
        gray?: PaletteOptions["primary"],
        orange?: 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;
    }
}