import React from 'react'

export default function ListDetails(props) {
  let genres;
  if (props.data.genres) {
    // Uppercase first genres
    genres = props.data.genres.map(
      (word) => word[0].toUpperCase() + word.substr(1)
    ).join(', ');
  }

  let wishlistStr = "";
  if (props.data.wishlisted === true) {
    wishlistStr = "Wishlisted";
  }
  if (props.data.tracked_episode !== null && props.data.tracked_season != null) {
    let season = props.data.tracked_season;
    let episode = props.data.tracked_episode;
    if ((season === 0) && (episode === 0)) {
      wishlistStr = "Whole show tracked";
    } else {
      wishlistStr = `Tracked from season ${season} episode ${episode}`;
    }
  }

  return (
    <div className="col-xs-7 col-md-4">
      <div className="affix">
        <h1 className="hidden-xs">{props.data.title}</h1>
        <h3 className="visible-xs">{props.data.title}</h3>
        {wishlistStr !== "" &&
          <span className="label label-default">
            <i className="fa fa-bookmark"></i> {wishlistStr}
          </span>
        }
        <h4>{props.data.year}</h4>
        {props.data.runtime &&
          <p>
            <i className="fa fa-clock-o"></i>
            &nbsp;{props.data.runtime} min
          </p>
        }
        {props.data.genres &&
          <p>
            <i className="fa fa-tags"></i>
            &nbsp;{genres}
          </p>
        }
        <p>
          <i className="fa fa-star-o"></i>
          &nbsp;{Number(props.data.rating).toFixed(1)}&nbsp;
          {props.data.votes &&
            <small>({props.data.votes} counts)</small>
          }
        </p>
        <p className="plot">{props.data.plot}</p>
      </div>
      {props.children}
    </div>
  );
}