import { QuizTheme } from "@model/settingsData";
import { Theme, createTheme } from "@mui/material";
import themePublic from "./genericPublication";


const StandardTheme = createTheme({
    ...themePublic,
    palette: {
        primary: {
            main: "#7E2AEA",
        },
        secondary: {
            main: "#252734"
        },
        text: {
            primary: "#333647",
            secondary: "#7E2AEA",
        },

        background: {
            default: "#FFFFFF",
        },
    }
})

const StandardDarkTheme = createTheme({
    ...themePublic,
    palette: {
        primary: {
            main: "#7E2AEA",
        },
        secondary: {
            main: "#252734"
        },
        text: {
            primary: "#FFFFFF",
            secondary: "#7E2AEA",
        },

        background: {
            default: "#333647",
        },
    }
})

const PinkTheme = createTheme({
    ...themePublic,
    palette: {
        primary: {
            main: "#D34085",
        },
        secondary: {
            main: "#252734"
        },
        text: {
            primary: "#333647",
            secondary: "#D34085",
        },

        background: {
            default: "#FFF9FC",
        },
    }
})

const PinkDarkTheme = createTheme({
    ...themePublic,
    palette: {
        primary: {
            main: "#D34085",
        },
        secondary: {
            main: "#252734"
        },
        text: {
            primary: "#FFFFFF",
            secondary: "#D34085",
        },

        background: {
            default: "#333647",
        },
    }
})

const BlackWhiteTheme = createTheme({
    ...themePublic,
    palette: {
        primary: {
            main: "#4E4D51",
        },
        secondary: {
            main: "#252734"
        },
        text: {
            primary: "#333647",
            secondary: "#FFF9FC",
        },

        background: {
            default: "#FFFFFF",
        },
    }
})

const OliveTheme = createTheme({
    ...themePublic,
    palette: {
        primary: {
            main: "#758E4F",
        },
        secondary: {
            main: "#252734"
        },
        text: {
            primary: "#333647",
            secondary: "#758E4F",
        },

        background: {
            default: "#F9FBF1",
        },
    }
})

const PurpleTheme = createTheme({
    ...themePublic,
    palette: {
        primary: {
            main: "#7E2AEA",
        },
        secondary: {
            main: "#252734"
        },
        text: {
            primary: "#333647",
            secondary: "#7E2AEA",
        },

        background: {
            default: "#FBF8FF",
        },
    }
})

const YellowTheme = createTheme({
    ...themePublic,
    palette: {
        primary: {
            main: "#F2B133",
        },
        secondary: {
            main: "#252734"
        },
        text: {
            primary: "#333647",
            secondary: "#F2B133",
        },

        background: {
            default: "#FFFCF6",
        },
    }
})

const GoldDarkTheme = createTheme({
    ...themePublic,
    palette: {
        primary: {
            main: "#E6AA37",
        },
        secondary: {
            main: "#FFFCF6",
        },
        text: {
            primary: "#FFFFFF",
            secondary: "#F2B133",
        },

        background: {
            default: "#333647",
        },
    }
})

const BlueTheme = createTheme({
    ...themePublic,
    palette: {
        primary: {
            main: "#4964ED",
        },
        secondary: {
            main: "#252734"
        },
        text: {
            primary: "#333647",
            secondary: "#4964ED",
        },

        background: {
            default: "#F5F7FF",
        },
    }
})

const BlueDarkTheme = createTheme({
    ...themePublic,
    palette: {
        primary: {
            main: "#07A0C3",
        },
        secondary: {
            main: "#252734"
        },
        text: {
            primary: "#FFFFFF",
            secondary: "#07A0C3",
        },

        background: {
            default: "#333647",
        },
    }
})

export const quizThemes: Record<QuizTheme, { theme: Theme; isLight: boolean; }> = {
    StandardTheme: { theme: StandardTheme, isLight: true },
    StandardDarkTheme: { theme: StandardDarkTheme, isLight: false },
    PinkTheme: { theme: PinkTheme, isLight: true },
    PinkDarkTheme: { theme: PinkDarkTheme, isLight: false },
    BlackWhiteTheme: { theme: BlackWhiteTheme, isLight: true },
    OliveTheme: { theme: OliveTheme, isLight: true },
    YellowTheme: { theme: YellowTheme, isLight: true },
    GoldDarkTheme: { theme: GoldDarkTheme, isLight: false },
    PurpleTheme: { theme: PurpleTheme, isLight: true },
    BlueTheme: { theme: BlueTheme, isLight: true },
    BlueDarkTheme: { theme: BlueDarkTheme, isLight: false },
};
