import { createMuiTheme, responsiveFontSizes } from "@material-ui/core/styles";
import grey from "@material-ui/core/colors/grey";

const headerFontWeight = 400;

const typography = {
  h1: {
    fontSize: "2.25rem",
    fontWeight: headerFontWeight,
  },
  h2: {
    fontSize: "2rem",
    letterSpacing: "0",
    fontWeight: headerFontWeight,
  },
  h3: {
    fontSize: "1.75rem",
    fontWeight: headerFontWeight,
  },
  h4: {
    fontSize: "1.5rem",
    fontWeight: headerFontWeight,
  },
  h5: {
    fontSize: "1.25rem",
    fontWeight: headerFontWeight,
  },
  h6: {
    fontSize: "1.1rem",
    fontWeight: headerFontWeight,
  },
  body1: {
    fontSize: "1.06rem",
  },
  fontSize: 17,
  fontWeightRegular: 250,
  fontFamily: ["Helvetica", "Arial", "San-Serif"].join(","),
};

export const lightTheme = responsiveFontSizes(createMuiTheme({
  props: {
    MuiAppBar: {
      position: "sticky",
    },
    MuiCard: {
      elevation: 0,
    },
  },
  overrides: {
    MuiAppBar: {
      root: {
        background: "#fff !important",
      },
    },
  },
  palette: {
    text: {
      primary: grey[900],
    },
    background: {
      default: "#fff",
    },
  },
  typography,
}));

export const darkTheme = responsiveFontSizes(createMuiTheme({
  props: {
    MuiAppBar: {
      position: "sticky",
    },
    MuiCard: {
      elevation: 0,
    },
  },
  palette: {
    type: "dark",
    text: {
      primary: grey[400],
    },
    background: {
      default: grey[900],
      paper: grey[800],
    },
  },
  overrides: {
    MuiTable: {
      root: {
        background: "transparent !important",
      },
    },
    MuiTypography: {
      root: {
        color: grey[400],
      },
    },
  },
  typography,
}));

export default {
  darkTheme,
  lightTheme,
};