//actions/userActions.js ================================================================================
import axios from 'axios';

export const USER_SIGN_UP_RESPONSE = 'USER_SIGN_UP_RESPONSE';

const SIGN_UP_URL = 'http://localhost:8080/api/user/new';

export function userSignupResponse(response) {
    return {
        type: USER_SIGN_UP_RESPONSE,
        payload: response
    };
}

export function userSignupRequest(userData) {
    return (dispatch) => {
        axios.post(SIGN_UP_URL, userData)
            .then((res) => {
                dispatch(userSignupResponse(res));
            })
            .catch(() => console.log('err'));
    };
}


//reducers/users.js ================================================================================
import { USER_SIGN_UP_RESPONSE } from './../actions/userActions';

export function userSignupResponse(state = {}, action) {
    switch (action.type) {

        case USER_SIGN_UP_RESPONSE:
            return { ...state, userSignupResponse: action.payload }

        default:
            return state;
    }
}


//SignupForm ================================================================================

import React, { Component } from 'react';
import { connect } from 'react-redux';

import { userSignupRequest } from './../../actions/userActions';

import './SignupForm.css';


class SignupForm extends Component {

    constructor(props) {
        super(props);

        this.state = {};


        this.onSignupFormSubmit = this.onSignupFormSubmit.bind(this);
        this.onSignupFormFieldsChange = this.onSignupFormFieldsChange.bind(this);
    }



    onSignupFormSubmit(e) {
        e.preventDefault();
        this.props.userSignupRequest(this.state);
        console.log(this.props);
    }

    onSignupFormFieldsChange(e) {
        this.setState({[e.target.name]: e.target.value});
    }

    render() {
        return (
            <form className="signupForm" onSubmit={ this.onSignupFormSubmit }>
                <button
                    type="button"
                    className="signupForm__closeBtn"
                    onClick={ this.props.closeSignupFormModal } >
                        <span></span>
                        <span></span>
                </button>
                <h2 className="signupForm__title">Sign up</h2>
                <p className="signupForm__subtitle">Already have an account? <span onClick={this.props.showSigninModalForm}>Sign in</span></p>
                <input  type="email"
                        className="signupForm__input"
                        placeholder="Email address..."
                        name="email"
                        onChange={ this.onSignupFormFieldsChange }/>
                <input  type="password"
                        className="signupForm__input"
                        placeholder="Password..."
                        name="password"
                        onChange={ this.onSignupFormFieldsChange }/>
                <input  type="password"
                        className="signupForm__input"
                        placeholder="Repeat password..." />
                <button type="submit"
                        className="signupForm__button">Sign up</button>

            </form>
        );
    }
}


const mapStateToProps = (state) => {
    return {
        userSignupResponse: state.userSignupResponse
    };
}

const mapDispatchToProps = (dispatch) => {
    return {
        userSignupRequest: (userData) => {
            dispatch(userSignupRequest(userData))
        }

    }
}

export default connect(mapStateToProps, mapDispatchToProps)(SignupForm);


//reducers/index.js ================================================================================

import { combineReducers } from 'redux';

import { userSignupResponse } from './users';

export default combineReducers({
    userSignupResponse
});


//store/configureStore.js ================================================================================

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './../reducers';

export default function configureStore(initialState) {
    return createStore(
        rootReducer,
        initialState,
        applyMiddleware(thunk)
    );
}

//index.js ================================================================================

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';

import configureStore from './store/configureStore';
const store = configureStore();

import './index.css';

import IndexPage from './containers/IndexPage';

ReactDOM.render(
  <Provider store={store}>
    <IndexPage />
  </Provider>,
  document.getElementById('root')
);