import React from 'react'
import MuiButton, { ButtonProps } from '@material-ui/core/Button'
import {
  withStyles,
  MuiThemeProvider,
  createMuiTheme,
} from '@material-ui/core/styles'

const theme = createMuiTheme({
  typography: {
    useNextVariants: true,
  },
  shape: {
    borderRadius: 2,
  },
  palette: {
    primary: {
      main: '#E3B82A',
    },
    secondary: {
      main: '#7B7B7B',
    },
  },
})

const BaseButton = withStyles({
  root: {
    height: '5rem',
    margin: '1.5rem 0 0 0',
    padding: '0px 1px',
  },
  label: {
    textTransform: 'none',
    fontFamily: 'Lato, sans-serif',
    fontStyle: 'normal',
    fontSize: '1rem',
    lineHeight: '120%',
  },
})(MuiButton)

const PrimaryButton = withStyles({
  root: {
    background: 'var(--multiColorRadialGradient)',
  },
  disabled: {
    background: 'var(--multiColorRadialGradient) !important',
    opacity: '0.6',
  },
  label: {
    color: '#000000',
    fontWeight: 'bold',
  },
})(BaseButton)

const SecondaryButton = withStyles({
  root: {
    border: '1px solid #121212',
  },
  label: {
    color: '#E0E0E0',
    fontWeight: 'normal',
  },
})(BaseButton)

function MyButton(props: ButtonProps) {
  return props.color === 'secondary' ? (
    <SecondaryButton
      fullWidth
      color="secondary"
      variant="outlined"
      {...props}
    />
  ) : (
    <PrimaryButton fullWidth color="primary" variant="contained" {...props} />
  )
}

const StyledOauthButton: React.ComponentType<ButtonProps> = props => {
  return (
    <>
      <MuiThemeProvider theme={theme}>
        <MyButton {...props}>{props.children}</MyButton>
      </MuiThemeProvider>
    </>
  )
}

StyledOauthButton.defaultProps = {
  color: 'primary',
}

export default StyledOauthButton