import React, { Component } from 'react'
import { graphql, withApollo } from 'react-apollo'

import './styles/Comments.css'

import storyCommentsQuery from '../queries/storyComments'
import { Loader, Reload, Error } from './common'

class Comments extends Component {
  state = { kids: {}, loadingKids: {} }

  render() {
    const { data } = this.props
    let { comments } = this.props

    if (data && data.loading) return <Loader />
    else if (data) {
      if (data.error) {
        return (
          <div>
            <Error>Error loading comments</Error>
            <Reload onClick={() => data.refetch({ forceFetch: true })} />
          </div>
        )
      }
      comments = data.storyComments
    }
    return (
      <div className="comments-component">
        {comments.map(comment =>
          <div key={comment.id} className="comment">
            <span>
              {comment.text}
            </span>
            {this._renderKids(comment)}
          </div>,
        )}
      </div>
    )
  }

  _renderKids = comment => {
    const { kids, loadingKids } = this.state

    if (comment.comments) {
      return <Comments client={this.props.client} comments={comment.comments} />
    } else if (kids[comment.id]) {
      return <Comments client={this.props.client} comments={kids[comment.id]} />
    } else if (comment.hasKids) {
      if (loadingKids[comment.id]) return <Loader />

      return (
        <div>
          <button
            className="btn btn-default"
            onClick={() => this._fetchKids(comment.id)}
          >
            Load More
          </button>
        </div>
      )
    }
    return null
  }

  _fetchKids = async id => {
    const { client } = this.props

    this._loadingKids(id, true)

    const res = await client.query({
      query: storyCommentsQuery,
      variables: { id },
    })

    this._loadingKids(id, false, res.data.storyComments)
  }

  _loadingKids = (id, isLoading, newKids) => {
    const { loadingKids, kids } = this.state

    loadingKids[id] = isLoading
    kids[id] = newKids

    this.setState({ loadingKids, kids })
  }
}

// ==================
export default graphql(storyCommentsQuery, {
  options: ({ storyId }) => ({
    variables: { id: storyId },
    notifyOnNetworkStatusChange: true,
  }),
})(withApollo(Comments))

@@ -1707,24 +1707,36 @@
 this.props%0A%0A
+    try %7B%0A  
     this._lo
@@ -1756,24 +1756,26 @@
  true)%0A%0A    
+  
 const res = 
@@ -1801,16 +1801,18 @@
 %7B%0A      
+  
 query: s
@@ -1830,16 +1830,18 @@
 sQuery,%0A
+  
       va
@@ -1865,12 +1865,16 @@
     
+  
 %7D)%0A%0A
+  
     
@@ -1926,16 +1926,79 @@
 mments)%0A
+    %7D catch (error) %7B%0A      this._loadingKids(id, false)%0A    %7D%0A
   %7D%0A%0A  _
@@ -2095,25 +2095,66 @@
     
-loadingKids
+this.setState(%7B%0A      loadingKids: %7B ...loadingKids, 
 %5Bid%5D
- =
+:
  isL
@@ -2163,17 +2163,22 @@
 ding
-%0A
+ %7D,%0A  
     kids
 %5Bid%5D
@@ -2177,22 +2177,34 @@
 kids
+: %7B ...kids, 
 %5Bid%5D
- =
+:
  newKids
 %0A%0A  
@@ -2203,47 +2203,15 @@
 Kids
-%0A%0A    this.setState(%7B loadingKids, kids
+ %7D,%0A   
  %7D)%0A

handle errors in Comments component