import { createTheme, Theme } from "@mui/material";
import { CustomTheme } from ".";

//declare new button variants here
declare module '@mui/material/styles' {
    interface ButtonPropsVariantOverrides {
        content: true;
        helper: true;
        basic: true;
    }

    interface TypographyPropsVariantOverrides {
        footerLink: true;
    }
}

const defaultBackground = '#f1e0ff';

//purpleish pink background mesh gradient
const backgroundGradient = 'radial-gradient(at 100% 44%, hsla(272,100%,70%,0.37) 0px, transparent 50%), radial-gradient(at 15% 100%, hsla(279,100%,76%,0.57) 0px, transparent 50%)';

// border gradient used in GradientBorderBox component
const borderBoxGradient = 'radial-gradient(at 100% 44%, hsla(272,100%,70%,0.37) 0px, transparent 50%), radial-gradient(at 15% 100%, hsla(279,100%,76%,0.57) 0px, transparent 50%)';

// transparent black to dark blue gradient used in DialogContainer component
const dialogContainerGradient = `radial-gradient(at 100% 44%, hsla(272,100%,70%,0.37) 0px, transparent 50%), radial-gradient(at 15% 100%, hsla(279,100%,76%,0.57) 0px, transparent 50%)`;

//default horizontal padding for sections
const sectionPaddingX = { xs: 1, md: '3%', lg: '7%' };

const paperBackground: string = '#FAFAFA'

const primaryPink: string = '#E9C3FC';
const secondaryPink: string = '#CE6DFF'
const pureWhite: string = '#FFFFFF';
const black: string = '#000000'

const primaryFont: string = 'Comfortaa'

declare module '@mui/material/Button' {
    interface ButtonPropsVariantOverrides {
      content: true;
      helper: true;
      basic: true;
    }
}

declare module '@mui/material/Typography' {
    interface TypographyPropsVariantOverrides {
      footerLink: true;
    }
}

export const primaryTheme: CustomTheme = createTheme({
    palette: {
        mode: 'light',
        background: {
            default: defaultBackground,
            paper: paperBackground
        },
        primary: {
            main: primaryPink
        },
        secondary: {
            main: secondaryPink
        }
    },
    components: {
        MuiButton: {
            variants: [
                {
                    props: { variant: 'content' },
                    style: {
                        backgroundColor: 'transparent',
                        border: `2px solid ${primaryPink}`,
                        padding: '14px',
                        margin: '2px 0',
                    }
                },
                {
                    props: { variant: 'contained' },
                    style: {
                        backgroundColor: pureWhite,
                        border: `2px solid ${primaryPink}`,
                        fontWeight: '700',
                        padding: '16px 28px',
                        fontSize: '18px',
                        boxShadow: 'none',
                        width: '100%',
                        '&:hover': {
                            backgroundColor: pureWhite,
                        }
                    }
                },
                {
                    props: { variant: 'helper' },
                    style: {
                        backgroundColor: 'transparent',
                        color: black,
                        fontSize: '12px',
                        '&:hover': {
                            backgroundColor: 'transparent',
                            color: '#00000090'
                        }
                    }
                },
                {
                    props: { variant: 'basic' },
                    style: {
                        backgroundColor: primaryPink,
                        fontWeight: '500',
                        fontSize: '16px',
                        '&:hover': {
                            backgroundColor: primaryPink,
                        }                    
                    }
                }
            ]
        },
        MuiCard: {
            styleOverrides: {
                root: {
                    borderRadius: '15px'
                }
            }
        }
    },
    typography: {
        h1: {
            fontSize: '7rem',
            fontWeight: '400',
            '@media (max-width: 600px)': {
                fontSize: '3.8rem'
            }
        },
        h2: {
            fontSize: '3rem',
            letterSpacing: '-.7px',
            fontWeight: '400',
            '@media (max-width: 600px)': {
                fontSize: '2.3rem'
            },
            marginBottom: '20px'
        },
        h3: {
            fontSize: '26px',
            fontWeight: '700',
            marginBottom: '20px'
        },
        h4: {
            fontSize: '16px',
            fontWeight: '400'
        },
        h5: {
            fontSize: '1.5rem',
            fontWieght: '400',
            marginBottom: '20px'
        },
        h6: {
            fontSize: '23px',
            fontWeight: '600'
        },
        subtitle1: {
            fontWeight: '800',
            opacity: '0.5',
        },
        body1: {
            marginBottom: '0'
        },
        body2: {
            fontSize: '18px'
        },
        fontFamily: "'Playfair Display', serif"
    },
}) as CustomTheme;



primaryTheme.customProperties = {
    sectionPaddingX,
    backgroundGradient,
    borderBoxGradient,
    dialogContainerGradient,
    primaryPink
};