import React from 'react'
import SingleComment from './SingleComment'
import uuid from 'uuid'

class ThreadList extends React.Component {
  constructor() {
    super()
    this.toggleCollapse = this.toggleCollapse.bind(this)
    this.showCollapseLink = this.showCollapseLink.bind(this)
  }

  showCollapseLink(id, collapsed) {
    this.setState({ displayCollapse: 'block' })
    const otherComments = this.props.comments.filter(c => c.id !== id)
    const comment = this.props.comments.find(c => c.id === id)
    comment['displayCollapse'] = collapsed
    //console.log('displayed collapse for: ', comment)
    this.setState({ comments: otherComments.concat(comment) })
  }

  toggleCollapse(id, collapsed) {
    const otherComments = this.props.comments.filter(c => c.id !== id)
    var parent = this.props.comments.find(c => c.id === id)
    console.log('toggling', parent)
    parent['collapsed'] = collapsed
    if (!collapsed) {
      // when parent was a reply in a previously collapsed thread
      // and is to be expanded it will be marked hidden
      // and needs to be unhidden
      parent['hidden'] = false
    }
    this.setState({ comments: otherComments.concat(parent) })
    parent.replies.map(comment => this.toggleReplies(comment.id, collapsed))
  }
  toggleReplies(id, collapsed) {
    const otherComments = this.props.comments.filter(c => c.id !== id)
    var comment = this.props.comments.find(c => c.id === id)
    comment['hidden'] = collapsed
    this.setState({ comments: otherComments.concat(comment) })
    if (comment.replies) {
      comment.replies.map(c => this.toggleReplies(c.id, collapsed))
    }
  }

  render() {
    const comments = this.props.comments.filter(
      // only show comments for this parent / thread
      c =>
        (!c.parentId && !this.props.threadLevel) ||
        c.parentId === this.props.threadLevel
    )
    if (comments.length === 0) {
      return ''
    }
    console.log('showing comments for thread', this.props.threadLevel, comments)
    return (
      <ul className="list-unstyled">
        {comments.map(comment => {
          // TODO comments aren't sorted by time
          if (comment.replies && comment.replies.length === 0) {
            return (
              <div className="ml-3" key={uuid()}>
                <SingleComment
                  threadLevel={this.props.threadLevel}
                  showCollapseLink={this.showCollapseLink}
                  toggleCollapse={this.toggleCollapse}
                  {...comment}
                />
              </div>
            )
          } else {
            return (
              <div className="ml-3" key={uuid()}>
                <SingleComment
                  threadLevel={this.props.threadLevel}
                  showCollapseLink={this.showCollapseLink}
                  toggleCollapse={this.toggleCollapse}
                  {...comment}
                />
                <ThreadList
                  threadLevel={comment.id}
                  showCollapseLink={this.showCollapseLink}
                  comments={this.props.comments}
                />
              </div>
            )
          }
        })}
      </ul>
    )
  }
}

export default ThreadList