import React, { Component } from 'react';
import { Link } from "react-router-dom";

import './css/Menu.css';

export default class Menu extends Component {
  render() {
    const { children } = this.props

    return (
      <nav className="Menu">
        <h1 className="color-primary">Aite RP</h1>
        <div className="head-menu">
          <HeadMenuLink to="/story/">Story</HeadMenuLink>
          <HeadMenuLink to="/logs/">Logs</HeadMenuLink>
        </div>
        <div className="content">
          { children }
        </div>
      </nav>
    )
  }
}

export function MenuLink({ icon, children, tagType, to, onClick }) {
  const isSelected = window.location.pathname === to
  const className = isSelected ? "selected" : "not-selected"
  const textClass = isSelected ? "color-primary" : `color-tag-${tagType||"none"}`

  const body = (
    <div className={`MenuLink color-menu ${className}`} onClick={onClick}>
      <div className="icon color-primary">{icon}</div>
      <div className={`text ${textClass}`}>{children}</div>
    </div>
  )

  if (to == null) {
    return body
  } else {
    return <Link to={to}>{body}</Link>
  }
}

export function MenuGap() {
  return <div className="MenuGap"></div>
}

export function MenuHeader({children}) {
  return <div className="MenuHeader color-menu">{children}</div>
}

export function HeadMenuLink({to, children}) {
  const className = (window.location.pathname.startsWith(to) ? "color-primary" : "color-menu")

  return <Link className={className} to={to}>{children}</Link>
}

export function MenuBlurb({children}) {
  return <div className="MenuBlurb">{children}</div>
}