import React from 'react';
import PostComment from './postComment';
import PostCommentThread from './postCommentThread';
import {postComment} from '../server';
import {likePost} from '../server';
import {unLikePost} from '../server';
import {Link} from 'react-router';
var moment = require('moment');

export default class PostFeedItem extends React.Component{

  constructor(props){
    super(props);
    this.state = props.data;
  }

  handlePostComment(comment){
    postComment(this.state._id, this.props.currentUser ,comment, (newFeedItem)=>{
      this.setState(newFeedItem);
    })
  }

  handleLikeClick(e){
    e.preventDefault();

    if(e.button === 0){
      var cb = (likeCounter) => {
        this.setState({likeCounter:likeCounter});
      };

      if(!this.didUserLike(this.props.currentUser)){
        likePost(this.state._id,this.props.currentUser,cb);
      }
      else{
        unLikePost(this.state._id,this.props.currentUser,cb);
      }
    }
  }

  didUserLike(user) {
    var likeCounter = this.state.likeCounter;

    for (var i = 0; i < likeCounter.length; i++) {
      if (likeCounter[i]._id === user)
        return true;
    }
    return false;
  }

  render(){
    var data = this.state;
    var contents;
    switch(data.type){
      case "general":
        contents = data.contents;
        break;
      default:
        throw new Error("Unknown FeedItem: " + data.type);
    }

    var img = <img src={contents.img} width="100%" height="100%" alt="" />;

    if(contents.img === null)
      img = null;

    var time = moment(contents.postDate).calendar();

    if((new Date().getTime()) - contents.postDate <= 86400000)
      time = moment(contents.postDate).fromNow();

    return(
      <div className="panel panel-default">
        <div className="panel-heading">
          <div className="media">
            <div className="media-left">
              <Link to={"profile/"+contents.author._id}>
                <img className="media-object" src={contents.author.avatar} width="50px" height="50px" alt="..."></img>
              </Link>
            </div>
            <div className="media-body">
              <h4 className="media-heading">{contents.author.firstname} {contents.author.lastname}</h4>
              <span style={{"fontSize":"12"}}>{time}</span>
              <span className="glyphicon glyphicon-map-marker pull-right" style={{
                  "color":"#61C1E9"
              }}>
                  {Object.keys(contents.location).length>0 ?
                  (contents.location.address_components[2].short_name+","+
                  contents.location.address_components[4].short_name) : "Earth"}
              </span>
            </div>
          </div>
        </div>
        <div className="panel-body">
          <p>
            {contents.text}
          </p>
          {img}
        </div>
        <div className="panel-footer">
          <div className="row">
            <div className="col-md-12">
              <a href="#" onClick={(e)=>this.handleLikeClick(e)}><span className="glyphicon glyphicon-heart"></span>{data.likeCounter.length}</a>
              <span className="glyphicon glyphicon-comment"></span>{data.comments.length}

              <PostCommentThread onPostComment={(comment)=>this.handlePostComment(comment)}>
                {data.comments.map((comment,i)=>{
                  return (
                    <PostComment key={i} data={comment} />
                  )
                })}
              </PostCommentThread>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

@@ -2301,36 +2301,35 @@
 %0A              %3C
-span
+div
  className=%22glyp
@@ -2328,39 +2328,8 @@
 me=%22
-glyphicon glyphicon-map-marker 
 pull
@@ -2335,25 +2335,17 @@
 l-right%22
- style=%7B%7B
+%3E
 %0A       
@@ -2357,44 +2357,63 @@
     
-  %22color%22:%22#61C1E9%22%0A              %7D%7D
+%3Cspan className=%22glyphicon glyphicon-map-marker%22%3E%3C/span
 %3E%0A  
@@ -2489,16 +2489,18 @@
         
+  
 (content
@@ -2558,32 +2558,34 @@
                 
+ 
+ 
 contents.locatio
@@ -2647,20 +2647,19 @@
       %3C/
-span
+div
 %3E%0A      

fix location span issue