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

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

import storyContentRoot from "./gql/StoryContentRoot";

class StoryContentRoot extends Component {
  render() {
    const story = this.props.story

    const chapterRedirect = story.chapters.length > 0 ? (
      <Redirect exact from={`/story/${story.id}/`} to={`/story/${story.id}/${story.chapters[0].id}`} />
    ) : null

    return (
      <div className="StoryContentRoot theme-story">
        <Background />
        <StoryContentMenu story={this.props.story} />
        <Switch>
          {chapterRedirect}
        </Switch>
      </div>
    )
  }
}

export default ({id, match}) => (
  <Query query={storyContentRoot} variables={{id: id || match.params.id}}>
    {({ loading, error, data }) => {
      if (loading) {
        return <LoadingScreen className="theme-story" />
      }
      if (error) {
        return `Error! ${error.message}`
      }

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