import React, {PropTypes, Component} from "react";
import {bindActionCreators} from "redux";
import {connect} from "react-redux";
import PageComponent from "./PageComponent";
import * as pageActions from "../actions/PageActions";
import RegForm from "../forms/RegForm";
import axios from "axios";
import cookie from "react-cookie";

class About extends Component {

    // componentDidMount() {
    //
    //     var instance = axios.create({
    //         baseURL: 'http://localhost:9000',
    //         headers: {
    //             'Authorization': 'Bearer ' + cookie.load("token"),
    //             'Content-Type': 'application/json'
    //         }
    //     });
    //     instance.get('/all').then(response => {
    //         console.log(response.data);
    //     })
    //         .catch(function (error) {
    //             console.log(error);
    //         });
    // }

    handleSubmit = (values) => {
        console.log(values);

        var instance = axios.create({
            baseURL: 'http://localhost:9000',
            auth: {
                username: 'job4j',
                password: 'password'
            }
        });

        var username = values.email;
        var password = values.password;

        const data = new FormData();
        data.append('grant_type', 'password');
        data.append('username', username);
        data.append('password', password);

        instance.post('/oauth/token', data).then(response => {
            console.log(response.data.access_token);
            cookie.save('token', response.data.access_token, {path: '/'});

            const {setAuth} = this.props.actions;
            setAuth(true);

        }).catch(error => {
            console.log(error);
        });
    };

    render() {
        const {page, user} = this.props;
        const {setName} = this.props.actions;

        return <div>
            <PageComponent name={page.name} setName={setName}/>
            <br/>
            { user.isAuth ? null : <RegForm onSubmit={this.handleSubmit}/> }
        </div>
    }
}

function mapStateToProps(state) {
    return {
        page: state.page,
        user: state.user
    }
}

function mapDispatchToProps(dispatch) {
    return {
        actions: bindActionCreators(pageActions, dispatch),
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(About)