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

import "./css/List.css"

export default class List extends Component {
  render() {
    return (
      <table className="List" cellSpacing="0px">
        <tbody>
          {this.props.children}
        </tbody>
      </table>
    )
  }
}

export function Item({link, name, icon, author, description, tags, fictionalDate, createdDate}) {
  return [
    <tr className="ListItem color-primary">
      <td className="icon color-highlight-primary">{icon}</td>
      <td className="content color-primary color-highlight-dark">
        <div className="title">
          <Link className="color-primary" to={link}>{name}</Link>
        </div>
        <div className="description color-text">{description}</div>
        <div className="meta">
          <ItemMeta key="D2" kind="date" value={createdDate} />
          <ItemMeta key="D1" kind="date" value={fictionalDate} />
          <ItemMeta key="T" kind="tag" value={tags[0] || null} />
          <ItemMeta key="A" kind="author" value={author} />
        </div>
      </td>
    </tr>,
    <tr className="ListItem-spacer">
      <td></td>
    </tr>
  ]
}

function ItemMeta({kind, value, className}) {
  // Hide empty fields
  if (value == null || value == "") {
    return null
  }
  
  switch (kind) {
    case "date": {
      const m = moment(value)
      if (m.year() < 2) {
        return null
      }
  
      return <div className="date color-menu">{m.format("MMM D, YYYY")}</div>
    }

    case "tag": {
      return <div className={`tag color-tag-${value.kind.toLowerCase()}`}>{value.name}</div>
    }

    case "author": {
      return <div className="author color-menu">{value}</div>
    }
  }
}