import React, { Component } from "react"
import { Route, Switch } from "react-router-dom";
import { Query } from "react-apollo"

import StoryMenu from "./StoryMenu"
import Background from "../../common/Background"
import { LoadingScreen } from "../../common/LoadingScreen"

import storyRootQuery from "./gql/StoryRoot"

import StoryList from "./StoryList";
import StoryTags from "./StoryTags";

export class StoryIndex extends Component {
  render() {
    const categories = this.props.categoryType.enumValues.map(ev => ev.name).sort()

    return (
      <div className="StoryIndex theme-story">
        <Background />
        <StoryMenu categories={categories} />
        <Switch>
          <Route exact path="/story/" component={() => <StoryList filter={{limit: 16}} />} />
          <Route exact path="/story/tags/" component={StoryTags} />
          <Route exact path="/story/category/:category/" component={({match: {params: {category}}}) => <StoryList filter={{category}} />} />
          <Route exact path="/story/your-content/" component={() => <StoryList filter={{author: "Gisle"}} />} />
          <Route exact path="/story/your-content/open/" component={() => <StoryList filter={{open: true, author: "Gisle"}} />} />
          <Route exact path="/story/your-content/unlisted/" component={() => <StoryList filter={{unlisted: true, author: "Gisle"}} />} />
        </Switch>
      </div>
    )
  }
}

export default () => (
  <Query query={storyRootQuery}>
    {({ loading, error, data }) => {
      if (loading) return <LoadingScreen className="theme-story" />
      if (error) return `Error! ${error.message}`

      return <StoryIndex {...data} />
    }}
  </Query>
)