content: import React from 'react'
  import {connect} from 'react-redux'
  import Tooltip from 'tether-tooltip'
  import {lastfmLink} from "../lib/Utils"
  import Colors from '../lib/Colors'
  import {bindActionCreators} from 'redux'
  import createActions from '../actions'
  import Fade from './Fade'
  
  @connect(state => ({
    id: state.track.current.id,
    link: state.track.current.link,
    cover: state.track.current.cover,
    title: state.track.current.title,
    artists: state.track.current.artists,
    similars: state.track.current.similars,
    tags: state.track.current.tags,
    summary: state.track.current.summary,
    bio: state.track.current.bio,
    spotifyLike: state.track.current.spotifyLike,
    lastfmLike: state.track.current.lastfmLike,
    lyricsId: state.track.current.lyricsId,
    skip: state.track.current.blacklistSkip,
    isPlaying: state.track.current.isPlaying,
    premium: state.credentials.spotify && state.profile.spotify.premium,
    colors: state.track.current.colors,
    graph: state.graph
  }))
  export default class extends React.Component {
    actions = bindActionCreators(
      createActions([
        'showBio',
        'showLyrics',
        'like',
        'playPause',
        'ban',
        'prev',
        'next',
        'updateColors'
      ]),
      this.props.dispatch
    )
  
    loadCover = event => {
      const colors = new Colors(event.target);
      event.target.className = "rotate";
      this.actions.updateColors(colors.decoded);
    }
  
    favClass = () => {
      if (this.props.spotifyLike) {
        return 'spotify';
      } else if (this.props.lastfmLike) {
        return 'lastfm';
      }
      return '';
    }
  
    colorize = color => this.props.colors ? { color: this.props.colors[color] } : {};
  
    render() {
      if (this.props.graph) {
        return null;
      }
  
      const blacklist = this.props.premium && pug`
        i#blacklist.material-icons(key='ban', onClick=${this.actions.ban}, class=${this.props.skip ? 'active' : ''}, ref=${ref => { ref && 
          new Tooltip({
            target: ref,
            position: 'bottom center',
            content: "Add to Blacklist",
            classes: 'tooltip-theme-arrows'
          });
        }}) block
      `;
      const favourite = this.props.premium && pug`
        i#favourite.material-icons(key='fav', onClick=${this.actions.like}, class=${this.favClass()}, ref=${ref => { ref && 
          new Tooltip({
            target: ref,
            position: 'bottom center',
            content: "Save to Your Library",
            classes: 'tooltip-theme-arrows'
          });
        }}) favorite
      `;
      const lyrics = this.props.lyricsId && pug`
        button#btn-lyrics.btn.btn-default(key='lyrics', onClick=${this.actions.showLyrics})
          i.material-icons library_books
          |   
          | Lyrics
      `;
      const bio = this.props.bio && pug`
        button#btn-bio.btn.btn-default(key='bio', onClick=${this.actions.showBio})
          i.material-icons pages
          |   
          | Full bio
      `;
      const prev = this.props.premium && pug`
        button#btn-prev.btn.btn-primary(key='prev', onClick=${this.actions.prev})
          i.material-icons skip_previous
      `;
      const playPause = this.props.premium && pug`
        button#btn-play.btn.btn-primary(key='play', class=${this.props.isPlaying && 'active'}, onClick=${this.actions.playPause})
          = ${this.props.isPlaying ? pug`i#icon-pause.material-icons pause` : pug`i#icon-play.material-icons play_arrow`}
      `;
      const next = this.props.premium && pug`
        button#btn-next.btn.btn-primary(key='next', onClick=${this.actions.next})
          i.material-icons skip_next
      `;
  
      const {
        link,
        cover,
        title,
        artists,
        similars,
        tags,
        colors,
        summary
      } = this.props;
  
      return (
        <Fade>
          <div id="music">
            <a target="_blank" id="songLink" href={link}>
              <img id="cover" crossOrigin="anonymous" onLoad={this.loadCover} src={cover}/>
            </a>
            <h1 style={this.colorize(0)} id="title">{title}</h1>
            { artists &&
            <h2 id="artist">
              { artists.map(name => pug`a(target='_blank', key=${name}, style=${this.colorize(1)}, href=${lastfmLink(name)}) ${name}`) }
            </h2> }
            { similars &&
            <div id="similar">
              { similars.map(a => pug`a(target='_blank', key=${a.name}, style=${this.colorize(2)}, href=${a.url}) ${a.name}`) }
            </div> }
            { tags &&
            <div id="tags">
              { tags.map(a => pug`a(target='_blank', key=${a.name}, style=${this.colorize(3)}, href=${a.url}) ${a.name}`) }
            </div> }
            <div id="buttons">
              <span style={this.colorize(4)} id="bio-summary" dangerouslySetInnerHTML={{ __html: summary }}/>
              {pug`
              = blacklist
              = favourite
              = lyrics
              = bio
              = prev
              = playPause
              = next
              `}
            </div>
          </div>
        </Fade>
      )
    }
  }