import React, { useEffect } from 'react'
import './App.css'
import { Switch, Route, useHistory } from 'react-router-dom'
import { ThemeProvider, createMuiTheme } from '@material-ui/core'
import { red, teal } from '@material-ui/core/colors'

import Inicio from './Screens/Inicio'
import Formulario from './Screens/Formulario'

function App() {
	const history = useHistory()

	const estado = localStorage.getItem('estado')
	useEffect(
		() => {
			if (estado === 'pendiente') history.push('/pendiente')
			if (estado === 'finalizado') history.push('/finalizado')
		},
		[ estado, history ]
	)

	const primaryColor = teal[300]
	const secondaryColor = red[300]

	const theme = createMuiTheme({
		palette: {
			type: 'dark',
			primary: { main: primaryColor },
			secondary: { main: secondaryColor },
			background: {
				default: '#121212',
				level1: '#212121',
				level2: '#212121',
				paper: '#424242'
			}
        },
        props: {
            MuiPaper: {
                variant: 'outlined'
            },
            MuiButton: {
                variant: 'contained',
                disableElevation: true,
                style: {textTransform: 'none'}
            }
        }
	})
	return (
		<ThemeProvider theme={theme}>
			<Switch>
                <Route path='/formulario'>
                    <Formulario/>
                </Route>
				<Route path='/'>
					<Inicio />
				</Route>
			</Switch>
		</ThemeProvider>
	)
}

export default App