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",
      dark: "#581CA7",
    },
    secondary: {
      main: "#252734",
    },
    text: {
      primary: "#333647",
      secondary: "#7E2AEA",
    },

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

const Design10 = createTheme({
  ...themePublic,
  palette: {
    primary: {
      main: "#3666AF",
      dark: "#1B478A",
    },
    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 },
  crutch_FurnitureABC: { theme: crutch_FurnitureABC, 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 },
};