import { Component, PropTypes } from "react";
import ReactMixin from "react-mixin";
import { connect } from "react-redux";
import { graphql } from "react-apollo";
import gql from "graphql-tag";

import { FeedItemSkeleton } from "../../components/loading";
import ApollosPullToRefresh from "../../components/pullToRefresh";
import FeedItem from "../../components/cards/cards.FeedItem";

import Headerable from "../../mixins/mixins.Header";
import Pageable from "../../mixins/mixins.Pageable";

import { nav as navActions } from "../../store";

import Single from "./stories.Single";

const STORIES_QUERY = gql`
  query getStories($limit: Int!, $skip: Int!) {
    content(channel: "stories", limit: $limit, skip: $skip) {
      id
      entryId: id
      title
      status
      channelName
      meta {
        urlTitle
        siteId
        date
        channelId
      }
      content {
        body
        images(sizes: ["large"]) {
          fileName
          fileType
          fileLabel
          url
        }
        ooyalaId
      }
    }
  }
`;

const withStories = graphql(STORIES_QUERY, {
  options: state => ({
    variables: {
      limit: state.paging.pageSize * state.paging.page,
      skip: state.paging.skip,
    },
  }),
});

const mapStateToProps = state => ({ paging: state.paging });

@connect(mapStateToProps)
@withStories
@ReactMixin.decorate(Pageable)
@ReactMixin.decorate(Headerable)
class Template extends Component {

  static propTypes = {
    dispatch: PropTypes.func.isRequired,
    data: PropTypes.object.isRequired,
  }

  componentWillMount() {
    this.props.dispatch(navActions.setLevel("TOP"));
    this.headerAction({ title: "All Stories" });
  }

  handleRefresh = (resolve, reject) => {
    this.props.data.refetch()
      .then(resolve)
      .catch(reject);
  }

  renderItems = () => {
    const { content } = this.props.data;
    let items = [1, 2, 3, 4, 5];
    if (content) items = content;
    return (
      items.map((item, i) => (
        <div
          className={
            "grid__item one-half@palm-wide one-third@portable one-quarter@anchored " +
            "flush-bottom@handheld push-bottom@portable push-bottom@anchored"
          }
          key={i}
        >
          {(() => {
            if (typeof item === "number") return <FeedItemSkeleton />;
            return <FeedItem item={item} />;
          })()}
        </div>
      ))
    );
  }


  render() {
    return (
      <ApollosPullToRefresh handleRefresh={this.handleRefresh}>
        <div className="background--light-secondary">
          <section className="soft-half">
            <div className="grid">
              {this.renderItems()}
            </div>
          </section>
        </div>
      </ApollosPullToRefresh>
    );
  }
}

const Routes = [
  { path: "stories", component: Template },
  { path: "stories/:id", component: Single },
];

export default {
  Template,
  Routes,
};

@@ -443,51 +443,60 @@
 ort 
-Pageable from %22../../mixins/mixins.Pageable
+infiniteScroll from %22../../decorators/infiniteScroll
 %22;%0A%0A
@@ -1121,129 +1121,447 @@
 ns: 
-state =%3E (%7B%0A    variables: %7B%0A      limit: state.paging.pageSize * state.paging.page,%0A      skip: state.paging.skip
+%7B%0A    variables: %7B limit: 20, skip: 0 %7D,%0A  %7D,%0A  props: (%7B data %7D) =%3E (%7B%0A    data,%0A    loading: data.loading,%0A    fetchMore: () =%3E data.fetchMore(%7B%0A      variables: %7B ...data.variables, skip: data.content.length %7D,%0A      updateQuery: (previousResult, %7B fetchMoreResult %7D) =%3E %7B%0A        if (!fetchMoreResult.data) return previousResult;%0A        return %7B content: %5B...previousResult.content, ...fetchMoreResult.data.content%5D %7D;%0A      %7D
 ,%0A    %7D
+)
 ,%0A  
@@ -1675,36 +1675,23 @@
 es%0A@
-ReactMixin.decorate(Pageable
+infiniteScroll(
 )%0A@R

add infinite scroling to stories