import { ThemeOptions, createTheme } from "@mui/material";
import { pink } from "@mui/material/colors";

const defaultOptions: ThemeOptions = {
  typography: {
    fontFamily: [
      "Helvetica Neue",
      "Helvetica",
      "Arial",
      "-apple-system",
      "system-ui",
      "sans-serif",
    ].join(","),
  },
  palette: {
    action: {
      hover: "#287FCE",
      selected: "#287FCE"
    },
    mode: "light",
    text: {
      primary: "#26333F",
      secondary: "#5F6878",
      disabled: "#838B9C",
    },
    primary: {
      main: "#1976d2",
    },
    warning: {
      main: "#ed6c02",
    },
    success: {
      main: "#2e7d32",
      contrastText: "#000"
    },
    error: {
      main: "#d32f2f",
    },
    secondary: {
      main: "#9c27b0",
    },
  },
}


const darkThemeOptions: ThemeOptions = {
  typography: {
    fontFamily: [
      "Helvetica Neue",
      "Helvetica",
      "Arial",
      "-apple-system",
      "system-ui",
      "sans-serif",
    ].join(","),
  },
  palette: {
    action: {
      hover: "#287FCE",
      selected: "#287FCE"
    },
    mode: "dark",
    text: {
      primary: "#FFFFFF",
      secondary: "#5F6878",
      disabled: "#838B9C",
    },
    primary: {
      main: "#1976d2",
    },
    warning: {
      main: "#ed6c02",
    },
    success: {
      main: "#2e7d32",
    },
    error: {
      main: "#d32f2f",
    },
    secondary: {
      main: "#9c27b0",
    },
  },
}

const aiseraThemeOptions: ThemeOptions = {
  typography: {
    fontFamily: [
      "Helvetica Neue",
      "Helvetica",
      "Arial",
      "-apple-system",
      "system-ui",
      "sans-serif",
    ].join(","),
  },
  palette: {
    action: {
      hover: "#F3F9FF",
      selected: "#287FCE"
    },
    mode: "light",
    text: {
      primary: "#26333F",
      secondary: "#5F6878",
      disabled: "#838B9C",
    },
    primary: {
      main: "#287FCE",
    },
    warning: {
      main: "#FF9900",
    },
    success: {
      main: "#36C9A9",
    },
    error: {
      main: "#FF5D5F",
    },
    secondary: {
      main: pink["A400"],
    },

  },
  components: {
    MuiAlert: {
      styleOverrides: {
        filledSuccess: {
          color: "#FFF"
        },
        filledError: {
          color: "#FFF"
        },
        filledWarning: {
          color: "#FFF"
        },
      },
    },
    MuiButton: {
      styleOverrides: {
        containedSuccess: {
          backgroundColor: "#319B84",
          color: "#FFF"
        },
        containedWarning: {
          backgroundColor: "#C97A03",
          color: '#FFF'
        },
        containedError: {
          color: '#FFF'
        }
      },
    },

    MuiMenuItem: {
      styleOverrides: {
        root: {
          "&.Mui-selected": { backgroundColor: "#287FCE", color: "#FFF" }
        }
      }
    }

  },

}

export const lightTheme = createTheme(defaultOptions);

export const darkTheme = createTheme(darkThemeOptions);

export const aiseraTheme = createTheme(aiseraThemeOptions);