import { connect } from 'react-redux'

const PostDraw = ({post}) => {
    
    let comments = post?.comments
    let timestamp = post?.createdAt
    let date = new Date(+timestamp).toString().slice(0, 24);
    if (post?.images?.[0]?.url) {

        return (
            <div className="post">
                <div className="info">
                    <div className="user">
                        <div className="profile-pic"><a href={`user/${post?.owner?._id}`}><img src={`http://hipstagram.asmer.fs.a-level.com.ua/${post?.owner?.avatar?.url}`} alt="profile-avatar"/></a></div>
                        <a href={`user/${post?.owner?._id}`}><p className="username">{post?.owner?.login}</p></a>
                    </div>
                    <img src="https://cdn-icons.flaticon.com/png/512/3018/premium/3018442.png?token=exp=1635258753~hmac=93c765c52b9641296e5a03f536552014" className="options" alt="options"/>
                </div>
                <img src={`http://hipstagram.asmer.fs.a-level.com.ua/${post?.images?.[0]?.url}`} className="post-image" alt="post"/>
                <div className="post-content">
                    <div className="reaction-wrapper">
                        <img src="https://cdn-icons-png.flaticon.com/512/1077/1077035.png" className="icon" alt="like-icon"/>
                        <img src="https://cdn-icons-png.flaticon.com/512/2462/2462719.png" className="icon" alt="comment-icon"/>
                    </div>
                    <p className="description">{post?.text}</p>
                    {comments?.map((comment) => <p className="comment">{comment?.text}</p>)}
                    <p className="post-time">{date}</p>
                </div>
                <div className="comment-wrapper">
                    <img src="https://cdn-icons-png.flaticon.com/512/747/747402.png" className="icon" alt="smile-icon"/>
                    <input type="text" className="comment-box" placeholder="Add a comment"/>
                    <button className="comment-btn">post</button>
                </div>
            </div>
        )
    }
    else return null

}

export const ConnectPostDraw = connect(null, {posts: PostDraw})(PostDraw)


