import { connect } from 'react-redux';
import { userActions } from '../_actions';

class RegisterPage extends React.Component {
constructor(props) {
    super(props);

    this.state = {
        user: {
            first_name: '',
            last_name: '',
            properties_id: '',
            email: '',
            phone_number: '',
            password: ''
        },
        submitted: false,
        checked: false,
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
}

componentDidMount() {
    this.props.dispatch(userActions.getAll());
}

handleChange(event) {
    const { name, value } = event.target;
    const { user } = this.state;
    this.setState({
        user: {
            ...user,
            [name]: value
        },
        checked: !this.state.checked
    });
}

handleSubmit(event) {
    event.preventDefault();

    this.setState({ submitted: true });
    const { user } = this.state;
    const { dispatch } = this.props;

    if(this.state.checked) {
        if (user.first_name && user.last_name && user.properties_id &&
            user.email && user.phone_number && user.password) {
            dispatch(userActions.register(user));
        }
    } else {
        alert("Please tick the checkbox to agree to Terms and Conditions");
    }
}

render() {
    const { registering, properties } = this.props;
    const { user, submitted } = this.state;
    return (......)

}

function mapStateToProps(state) {
  const { registering } = state.registration;
  const { properties } = state;
  return {
    properties,
    registering
  };
}

const connectedRegisterPage = connect(mapStateToProps)(RegisterPage);
export { connectedRegisterPage as RegisterPage };

export function users(state = {}, action) {
  switch (action.type) {
  case userConstants.GETALL_REQUEST:
    return {
      loading: true
    };
  case userConstants.GETALL_SUCCESS:
    return {
      items: action.properties
      //action.users
    };
  case userConstants.GETALL_FAILURE:
    return {
      error: action.error
    };
  default:
    return state
  }
}

export const userActions = {
            login,
            logout,
            register,
            getAll,
            delete: _delete
        };

           function getAll() {
            return dispatch => {
                dispatch(request());

                userService.getAll()
                    .then(
                        properties => dispatch(success(properties)),
                        error => dispatch(failure(error.toString()))
                    );
            };

            function request() { return { type: userConstants.GETALL_REQUEST } }
            function success(properties) { return { type: userConstants.GETALL_SUCCESS, properties } }
            function failure(error) { return { type: userConstants.GETALL_FAILURE, error } }
        }

// Get All Properties
        function getAll() {
            const requestOptions = {
                method: 'GET'
            };

            return fetch(`${config.apiUrl}/api/properties`, requestOptions).then(handleResponse).then(
                properties => {
                    return properties;
                }
            );
        }