import * as React from 'react';
import { loadStream, addToQueue } from '../../player/player.actions';
import { IStream, IStreamProps } from './stream.types';

export class Stream extends React.Component<IStreamProps, {}> {

  public formatStream(stream: IStream) {
    return {
      key: stream.key,
      user: stream.user.name,
      cover: stream.pictures.thumbnail,
      duration: stream.audio_length,
      title: stream.name
    };
  }

  public streamCoverImg(url: string) {
    const tmp = url.split('100x100');
    return <img src={`${tmp[0]}150x150${tmp[1]}`} />;
  }

  public wrapText(text: string) {
    if (text.length > 50) {
      return `${text.slice(0, 50)}...`;
    }
    return text;
  }

  public getTime(time: number) {
    const formatHours = (value: number) => {
      const hours = Math.floor(value / 3600);
      const minutes = Math.floor((value - (hours * 3600)) / 60);

      return minutes ? `${hours}h${minutes}m` : `${hours}h`;
    };

    const t = time >= 3600 ? formatHours(time) : `${Math.floor(time / 60)}m`;
    return <span>{ t }</span>;
  }

  public render() {
    const { data } = this.props;
    const userLink = `/user/${data.user.username}`;
    const className = `stream-wrapper ${this.props.cls}`;
    return (
      <div className={ className }>
        <div
          className='stream-cover-img'>
          <div className='stream-cover-img-overlay'>
            {
              (this.props.play && this.props.queue) &&
              <span
                className='material-icons'
                onClick={() => {
                  const s = this.formatStream(data);
                  this.props.queue(s);
                  this.props.play(s);
                }
              }>
                play_circle_outline
              </span>
            }
            {
              this.props.queue &&
              <span
                className='material-icons'
                onClick={() => this.props.queue(this.formatStream(data))}>
                playlist_add
              </span>
            }
          </div>
          { this.streamCoverImg(data.pictures.medium) }
        </div>
        <div className='stream-info'>
          <div className='stream-title' >
            {this.wrapText(data.name)}
          </div>
          {
            this.props.navigate &&
            <div className='stream-subtitle' >
              by <a onClick={() => this.props.navigate(userLink)}>{data.user.name}</a>
            </div>
          }
          <div className='stream-footer'>
            <div className='stream-stats-block'>
              <div className='stream-stat'>
                <i className='material-icons'>access_time</i>
                { this.getTime(data.audio_length) }
              </div>
              <div className='stream-stat'>
                <i className='material-icons'>play_arrow</i>
                <span>{data.play_count}</span>
              </div>
              <div className='stream-stat'>
                <i className='material-icons'>favorite_border</i>
                <span>{data.favorite_count}</span>
              </div>
              <div className='stream-stat'>
                <i className='material-icons'>repeat</i>
                <span>{data.repost_count}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default Stream;
