import React, { Component } from "react"
import moment from "moment"

import Menu, { MenuHeader, MenuLink, MenuGap } from '../../common/Menu'

export default class StoryContentMenu extends Component {
  render() {
    const { story } = this.props

    console.log(story.tags)

    return (
      <Menu>
        <MenuHeader>Chapters</MenuHeader>
        <ChapterMenu storyId={story.id} chapters={story.chapters} />
        <MenuGap />
        <MenuHeader>Tags</MenuHeader>
        <TagMenu tags={story.tags} />
        <MenuGap />
        <MenuHeader>Story</MenuHeader>
        <MonthMenuItem date={story.fictionalDate} />
        <MenuLink to={`/story/author/${story.author}`} icon="A">{story.author}</MenuLink>
        <MenuGap />
      </Menu>
    )
  }
}

function ChapterMenu({chapters, storyId}) {
  return chapters.map((chapter, index) => (
    <MenuLink to={`/story/${storyId}/${chapter.id}`} icon={index + 1}>{chapter.title}</MenuLink>
  ))
}

function TagMenu({tags}) {
  return tags.map(tag => (
    <MenuLink tagKind={tag.kind} to={`/story/tag/${tag.kind}/${tag.name}`} icon={tag.kind.charAt(0)}>{tag.name}</MenuLink>
  ))
}

function MonthMenuItem({date}) {
  const fictionalDate = moment.utc(date)
  if (fictionalDate.year() < 100) {
    return null
  }

  const monthKey = fictionalDate.format("YYYY-MM")
  const monthText = fictionalDate.format("MMM D, YYYY")

  return <MenuLink to={`/story/month/${monthKey}`} icon="D">{monthText}</MenuLink>
}