import { createTheme } from "@mui/material";
import themePublic from "./genericPublication";

import type { Theme } from "@mui/material";
import type { QuizTheme } from "@model/settingsData";

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",
    },
  },
});

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

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

const Design2 = createTheme({
  ...themePublic,
  palette: {
    primary: {
      main: "#3D9A63",
    },
    secondary: {
      main: "#252734",
    },
    text: {
      primary: "#FFFFFF",
      secondary: "#3D9A63",
    },

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

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

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

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

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

const Design5 = createTheme({
  ...themePublic,
  palette: {
    primary: {
      main: "#2D99BA",
    },
    secondary: {
      main: "#252734",
    },
    text: {
      primary: "#FFFFFF",
      secondary: "#2D99BA",
    },

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

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

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

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

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

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

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

const Design9 = createTheme({
  ...themePublic,
  palette: {
    primary: {
      main: "#678F48",
    },
    secondary: {
      main: "#252734",
    },
    text: {
      primary: "#FFFFFF",
      secondary: "#678F48",
    },

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

const Design10 = createTheme({
  ...themePublic,
  palette: {
    primary: {
      main: "#3666AF",
    },
    secondary: {
      main: "#252734",
    },
    text: {
      primary: "#FFFFFF",
      secondary: "#3666AF",
    },

    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 },
    Design1: { theme: Design1, isLight: false },
    Design2: { theme: Design2, isLight: false },
    Design3: { theme: Design3, isLight: true },
    Design4: { theme: Design4, isLight: false },
    Design5: { theme: Design5, isLight: false },
    Design6: { theme: Design6, isLight: false },
    Design7: { theme: Design7, isLight: false },
    Design8: { theme: Design8, isLight: false },
    Design9: { theme: Design9, isLight: false },
    Design10: { theme: Design10, isLight: false },
  };