import React from 'react';
import ReactMarkdown from 'react-markdown';
import { connect } from 'react-redux';
import { fetchUserProfile } from '../actions';
import { Link } from 'react-router-dom';

class User extends React.Component {
    constructor (props) {
        super(props)
        this.state = {
            isLoading: true
        }
    }
    componentDidMount() {
        const { user } = this.props.match.params
        this.props.fetchUserProfile(user)
        .then(() => this.setState({isLoading: false}))
    }
    renderList() {
        const posts = this.props.user.currentUser.posts
        return posts.map(post => {
            return (
                <div className="item" key={post.id}>
                    <div className="content">
                        <div className="description">
                            <h2><b><u><Link to={"/posts/" + post.slug}>{post.title}</Link></u></b></h2>
                            <h3><b>By <Link to={"/users/"+ post.author}>{post.author}</Link></b></h3>
                            <h4>Posted {post.time_published}</h4>
                            <ReactMarkdown source={post.content} />
                        </div>
                    </div>
                </div>
            );
        });
    }

    render () {
        const {user} = this.props
        const {isLoading} = this.state

        if (isLoading) {
            return <p>Loading</p>
        } else {
            const currentUser = user.currentUser
            return (
                <div className="content">
                    <div className="item" key={currentUser.username}>
                        <div className="description">
                            <h1><b>This is the page of: {currentUser.username}</b></h1>
                            <h4><u>Email: {currentUser.email}</u></h4>
                            <div>Location: {currentUser.location}</div>
                            <div>About Me: {currentUser.bio}</div>
                            <div className="ui relaxed divided list">
                                {this.renderList()}
                            </div>
                        </div>
                    </div>
                </div>
            );
        }
    }
}

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

export default connect(
    mapStateToProps,
    { fetchUserProfile }
)(User);