import React from 'react'
import { connect } from 'react-redux'
import FadeIn from 'react-fade-in'
import { compose, withStateHandlers, branch, renderComponent } from 'recompose'
import { withStyles } from '@material-ui/core/styles';

import TextField from '@material-ui/core/TextField'
import Button from '@material-ui/core/Button'
import CircularProgress from '@material-ui/core/CircularProgress';

const styles = theme => ({
    margin: {
      marginTop: 20,
    },
    heading: {
        fontWeight:100,
        margin:0
    }
})

const enhance = compose(
    connect(
        state => ({
            // isLoggedIn: state.authentication.isLoggedIn
        }),
        dispatch => ({
            // attemptLogin: (username: string, password: string) => dispatch(authenticationActions.login({ username, password })),
        })
    ),
    withStateHandlers(
        {
            username: 'username',
            password: 'password',
            isLoading: false
        },
        {
            onSubmit: (state, props) => () => {
                // props.attemptLogin(state.username, state.password)
                props.toggleLoading(true)
                return state
            },
            toggleLoading: (state) => (toggle) => ({ isLoading: toggle }),
            changeInput: (state) => (text, key) => {
                return { ...state, [key]: text }
            }
        }
    ),
    withStyles(styles)
)

const Login = enhance(({classes, username, password, changeInput, onSubmit, isLoading}) => {
    return (
        <FadeIn transitionDuration={1000}>
            <div className='login'>
                { isLoading ? <CircularProgress /> :
                    <div>
                        <TextField
                            autoFocus
                            margin="dense"
                            id="name"
                            label="Email Address"
                            type="email"
                            value={username}
                            fullWidth
                            className={classes.margin}
                            onChange={(event) => {changeInput(event.target.value, 'username')}}
                        />
                        <TextField
                            autoFocus
                            margin="dense"
                            id="password"
                            label="Password"
                            type="password"
                            value={password}
                            fullWidth
                            className={classes.margin}
                            onChange={(event) => {changeInput(event.target.value, 'password')}}
                        />
                        <Button className={classes.margin} variant="contained" fullWidth color="primary" onClick={() => onSubmit()}>
                            Login
                        </Button>
                    </div>
                }


            </div>
        </FadeIn>
    )
})

export default Login