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

class ThreadList extends React.Component {
  constructor() {
    super()
    this.state = { collapsed: false }
    this.toggleCollapse = this.toggleCollapse.bind(this)
  }

  toggleCollapse() {
    this.setState({ collapsed: !this.state.collapsed })
  }

  render() {
    const { comments } = this.props
    console.log(comments)

    return (
      <ul className="list-unstyled">
        {comments.map(comment => {
          return (
            <div className="ml-3">
              <SingleComment
                threadLevel={this.props.threadLevel}
                collapsed={this.state.collapsed}
                toggleCollapse={this.toggleCollapse}
                key={uuid()}
                {...comment}
              />

              {comment.replies && (
                <ThreadList
                  threadLevel={comment.parentId}
                  comments={comment.replies}
                />
              )}
            </div>
          )
        })}
      </ul>
    )
  }
}

export default ThreadList