import React from 'react';
import { AppRegistry, View, Image } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux'
// import {} from './../../../actions'
import axios from 'axios';
import { userChangeRequest } from '../../../actions/userFields/changeEmail'
import {passwordChangeRequest} from '../../../actions/userFields/changePassword'

import ChangeLogin from './LoginFild';
import ChangePassword from './PasswordFields'

// redux-connected container

class profilePage extends React.Component {

    state = {
        files: null,
        photo: null
    }
    change = e => {
        const reader = new FileReader();

        const file = e.target.files[0];
        this.setState({ file });

        reader.onloadend = () => {
            this.setState({
                photo: reader.result
            });
        };
        reader.readAsDataURL(file);
    };

    post = () => {
        const file = new FormData();

        file.append("profilePhoto", this.state.file);
    };

    lol = () => {
        const { user: { data: { id } }, userChangeRequest } = this.props;

        userChangeRequest({
            id,
            login: "lol wtf"
        })
    }


    render() {
        const { user:{data}, userChangeRequest,passwordChangeRequest } = this.props;

        // console.log('User', user);
        // console.log('Props', this.props);
        // console.log('State', this.state);

        return (
            <div className="page page--bottom-only profile-page">
                <section className="container section section--about">
                    {/* <h2 className="section__element section__element--header">{data.login}</h2> */}
        
                    <div className="sedtion__element section__element--login">
                        <h3>Email</h3>
                        {/* <p>{user.login}<button className="link link--btn right" >Change login</button></p> */}
                        <ChangeLogin className="link link--btn right" data={data} actions={{ userChangeRequest }}>{data.login}</ChangeLogin>
                    </div>
                    <div className="section__element section__element--">
                        <h3>Password</h3>
                        <ChangePassword className="link link--btn right" data={data} actions={{ passwordChangeRequest }}>{data.password}</ChangePassword>
                    </div>
                    <div className="section__element section__element--">
                        <h3>Status</h3>
                        <p>{data.description}</p>
                    </div>
                </section>
                <section className="container section section--stats">
                    <div className="section__element section__element--">
                        <h3>Member Since</h3>
                        <p>{new Date(data.createdAt).toLocaleString()}</p>
                    </div>
                    <div className="section__element section__element--comments">
                        <h3>Last comments</h3>
                        <p className="comments-block">
                            {
                                data.comments && data.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
    });

const mapDispatchToProps = dispatch => bindActionCreators({ userChangeRequest, passwordChangeRequest }, dispatch);

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