import { createTheme } from "@mui/material";
import {
  Color,
  primaryGreen,
  neutral,
  lightGreen,
  magenta,
  green,
  blue,
  red,
  olive,
  error,
} from "../../theme/color";
// import { typography } from "./typography";

function createLightTheme(primaryColor?: Color) {
  const primaryColorVariations = [
    {
      label: "Olive Green",
      color: olive,
    },
    {
      label: "Primary Green",
      color: primaryGreen,
    },
  ];

  const theme = createTheme({
    typography: {
      fontFamily: `Inter, sans-serif`,
    },
    palette: {
      theme: {
        bg: "#ffffff",
        text: "#ff0000",
        primary: {
          ...(primaryColor ? primaryColor : primaryGreen),
        },
        secondary: {
          ...neutral,
        },
        tertiary1: { ...olive },
        tertiary2: { ...lightGreen },
        tertiary3: { ...magenta },
        tertiary4: { ...green },
        tertiary5: { ...blue },
        tertiary6: { ...red },
        error: { ...error },
      },
    },
  });

  return { theme, primaryColorVariations };
}

function createDarkTheme(primaryColor?: Color) {
  const primaryColorVariations = [
    {
      label: "Red",
      color: red,
    },
    {
      label: "Blue",
      color: blue,
    },
  ];

  const theme = createTheme({
    palette: {
      theme: {
        bg: "#d9def2",
        text: "#002fee",
        primary: {
          ...(primaryColor ? primaryColor : blue),
        },
        secondary: {
          ...neutral,
        },
        tertiary1: { ...olive },
        tertiary2: { ...lightGreen },
        tertiary3: { ...magenta },
        tertiary4: { ...green },
        tertiary5: { ...blue },
        tertiary6: { ...red },
        error: { ...error },
      },
    },
  });

  return { theme, primaryColorVariations };
}

export const themes = { createLightTheme, createDarkTheme };