import { withStateHandlers } from 'recompose'

import actions from '../../actions'
const { logIn, logOut } = actions

const mapDispatchToProps = {
    logIn,
    logOut,
}

const onFieldChangedFactory = field => state => event => ({
    ...state,
    [field]: event.target.value,
})

const enhance = compose(
    connect(null, mapDispatchToProps),
    withStateHandlers(
        { email: '', password: '' },
        {
            onEmailChange: onFieldChangedFactory('email'),
            onPasswordChange: onFieldChangedFactory('password'),
            onSubmit: (state, props) => event => {
                event.preventDefault()
                props.logIn(state.email, state.password)
            },
            onClickLogOut: (state, { logOut }) => () => logOut(),
        }
    )
)

const LoginForm = ({ user, onEmailChange, onPasswordChange, onSubmit, onClickLogOut }) =>
    <form onSubmit={onSubmit}>
        <input type="text" value={user.email} onChange={onEmailChange} />
        <input type="password" value={user.password} onChange={onPasswordChange} />
        <button>Log in</button>
        <button onClick={onClickLogOut}>Log out</button>
    </form>

LoginForm.propTypes = {
    user: PropTypes.shape({
        email: PropTypes.string.isRequired,
        password: PropTypes.string.isRequired,
    }),
    onEmailChange: PropTypes.func.isRequired,
    onPasswordChange: PropTypes.func.isRequired,
    onSubmit: PropTypes.func.isRequired,
    onClickLogOut: PropTypes.func.isRequired,
}

export default enhance(LoginForm)