import React from 'react';
import { connect } from 'react-redux';
// import { bindActionCreators } from 'redux'
// import {} from './../../../actions'
import axios from 'axios';

// redux-connected container

class profilePage extends React.Component {

    state = {
        user: {}
    }

    getUser = () => {
        const randomUserId = Math.ceil(Math.random() * 10);

        axios.post(`https://quiz.maxcrc.de/api/v1/user`,{
            "login": 'ddd',
            "password":"jhgfhgg"

        })
            .then(({ data }) => this.setState({
                user: data
            }))
            .catch(({ message }) => console.warn(message))
    }

    componentDidMount() {
        this.getUser();
    }

    render() {
        const { user } = this.state;

        console.log(user);

        return (
            <div className="page page--bottom-only profile-page">
                <section className="container section section--about">
                    <h2 className="section__element section__element--header">{user.login}</h2>
                    <img className="section__element section__element--image" src={user.avatar} alt="avatar" />
                    <div className="sedtion__element section__element--login">
                        <h3>Login</h3>
                        <p>{user.login}<button className="link link--btn right">Change login</button></p>
                    </div>
                    <div className="section__element section__element--">
                        <h3>E-mail</h3>
                        <p>{user.email}<button className="link link--btn right">Change e-mail</button></p>
                    </div>
                    <div className="section__element section__element--">
                        <h3>Status</h3>
                        <p>{user.description}</p>
                    </div>
                </section>
                <section className="container section section--stats">
                    <div className="section__element section__element--">
                        <h3>Member Since</h3>
                        <p>{new Date(user.createdAt).toLocaleString()}</p>
                    </div>
                    <div className="section__element section__element--comments">
                        <h3>Last comments</h3>
                        <p className="comments-block">
                            {
                                user.comments && user.comments
                                    .slice(0, 60)
                                    .map(el =>
                                        <p>
                                            <h4>{new Date(el.createdAt).toLocaleString()}</h4>
                                            {el.text}
                                        </p>)
                            }
                        </p>
                    </div>
                </section>
            </div>
        )
    }

}

const
    mapStateToProps = state => ({
        user: state.user
    })
// mapDispatchToProps = dispatch => bindActionCreators({}, dispatch)

export default connect(mapStateToProps)(profilePage);