import React, { Component } from "react";
import Menu, { MenuHeader, MenuLink, MenuGap } from "../../common/Menu";
import pluralize from "pluralize"

export default class StoryMenu extends Component {  
  render() {
    return (
      <Menu>
        <MenuHeader>Story</MenuHeader>
        <MenuLink to="/story/" icon="A">All</MenuLink>
        <MenuGap />
        <MenuHeader>By Category</MenuHeader>
        <CategoryLinks categories={this.props.categories} />
        <MenuGap />
        <MenuHeader>By Tag</MenuHeader>
        <MenuLink to="/story/tag/" icon="T">All Tags</MenuLink>
        <MenuGap />
        <MenuHeader>Your Content</MenuHeader>
        <MenuLink to="/story/authored/" icon="A">Listed</MenuLink>
        <MenuLink to="/story/open/" icon="O">Open</MenuLink>
        <MenuLink to="/story/unlisted/" icon="U">Unlisted</MenuLink>
        <MenuGap />
        <MenuHeader>Options</MenuHeader>
        <MenuLink icon="+">Create Story</MenuLink>
      </Menu>
    )
  }
}

function CategoryLinks({categories}) {
  return categories.map(category => {
    const icon = category.charAt(0).toUpperCase()
    const label = pluralize(category)

    return <MenuLink to={`/story/category/${category}`} icon={icon}>{label}</MenuLink>
  })
}