class Comment extends React.Component {
  render() {
    var {comment} = this.props;
    var {author} = comment;
    var savePending = this.props.relay.hasOptimisticUpdate(this.props.comment);
    return (
      <div style={{opacity: savePending ? 0.4 : null}}>
        <img src={author.avatar} width={16} /> <strong>{author.name}</strong> {comment.text}
        {savePending && 
          <img src="data:image/gif;base64,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" style={{marginLeft: 4, verticalAlign: 'text-top'}} />
        }
      </div>
    );
  }
}
Comment = Relay.createContainer(Comment, {
  fragments: {
    comment: () => Relay.QL`
      fragment on Comment {
        author { avatar, name }
        text
      }
    `,
  },
});
  
class Story extends React.Component {
  _augmentNumCommentsToShow = (delta) => {
    this.props.relay.setVariables({
      numCommentsToShow: this.props.relay.variables.numCommentsToShow + delta,
    }); 
  }
  _handleKeyDown = (e) => {
    if (e.keyCode === 13 && e.target.value != '') {  // enter key
      Relay.Store.update(
        new AddCommentMutation({
          story: this.props.story,
          text: e.target.value,
          viewer: this.props.viewer,
        })
      );
      this._augmentNumCommentsToShow(1);
      e.target.value = '';
    }
  }
  _handleMoreCommentsClick = (e) => {
    e.preventDefault();
    this._augmentNumCommentsToShow(5);
  }
  render() {
    var {story} = this.props;
    var {author, comments} = story;
    return (
      <div>
        <header>
          <img src={author.avatar} width={32} /> <strong>{author.name}</strong>
        </header>
        <p>{story.text}</p>
        {comments.pageInfo.hasPreviousPage &&
          <a href="#" onClick={this._handleMoreCommentsClick}>
            View previous comments
          </a>
        }
        <ul>
          {comments && comments.edges.map(commentEdge => 
            <li key={commentEdge.node.id}>
              <Comment comment={commentEdge.node} />
            </li>
          )}
          <li>
            <input
              onKeyDown={this._handleKeyDown}
              placeholder="Leave a comment&hellip;" 
              type="text" 
            />
          </li>
        </ul>
      </div>
    );
  }
}
Story = Relay.createContainer(Story, {
  initialVariables: {
    numCommentsToShow: 3,
  },
  fragments: {
    story: () => Relay.QL`
      fragment on Story { 
        author { avatar, name }
        comments(last: $numCommentsToShow) {
          edges {
            node {
              id
              ${Comment.getFragment('comment')}
            }
          }
          pageInfo { hasPreviousPage }
        }
        text 
        ${AddCommentMutation.getFragment('story')}
      }
    `,
    viewer: () => Relay.QL`
      fragment on Viewer { 
        avatar
        id 
        name
        ${AddCommentMutation.getFragment('viewer')}
      }
    `,
  },
});

class StoriesApp extends React.Component {
  _handleLoadMoreClick = () => {
    this.props.relay.setVariables({
      numStoriesToLoad: this.props.relay.variables.numStoriesToLoad + 3,
    });
  }
  render() {
    var {storyFeed} = this.props.viewer;
    return (
      <div>
        <ul>
          {storyFeed.edges.map(edge => 
            <li key={edge.node.id}>
              <Story
                story={edge.node} 
                viewer={this.props.viewer} 
              />
            </li>
          )}
        </ul>
          {storyFeed.pageInfo.hasNextPage &&
            <button onClick={this._handleLoadMoreClick}>
              Load more stories
            </button>
          }
      </div>
    );
  }
}

StoriesApp = Relay.createContainer(StoriesApp, {
  initialVariables: {
    numStoriesToLoad: 3,
  },
  fragments: {
    viewer: () => Relay.QL`
      fragment on Viewer {
        storyFeed(first: $numStoriesToLoad) {
          edges {
            node {
              id
              ${Story.getFragment('story')},
            }
          }
          pageInfo { hasNextPage }
        }
        ${Story.getFragment('viewer')}
      }
	  `,
  }
});
  
class AddCommentMutation extends Relay.Mutation {
  static fragments = {
    story: () => Relay.QL`
      fragment on Story {
        id
      }
    `,
    viewer: () => Relay.QL`
      fragment on Viewer {
        id
      }
    `,
  };
  getCollisionKey() {
    return `story-${this.props.story.id}`;
  }
  getMutation() {
    return Relay.QL`mutation{addComment}`;
  }
  getFatQuery() {
    return Relay.QL`
      fragment on AddCommentPayload {
        commentEdge
        story { comments }
      }
    `;
  }
  getConfigs() {
    return [{
      type: 'RANGE_ADD',
      parentName: 'story',
      parentID: this.props.story.id,
      connectionName: 'comments',
      edgeName: 'commentEdge',
      rangeBehaviors: {
        '': 'append',
      },
    }];
  }
  getVariables() {
    return {
      storyId: this.props.story.id,
      text: this.props.text,
    };
  }
  getOptimisticResponse() {
    return {
      commentEdge: {
        node: {
          author: {
            avatar: this.props.viewer.avatar,
            id: this.props.viewer.id,
            name: this.props.viewer.name,
          },
          story: {
            id: this.props.story.id,
          },
          text: this.props.text,
        },
      },
    };
  }
}

class StoriesRoute extends Relay.Route {
  static params = {};
  static queries = {
    viewer: (Component) => Relay.QL`
      query ViewerQuery {
        viewer {
          ${Component.getFragment('viewer')},
        }
      }
    `,
  };
  static routeName = 'Stories';
}

ReactDOM.render(
  <Relay.RootContainer
    Component={StoriesApp}
    route={new StoriesRoute()}
  />,
  mountNode
);