export default class IncidentDetailsCommentPanel extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      showAddCommentPopup: false
    }
  }

  componentDidMount() {
    this.addCommentSubmit = this.addCommentSubmit.bind(this);
    this.addCommentCancel = this.addCommentCancel.bind(this);
    this.addCommentClicked = this.addCommentClicked.bind(this);
  }

  addCommentClicked(){
    this.setState({
      showAddCommentPopup: true,
    });
  }

  addCommentSubmit(){

  }

  addCommentCancel(){
    this.setState({
      showAddCommentPopup: false,
    });
  }

  componentWillReceiveProps(nextProps) {

  }

  render() {
    let commentTemplate = null;
    if (this.props.commentList.length > 0) {
      commentTemplate = this.props.commentList.map((comment, index) => {
        var commentByUsername = "";
        if (comment.userDetails && comment.userDetails.userName) {
          commentByUsername = comment.userDetails.userName;
        }
        var lineData = T.t(comment.line, { user: commentByUsername, date: Util.getDateFromTimeStamp(comment.createdAt), time: Util.getTimeFromTimeStamp(comment.createdAt) }) ?
          T.t(comment.line, { user: commentByUsername, date: Util.getDateFromTimeStamp(comment.createdAt), time: Util.getTimeFromTimeStamp(comment.createdAt) }) : comment.line;
        var line = (<label className="incident_comment__item__title">
          {lineData}
        </label>);
        var commentText = comment.comment;
        if (comment.userDetails && comment.userDetails.userName) {
          let arrLine = lineData.split(comment.userDetails.userName);
          if (arrLine.length == 2) {
            line = (<label className="incident_comment__item__title">{arrLine[0]}<strong>{comment.userDetails.userName}</strong>{arrLine[1]}</label>);
          }
        }
        return (
          <div className="incident_comment__item dui-margin-bottom-10" key={index}>
            <img className="incident_comment__img dui-margin-right-10" src={Config.assetPath('/images/hp.png')} />
            <div className="comment_text">
              {line}
              <div className="txt-pre_line">{Util.urlify(commentText)}</div>
            </div>
          </div>
        );
      })
    } else {
      commentTemplate = (
        <div className="incident_comment__item dui-margin-bottom-10">
          <div className="comment_text">
            TODO
          </div>
        </div>
      )
    }
    return (
      <Panel title={T.texts["incidents.comments"]} >
        {commentTemplate}
        <Button appearance="secondary" id="add-comment" onClick={this.addCommentClicked}>{T.texts["controls.add_comment"]}</Button>
        <AddComment showPopup={this.state.showAddCommentPopup} addCommentCancel={this.addCommentCancel} addCommentSubmit={this.addCommentSubmit} />
      </Panel>
    );
  }
}