import React from 'react'
import Loader from '../loader/loader'

import { OverlayTrigger, Tooltip } from 'react-bootstrap'

export default class ShowDetails extends React.Component {
  componentWillMount() {
    this.props.fetchShowDetails(this.props.params.imdbId);
  }
  render() {
    // Loading
    if (this.props.showStore.loading) {
      return (<Loader />);
    }
    return (
      <div className="row" id="container">
        <Header
          data={this.props.showStore.show}
          addToWishlist={this.props.addShowToWishlist}
          deleteFromWishlist={this.props.deleteShowFromWishlist}
        />
        <SeasonsList
          data={this.props.showStore.show}
          addTorrent={this.props.addTorrent}
          addToWishlist={this.props.addShowToWishlist}
          getEpisodeDetails={this.props.getEpisodeDetails}
          updateEpisodeDetailsStore={this.props.updateEpisodeDetailsStore}
        />
      </div>
    );
  }
}

function Header(props){
  return (
    <div className="col-xs-12 col-sm-10 col-sm-offset-1 col-md-10 col-md-offset-1">
      <div className="panel panel-default">
        <div className="panel-body">
          <HeaderThumbnail data={props.data} />
          <HeaderDetails
            data={props.data}
            addToWishlist={props.addToWishlist}
            deleteFromWishlist={props.deleteFromWishlist}
          />
        </div>
      </div>
    </div>
  );
}

function HeaderThumbnail(props){
  return (
    <div className="col-xs-12 col-sm-2 text-center">
      <img src={props.data.poster_url}
        className="show-thumbnail thumbnail-selected img-thumbnail img-responsive"/>
    </div>
  );
}

function HeaderDetails(props){
  const imdbLink = `http://www.imdb.com/title/${props.data.imdb_id}`;
  return (
    <div className="col-xs-12 col-sm-10">
      <dl className="dl-horizontal">
        <dt>Title</dt>
        <dd>{props.data.title}</dd>
        <dt>Plot</dt>
        <dd className="plot">{props.data.plot}</dd>
        <dt>IMDB</dt>
        <dd>
          <a type="button" className="btn btn-warning btn-xs" href={imdbLink}>
            <i className="fa fa-external-link"></i> Open in IMDB
          </a>
        </dd>
        <dt>Year</dt>
        <dd>{props.data.year}</dd>
        <dt>Rating</dt>
        <dd>{props.data.rating}</dd>
      </dl>
      <TrackHeader
        data={props.data}
        addToWishlist={props.addToWishlist}
        deleteFromWishlist={props.deleteFromWishlist}
      />
    </div>
  );
}

function SeasonsList(props){
  return (
    <div>
      {props.data.seasons.length > 0 && props.data.seasons.map(function(season, index) {
        return (
          <div className="col-xs-12 col-sm-10 col-sm-offset-1 col-md-10 col-md-offset-1" key={index}>
            <Season
              data={season}
              addTorrent={props.addTorrent}
              addToWishlist={props.addToWishlist}
              getEpisodeDetails={props.getEpisodeDetails}
              updateEpisodeDetailsStore={props.updateEpisodeDetailsStore}
            />
          </div>
        )
      })}
    </div>
  )
}

class Season extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
    this.state = { colapsed: true };
  }
  handleClick(e) {
    e.preventDefault();
    this.setState({ colapsed: !this.state.colapsed });
  }
  render() {
    return (
      <div className="panel panel-default">
        <div className="panel-heading clickable" onClick={(e) => this.handleClick(e)}>
          Season {this.props.data.season}
          <small className="text-primary"> — ({this.props.data.episodes.length} episodes)</small>
          <span className="pull-right">
            {this.state.colapsed ||
              <i className="fa fa-chevron-down"></i>
            }
            {this.state.colapsed &&
              <i className="fa fa-chevron-left"></i>
            }
          </span>
        </div>
        {this.state.colapsed ||
          <table className="table table-striped table-hover">
            <tbody>
              {this.props.data.episodes.map(function(episode, index) {
                let key = `${episode.season}-${episode.episode}`;
                return (
                  <Episode
                    key={key}
                    data={episode}
                    addTorrent={this.props.addTorrent}
                    addToWishlist={this.props.addToWishlist}
                    getEpisodeDetails={this.props.getEpisodeDetails}
                    updateEpisodeDetailsStore={this.props.updateEpisodeDetailsStore}
                  />
                )
              }, this)}
            </tbody>
          </table>
        }
      </div>
    )
  }
}

