import React from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { toJS } from 'immutable'
import { addTorrent } from '../../actions/torrents'
import { refreshSubtitles } from '../../actions/subtitles'
import { addShowToWishlist, deleteShowFromWishlist, getEpisodeDetails, updateShowDetails } from '../../actions/shows'

import Loader from '../loader/loader'
import DownloadButton from '../buttons/download'
import SubtitlesButton from '../buttons/subtitles'


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

function mapStateToProps(state) {
  return {
    loading: state.showStore.loading,
    show: state.showStore.get('show'),
  };
}
const mapDispatchToProps = (dispatch) =>
  bindActionCreators({addTorrent, addShowToWishlist, deleteShowFromWishlist,
  updateShowDetails, getEpisodeDetails,
    refreshSubtitles }, dispatch)

class ShowDetails extends React.Component {
  render() {
    // Loading
    if (this.props.loading) {
      return (<Loader />);
    }
    return (
      <div className="row" id="container">
        <Header
          data={this.props.show}
          addToWishlist={this.props.addShowToWishlist}
          deleteFromWishlist={this.props.deleteShowFromWishlist}
        />
        <SeasonsList
          data={this.props.show}
          addTorrent={this.props.addTorrent}
          addToWishlist={this.props.addShowToWishlist}
          getEpisodeDetails={this.props.getEpisodeDetails}
          refreshSubtitles={this.props.refreshSubtitles}
        />
      </div>
    );
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(ShowDetails);

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.get('poster_url')}
        className="show-thumbnail thumbnail-selected img-thumbnail img-responsive"/>
    </div>
  );
}

function HeaderDetails(props){
  const imdbLink = `http://www.imdb.com/title/${props.data.get('imdb_id')}`;
  return (
    <div className="col-xs-12 col-sm-10">
      <dl className="dl-horizontal">
        <dt>Title</dt>
        <dd>{props.data.get('title')}</dd>
        <dt>Plot</dt>
        <dd className="plot">{props.data.get('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.get('year')}</dd>
        <dt>Rating</dt>
        <dd>{props.data.get('rating')}</dd>
      </dl>
      <TrackHeader
        data={props.data}
        addToWishlist={props.addToWishlist}
        deleteFromWishlist={props.deleteFromWishlist}
      />
    </div>
  );
}

function SeasonsList(props){
  return (
    <div>
      {props.data.get('seasons').entrySeq().map(function([season, data]) {
        return (

          <div className="col-xs-12 col-sm-10 col-sm-offset-1 col-md-10 col-md-offset-1" key={season.toString()}>
            <Season
              data={data}
              season={season}
              addTorrent={props.addTorrent}
              addToWishlist={props.addToWishlist}
              getEpisodeDetails={props.getEpisodeDetails}
              refreshSubtitles={props.refreshSubtitles}
            />
          </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.season}
          <small className="text-primary"> — ({this.props.data.toList().size} 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.toList().map(function(episode) {
                let key = `${episode.get('season')}-${episode.get('episode')}`;
                return (
                  <Episode
                    key={key}
                    data={episode}
                    addTorrent={this.props.addTorrent}
                    addToWishlist={this.props.addToWishlist}
                    getEpisodeDetails={this.props.getEpisodeDetails}
                    refreshSubtitles={this.props.refreshSubtitles}
                  />
                )
              }, this)}
            </tbody>
          </table>
        }
      </div>
    )
  }
}

function Episode(props) {
  // TODO: remove this when everything uses immutable
  let subtitles;
  if (props.data.has('subtitles') && props.data.get('subtitles')) {
    subtitles = props.data.get('subtitles').toJS();
  }

  return (
    <tr>
      <th scope="row" className="col-xs-2">
        <TrackButton
          data={props.data}
          addToWishlist={props.addToWishlist}
        />
        {props.data.get('episode')}
      </th>
      <td className="col-xs-12">
        {props.data.get('title')}

        <span className="pull-right episode-buttons">
          <SubtitlesButton
            url={props.data.get('polochon_url')}
            subtitles={subtitles}
            refreshSubtitles={props.refreshSubtitles}
            resourceID={props.data.get('show_imdb_id')}
            season={props.data.get('season')}
            episode={props.data.get('episode')}
            type="episode"
            xs
          />
          {props.data.get('torrents') && props.data.get('torrents').toList().map(function(torrent) {
            let key = `${props.data.get('season')}-${props.data.get('episode')}-${torrent.get('source')}-${torrent.get('quality')}`;
            return (
              <Torrent
                data={torrent}
                key={key}
                addTorrent={props.addTorrent}
              />
            )
          })}
          <DownloadButton
            url={props.data.get('polochon_url')}
            subtitles={subtitles}
            xs
          />
          <GetDetailsButton
            data={props.data}
            getEpisodeDetails={props.getEpisodeDetails}
          />
        </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>
        <a type="button"
          className="btn btn-primary btn-xs"
          onClick={(e) => this.handleClick(e, this.props.data.get('url'))}
          href={this.props.data.url} >
          <i className="fa fa-download"></i> {this.props.data.get('quality')}
        </a>
      </span>
    )
  }
}

class TrackHeader extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick(e, url) {
    e.preventDefault();
    const trackedSeason = this.props.data.get('tracked_season');
    const trackedEpisode = this.props.data.get('tracked_episode');
    const imdbId = this.props.data.get('imdb_id');
    const wishlisted = (trackedSeason !== null && trackedEpisode !== null);
    if (wishlisted) {
      this.props.deleteFromWishlist(imdbId);
    } else {
      this.props.addToWishlist(imdbId);
    }
  }
  render() {
    const trackedSeason = this.props.data.get('tracked_season');
    const trackedEpisode = this.props.data.get('tracked_episode');
    const imdbId = this.props.data.get('imdb_id');
    const wishlisted = (trackedSeason !== null && trackedEpisode !== null);
    let msg;
    if (wishlisted) {
      if (trackedSeason !== 0 && trackedEpisode !== 0) {
        msg = (
          <dd>Show tracked from <strong>season {trackedSeason} episode {trackedEpisode}</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();
    const imdbId = this.props.data.get('show_imdb_id');
    const season = this.props.data.get('season');
    const episode = this.props.data.get('episode');
    this.props.addToWishlist(imdbId, season, 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}>
        <a type="button" className="btn btn-default btn-xs" onClick={(e) => this.handleClick(e)}>
          <i className="fa fa-bookmark"></i>
        </a>
      </OverlayTrigger>
    );
  }
}

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