export class LoginForm extends React.Component {

componentWillReceiveProps(newProps){

    const { location, isAuthenticated, history } = newProps;
    if(isAuthenticated){

        if(location.state && location.state.referrer){
           history.push(location.state.referrer.pathname);
        }else{
            history.replace('/app');
        }
    }
}

render() {
    let usernameInput, passwordInput;
    const { showErrorMessage, errorMessage, onLogin } = this.props;
    return  (


        <div className='sme-login-center-view-container'>
            <HeaderComponent />

            <Col lg={4} lgOffset={4} sm={12} xs={12}>
                <Col lg={10} lgOffset={2} sm={4} smOffset={4}>
                    <Form className="sme-login-box" onSubmit={(e)=> {
                                                        e.preventDefault();
                                                        let creds = {username: usernameInput.value, password: passwordInput.value};
                                                        onLogin(creds);
                                                    }
                                                }>

                            <span className='text-center sme-login-title-text'><h4>User Login</h4></span>

                        <FormGroup >
                            {errorMessage ? (<Alert bsStyle="danger"><strong>Error!</strong> {errorMessage}</Alert>) : null }
                        </FormGroup>

                        <FormGroup controlId="formHorizontalUsername">
                            <FormControl type="username" placeholder="Username" bsStyle="form-rounded"
                                inputRef={(ref) => {usernameInput = ref}}
                            />
                            <FormControl.Feedback>
                                <span className="fa fa-user-o sme-login-input-feedback-span"></span>
                            </FormControl.Feedback>
                        </FormGroup>

                        <FormGroup controlId="formHorizontalPassword">
                            <FormControl type="password" placeholder="Password"
                                inputRef={(ref) => {passwordInput = ref}}/>
                            <FormControl.Feedback>
                                <span className="fa fa-lock sme-login-input-feedback-span"></span>
                            </FormControl.Feedback>
                        </FormGroup>

                        <FormGroup>
                            <Button type="submit" block >Login</Button>
                        </FormGroup>

                    </Form>
                </Col>
            </Col>
        </div>

    );
}
}

const mapStateToProps = state => {
    return state.authenticationReducer.login
}

export const Login = withRouter(connect( mapStateToProps,{ onLogin: loginUser })(LoginForm))

export function requestLogin(creds) {
  return {
    type: LOGIN_REQUEST,
    isFetching: true,
    isAuthenticated: false,
    creds
  }
}
export function receiveLogin() {
  return {
    type: LOGIN_SUCCESS,
    isFetching: false,
    isAuthenticated: true
  }
}
export function loginError(message) {
  return {
    type: LOGIN_FAILURE,
    isFetching: false,
    isAuthenticated: false,
    errorMessage: message
  }
}
export function loginUser(creds) {
  return dispatch => {
    dispatch(requestLogin(creds))
        return axios.post(url, data)
            .then(response => {
                if (!response.status === 200) {
                    dispatch(loginError(response.statusText))
                } else {
                    dispatch(receiveLogin())
                }
            }
       ).catch(function (error) {
            dispatch(loginError(error.response.statusText))
        }
    )  }
    }

export function login(state = {
        isFetching: false,
        isAuthenticated: false
      }, action) {

      switch (action.type) {
        case LOGIN_REQUEST:
        case LOGIN_SUCCESS:
        case LOGIN_FAILURE:
          return Object.assign({}, state, action)
        default:
          return state
      }
    }

class AuthorizedRouteComponent extends React.Component {

  componentWillMount() {
    this.props.getUser();
  }
  render() {
    const { component: Component, pending, logged, location, ...rest } = this.props;
    return (
      <Route {...rest} render={props => {
        if (pending) return <div>Loading...</div>
            return logged
              ? <Component {...this.props} />
              :<Redirect to={{
                  pathname: '/auth/login',
                  state: { referrer: location }
            }}/>
          }} />
        )
      }
    }

    const mapStateToProps = state => {
      return state.authenticationReducer.loggedUser
    }

    const AuthorizedRoute = connect(mapStateToProps, { getUser: getLoggedUser })(AuthorizedRouteComponent);

    export default AuthorizedRoute

export function requestFetch() {
  return {
    type: FETCH_REQUEST,
    pending: true,
    logged: false
  }
}
export function receiveFetch(userData) {
  return {
    type: FETCH_SUCCESS,
    pending: false,
    logged: true,
    userData
  }
}
export function fetchError(message) {
  return {
    type: FETCH_FAILURE,
    pending: false,
    logged: false,
    errorMessage:message
  }
}
export function getLoggedUser() {
  return dispatch => {
    dispatch(requestFetch())
    return axios.get('/o3/rest/user/userdetails')
            .then(response => {

                if (!response.status === 200) {
                  dispatch(fetchError(response.statusText))
                } else {
                  dispatch(receiveFetch(response.data))
                }
            }
       ).catch(function (error) {
            dispatch(fetchError(error.response.statusText))
          }
        )
  }
}

export function loggedUser(state = initialState, action) {
  switch (action.type) {
    case FETCH_REQUEST:
    case FETCH_SUCCESS:
    case FETCH_FAILURE:
      let obj = Object.assign({}, state, action);
      return obj;
    default:
      return state
  }
}