import React, { Component } from 'react';
import { connect } from 'react-redux';
import { login, logoff } from '../redux/reducers/user/actions';
import { WRONG_CREDS } from '../redux/reducers/user/constants';

function dispatchToProps(dispatch){
	return {
		login: creds => dispatch(login(creds)),
		logoff: () => {dispatch(logoff())},
	}
}

function mapState(state){
	return {
		isLogged: state.usersReducer.isLogged,
		error: state.usersReducer.error,
	}
}

class MenuConnected extends Component{
	constructor(props){
		super(props);
		this.state = {
			loginFormIsVisible: false,
			userCreds: {
				username: '',
				password: '',
			},
		}
	}
	showForm(){
		this.setState({
			loginFormIsVisible: true,
		})
	}
	hideForm(){
		this.setState({
			loginFormIsVisible: false,
		})
	}
	inputChange(field,val){
		const userCreds = {...this.state.userCreds};
		userCreds[field] = val;
		this.setState({
			userCreds: userCreds,
		})
	}
	login(e){
		e.preventDefault();
		this.props.login({...this.state.userCreds});
	}
	render(){
		return(
			<div className='w3-sidebar w3-bar-block w3-border-right'>
				{
					this.props.isLogged ?
					<button
						className='w3-bar-item w3-button'
						onClick={this.props.logoff}
					>
						Logoff
					</button>
					:
					this.state.loginFormIsVisible ?
					<form className='w3-bar-item' onSubmit={e => this.login(e)}>
						<input
							className='w3-input'
							type='text'
							placeholder='Username'
							onChange={(e)=>{this.inputChange('username',e.target.value)}}
							autoFocus
						/>
						<input
							className='w3-input'
							type='password'
							placeholder='Password'
							onChange={(e)=>{this.inputChange('password',e.target.value)}}
						/>
						<button type='submit' className='w3-button'>Login</button>
						<button
							type='reset'
							className='w3-button'
							onClick={()=>{this.hideForm()}}
						>
							Cancel
						</button>
						{this.props.error.error === WRONG_CREDS ?
							<div className='w3-panel w3-center w3-bar-item'>
								<label>Wrong username/password</label>
							</div>
							:
							<></>
						}
					</form>
					:
					<button
						className='w3-bar-item w3-button'
						onClick={()=>{this.showForm()}}
					>
						Login
					</button>
				}
			</div>
		)
	}
}

export default connect(mapState, dispatchToProps)(MenuConnected);