type Category implements Node {
  id: ID!
  name: String
  hasChildren: Boolean
  categories(before: String, after: String, first: Int, last: Int): CategoryConnection
}

type CategoryConnection {
  edges: [CategoryEdge]
  pageInfo: PageInfo!
}

type CategoryEdge {
  node: Category
  cursor: String!
}

interface Node {
  id: ID!
}

type PageInfo {
  hasNextPage: Boolean!
  hasPreviousPage: Boolean!
  startCursor: String
  endCursor: String
}

type Query {
  category(id: ID!): Category
  node(id: ID!): Node
}

import React from 'react';
import Relay from 'react-relay';


class CategoryRoute extends Relay.Route {
  static queries = {
    category: () => Relay.QL`
        query {
            category(id: $id)
        }
    `,
  };

  static paramDefinitions = {
    id: { required: true },
  };

  static routeName = 'CategoryRoute';
}

class CategoryItemSubCategoryList extends React.Component {
  static propTypes = {
    currentLevel: React.PropTypes.number.isRequired,
    maxLevel: React.PropTypes.number,
    activeCats: React.PropTypes.array,
    elementSelectedCallback: React.PropTypes.func,

    categories: React.PropTypes.object,
  };

  render() {
    const currentLevel = this.props.currentLevel;
    const maxLevel = this.props.maxLevel;
    const elementSelectedCallback = this.props.elementSelectedCallback;

    return (
      <ul className="dropdown-menu" aria-labelledby="dLabel">
          {this.props.categories.map(({ node }) => (
            currentLevel < maxLevel && node.hasChildren ?
              <li><CategoryItemContainer key={node.id}
                                         category={node}
                                         maxLevel={maxLevel}
                                         currentLevel={currentLevel + 1}
                                         activeCats={this.props.activeCats}
                                         elementSelectedCallback={elementSelectedCallback}/></li> :
              <li>{elementSelectedCallback ?
                <a onClick={elementSelectedCallback.bind(this, node.id)}>{node.name}</a> :
                <a href={`search?c=${node.id}`}>{node.name}</a>
              }</li>
          ))}
      </ul>
    );
  }
}

const CategoryItemSubcategoryListContainer = Relay.createContainer(CategoryItemSubCategoryList, {
  fragments: {
    categories: () => Relay.QL`
        fragment on Category {
            categories(first: 10000) {
                edges {
                    node {
                        ${CategoryItemContainer.getFragment('category')}
                    }
                }
            }
        }
    `,
  },
});

class CategoryItem extends React.Component {
  static propTypes = {
    category: React.PropTypes.object.isRequired,
    currentLevel: React.PropTypes.number.isRequired,
    maxLevel: React.PropTypes.number,
    activeCats: React.PropTypes.array,
    elementSelectedCallback: React.PropTypes.func,

    relay: React.PropTypes.object,
  };

  static getDefaultProps = {
    maxLevel: 100,
    activeCats: [],
  };

  render() {
    const category = this.props.category;
    const currentLevel = this.props.currentLevel;
    const maxLevel = this.props.maxLevel;
    const elementSelectedCallback = this.props.elementSelectedCallback;

    return (
      <div className="list-group-item" onMouseOver={this.openCategory.bind(this)}>
        {elementSelectedCallback ?
          <a onClick={elementSelectedCallback.bind(this, category.id)}>{category.name}
            {currentLevel < maxLevel && category.hasChildren ?
              <span className="glyphicon glyphicon-menu-right" aria-hidden="true"></span> : ''}</a> :
          <a href={`search?c=${category.id}`}>{category.name}
            {currentLevel < maxLevel && category.hasChildren ?
              <span className="glyphicon glyphicon-menu-right" aria-hidden="true"></span> : ''}</a>
        }

        {/* Выводим список подкатегорий */}
        {currentLevel < maxLevel && category.hasChildren && this.props.relay.variables.expanded &&
          <CategoryItemSubcategoryListContainer key={category.id}
                                                categories={category.categories}
                                                currentLevel={currentLevel}/>
        }
      </div>
    );
  }

  openCategory() {
    this.props.relay.setVariables({ expanded: true });
  }
}

const CategoryItemContainer = Relay.createContainer(CategoryItem, {
  initialVariables: {
    expanded: false,
  },

  fragments: {
    category: (variables) => Relay.QL`
        fragment on Category {
            id
            name
            hasChildren

            ${CategoryItemSubcategoryListContainer.getFragment('categories').if(variables.expanded)}
        }
    `,
  },
});

export default class Classifier extends React.Component {
  static propTypes = {
    rootCategoryId: React.PropTypes.string.isRequired,
    maxLevel: React.PropTypes.number,
    title: React.PropTypes.string,
    activeCats: React.PropTypes.array,
    elementSelectedCallback: React.PropTypes.func,
  };

  render() {
    return (
      <Relay.RootContainer
        Component={CategoryItemContainer}
        route={new CategoryRoute({ id: this.props.rootCategoryId })}
        renderFetched={(data) => <CategoryItemContainer {...data}
                                                        currentLevel={0}
                                                        maxLevel={this.props.maxLevel}
                                                        title={this.props.title}
                                                        activeCats={this.props.activeCats}
                                                        elementSelectedCallback={this.props.elementSelectedCallback}/>}
      />
    );
  }
}

query Classifier($id_0:ID!) {
  category(id:$id_0) {
    id,
    ...F0
  }
}
fragment F0 on Category {
  id,
  name,
  hasChildren
}

query Classifier_CategoryRelayQL($id_0:ID!) {
  node(id:$id_0) {
    ...F2
  }
}
fragment F0 on Category {
  id,
  name,
  hasChildren
}
fragment F1 on Category {
  _categories2slDfj:categories(first:10000) {
    edges {
      node {
        id,
        ...F0
      },
      cursor
    },
    pageInfo {
      hasNextPage,
      hasPreviousPage
    }
  },
  id
}
fragment F2 on Category {
  id,
  ...F1
}

{
    "data": {
        "node": {
            "id": "101510000566",
            "_categories2slDfj": {
                "edges": [
                    {
                        "node": {
                            "id": "101510000170",
                            "name": "Оружие",
                            "hasChildren": false
                        },
                        "cursor": "c2ltcGxlLWN1cnNvcjA="
                    },