function Episode(props) {
  return (
    <tr>
      <th scope="row" className="col-xs-2">
        <TrackButton
          data={props.data}
          addToWishlist={props.addToWishlist}
        />
        {props.data.episode}
      </th>
      <td className="col-xs-5">{props.data.title}</td>
      <td className="col-xs-6">
        <span className="pull-right">
          {props.data.torrents && props.data.torrents.map(function(torrent, index) {
            let key = `${props.data.season}-${props.data.episode}-${torrent.source}-${torrent.quality}`;
            return (
              <Torrent
                data={torrent}
                key={key}
                addTorrent={props.addTorrent}
              />
            )
          })}
          <DownloadButton data={props.data}/>
          <GetDetailsButton
            data={props.data}
            getEpisodeDetails={props.getEpisodeDetails}
            updateEpisodeDetailsStore={props.updateEpisodeDetailsStore}
          />
        </span>
      </td>
    </tr>
  )
}

class Torrent extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick(e, url) {
    e.preventDefault();
    this.props.addTorrent(url);
  }
  render() {
    return (
      <span className="episode-button">
        <a type="button"
          className="btn btn-primary btn-xs"
          onClick={(e) => this.handleClick(e, this.props.data.url)}
          href={this.props.data.url} >
          <i className="fa fa-download"></i> {this.props.data.quality}
        </a>
      </span>
    )
  }
}

class TrackHeader extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick(e, url) {
    e.preventDefault();
    let wishlisted = (this.props.data.tracked_season !== null && this.props.data.tracked_episode !== null);
    if (wishlisted) {
      this.props.deleteFromWishlist(this.props.data.imdb_id);
    } else {
      this.props.addToWishlist(this.props.data.imdb_id);
    }
  }
  render() {
    let wishlisted = (this.props.data.tracked_season !== null && this.props.data.tracked_episode !== null);
    if (wishlisted) {
      let msg;
      if (this.props.data.tracked_season !== 0 && this.props.data.tracked_episode !== 0) {
        msg = (
          <dd>
            Show tracked from <strong>season {this.props.data.tracked_season} episode {this.props.data.tracked_episode}</strong>
          </dd>
        );
      } else {
        msg = (
          <dd>
            Whole show tracked
          </dd>
        );
      }
      return (
        <dl className="dl-horizontal">
          <dt>Tracking active</dt>
          {msg}
          <dt></dt>
          <dd>
            <a className="btn btn-xs btn-danger" onClick={(e) => this.handleClick(e)}>
              <i className="fa fa-bookmark"></i> Untrack the show
            </a>
          </dd>
        </dl>
      );
    } else {
      return (
        <dl className="dl-horizontal">
          <dt>Tracking inactive</dt>
          <dd>
            <a className="btn btn-xs btn-info" onClick={(e) => this.handleClick(e)}>
              <i className="fa fa-bookmark-o"></i> Track the whole show
            </a>
          </dd>
        </dl>
      );
    }
  }
}

class TrackButton extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick(e, url) {
    e.preventDefault();
    this.props.addToWishlist(this.props.data.show_imdb_id, this.props.data.season, this.props.data.episode);
  }
  render() {
    const tooltipId = `tooltip-${this.props.data.season}-${this.props.data.episode}`;
    const tooltip = (
      <Tooltip id={tooltipId}>Track show from here</Tooltip>
    );
    return (
      <OverlayTrigger placement="top" overlay={tooltip} className="episode-button">
        <a type="button" className="btn btn-default btn-xs" onClick={(e) => this.handleClick(e)}>
          <i className="fa fa-bookmark"></i>
        </a>
      </OverlayTrigger>
    );
  }
}

function DownloadButton(props) {
  if (props.data.polochon_url === "") {
    return null
  }

  return (
    <span className="episode-button">
      <a type="button" className="btn btn-xs btn-warning" href={props.data.polochon_url}>
          <i className="fa fa-download"></i> Download
      </a>
    </span>
  );
}

class GetDetailsButton extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick(e, url) {
    e.preventDefault();
    if (this.props.data.fetching) {
      return
    }
    this.props.updateEpisodeDetailsStore(this.props.data.show_imdb_id, this.props.data.season, this.props.data.episode);
    this.props.getEpisodeDetails(this.props.data.show_imdb_id, this.props.data.season, this.props.data.episode);
  }
  render() {
    return (
      <span className="episode-button">
        <a type="button" className="btn btn-xs btn-info" onClick={(e) => this.handleClick(e)}>
          {this.props.data.fetching ||
              <span>
                <i className="fa fa-refresh"></i> Refresh
              </span>
          }
          {this.props.data.fetching &&
              <span>
                <i className="fa fa-spin fa-refresh"></i> Refreshing
              </span>
          }
        </a>
      </span>
    );
  }
}