import React from "react"

import { makeStyles } from "@material-ui/core/styles"
import { createMuiTheme } from "@material-ui/core/styles"
import { ThemeProvider } from "@material-ui/styles"
import green from "@material-ui/core/colors/green"
import blue from "@material-ui/core/colors/blue"
import red from "@material-ui/core/colors/red"

let themeOptions = createMuiTheme({
  overrides: {
    MuiToggleButton: {
      root: {
        fontSize: "medium",
        height: "41px",
      },
    },
    MuiSlider: {
      marked: {
        marginBottom: 0,
      },
    },
    MuiAppBar: {
      colorPrimary: {
        backgroundColor: "rgba(0, 0, 0, 0.8)",
      },
    },
    MuiButton: {
      root: {
        color: "#ffffff",
        textTransform: "none",
        "&:hover": {
          backgroundColor: "#000000",
        },
      },
    },
  },
  palette: {
    background: {
      paper: "rgba(255, 255, 255, 0.9)",
      light: "rgba(255, 255, 255, 0.6)",
      alternateLight: "#ffe",
      dark: "rgba(0, 0, 0, 0.6)",
      base: "rgba(255, 255, 255, 0.6)",
      success: "rgba(0, 191, 0, 0.8)",
      loss: "rgba(241, 75, 75, 0.8)",
    },
    primary: {
      main: "#ffffff",
    },
    secondary: {
      main: "#000000",
    },
  },
})

themeOptions.palette.success = themeOptions.palette.augmentColor({
  main: green[800],
})

themeOptions.palette.error = themeOptions.palette.augmentColor({
  main: red[900],
})

themeOptions.palette.info = themeOptions.palette.augmentColor({
  main: blue[500],
})

themeOptions.MuiCssBaseline
themeOptions.typography.h1 = {
  fontSize: "x-large",
  fontWeight: 700,
}

themeOptions.typography.h2 = {
  fontSize: "large",
  fontWeight: 600,
}

themeOptions.typography.h3 = {
  fontSize: "medium",
  fontWeight: 700,
}

themeOptions.typography.h4 = {
  fontSize: "medium",
  fontWeight: 400,
}

themeOptions.typography.h5 = {
  fontSize: "medium",
  fontWeight: 700,
}

themeOptions.typography.h6 = {
  fontSize: "xx-small",
}

// themeOptions = responsiveFontSizes(themeOptions)

export const useDroppableStyle = makeStyles(() => ({
  root: {
    flex: 1,
    height: "100%",
    width: "100%",
    margin: 0,
  },
}))

export const useButtonStyles = makeStyles(theme => {
  const defaultButton = {
    padding: theme.spacing(0.5, 2.5),
    fontSize: "medium",
  }
  return {
    success: {
      ...defaultButton,
      backgroundColor: theme.palette.success.main,
      color: theme.palette.success.contrastText,
      "&:hover": {
        backgroundColor: green[600],
        color: theme.palette.success.contrastText,
      },
    },
    error: {
      ...defaultButton,
      backgroundColor: theme.palette.error.main,
      color: theme.palette.error.contrastText,
      "&:hover": {
        backgroundColor: red[700],
        color: theme.palette.success.contrastText,
      },
    },
    info: {
      ...defaultButton,
      backgroundColor: theme.palette.info.main,
      color: theme.palette.info.contrastText,
      "&:hover": {
        backgroundColor: blue[300],
        color: theme.palette.success.contrastText,
      },
    },
  }
})

const Theme = ({ children, theme = themeOptions, }) => (
  <ThemeProvider theme={ theme }>
    { children }
  </ThemeProvider>
)

export default Theme
