content: import React from 'react'
  import {connect} from 'react-redux'
  import Loader from '../components/Loader'
  import HeroStatsNav from '../components/hero_stats/HeroStatsNav'
  import {fetchHeroStats} from '../actions/api'
  import {
    proSetOrderBy,
    proSetOrderDirection,
    publicSetOrderBy,
    publicSetOrderDirection
  } from '../actions/heroStats'
  
  class HeroStats extends React.Component {
    componentDidMount() {
      this.props.fetchHeroStats()
    }
  
    renderHeroStats() {
      if (this.props.heroStatsLoading) {
        return <Loader />
      } else {
        return (
          <div>
            {this.props.children && React.cloneElement(this.props.children, {
              ...this.props
            })}
          </div>
        )
      }
    }
  
    render() {
      const {
        location,
        router,
        errorMessage
      } = this.props
  
      return (
        <div>
          <HeroStatsNav router={router} />
          {this.renderHeroStats()}
          
          {errorMessage && <div>{errorMessage}</div>}
        </div>
      )
    }
  }
  
  function orderProHeroStats(stats, orderBy, direction) {
    const statsCopy = JSON.parse(JSON.stringify(stats))
    
    return statsCopy.sort((a, b) => {
      if (direction === 'desc') {
        switch (orderBy) {
          case 'winrate':
            return b.pro_win / b.pro_pick - a.pro_win / a.pro_pick
          case 'picks':
            return b.pro_pick - a.pro_pick
          case 'bans':
            return b.pro_ban - a.pro_ban
          case 'name':
            return b.localized_name < a.localized_name ? -1 : 1
          default:
            return b.localized_name < a.localized_name ? -1 : 1        
        }
      } else {
        switch (orderBy) {
          case 'winrate':
            return a.pro_win / a.pro_pick - b.pro_win / b.pro_pick
          case 'picks':
            return a.pro_pick - b.pro_pick
          case 'bans':
            return a.pro_ban - b.pro_ban
          case 'name':
            return a.localized_name < b.localized_name ? -1 : 1      
          default:
            return a.localized_name < b.localized_name ? -1 : 1        
        }
      }
    })
  }
  
  function orderPublicHeroStats(stats, orderBy, direction) {
    const statsCopy = JSON.parse(JSON.stringify(stats))
    
    return statsCopy.sort((a, b) => {
      if (direction === 'desc') {
        switch (orderBy) {
          case '1k_winrate':
            return b['1000_win'] / b['1000_pick'] - a['1000_win'] / a['1000_pick']
          case '1k_picks':
            return b['1000_pick'] - a['1000_pick']
          case '2k_winrate':
            return b['2000_win'] / b['2000_pick'] - a['2000_win'] / a['2000_pick']
          case '2k_picks':
            return b['2000_pick'] - a['2000_pick']
          case '3k_winrate':
            return b['3000_win'] / b['3000_pick'] - a['3000_win'] / a['3000_pick']
          case '3k_picks':
            return b['3000_pick'] - a['3000_pick']
          case '4k_winrate':
            return b['4000_win'] / b['4000_pick'] - a['4000_win'] / a['4000_pick']
          case '4k_picks':
            return b['4000_pick'] - a['4000_pick']
          case '5k_winrate':
            return b['5000_win'] / b['5000_pick'] - a['5000_win'] / a['5000_pick']
          case '5k_picks':
            return b['5000_pick'] - a['5000_pick']
          case 'name':
            return b.localized_name < a.localized_name ? -1 : 1
          default:
            return b.localized_name < a.localized_name ? -1 : 1        
        }
      } else {
        switch (orderBy) {
          case '1k_winrate':
            return a['1000_win'] / a['1000_pick'] - b['1000_win'] / b['1000_pick']
          case '1k_picks':
            return a['1000_pick'] - b['1000_pick']
          case '2k_winrate':
            return a['2000_win'] / a['2000_pick'] - b['2000_win'] / b['2000_pick']
          case '2k_picks':
            return a['2000_pick'] - b['2000_pick']
          case '3k_winrate':
            return a['3000_win'] / a['3000_pick'] - b['3000_win'] / b['3000_pick']
          case '3k_picks':
            return a['3000_pick'] - b['3000_pick']
          case '4k_winrate':
            return a['4000_win'] / a['4000_pick'] - b['4000_win'] / b['4000_pick']
          case '4k_picks':
            return a['4000_pick'] - b['4000_pick']
          case '5k_winrate':
            return a['5000_win'] / a['5000_pick'] - b['5000_win'] / b['5000_pick']
          case '5k_picks':
            return a['5000_pick'] - b['5000_pick']
          case 'name':
            return a.localized_name < b.localized_name ? -1 : 1
          default:
            return a.localized_name < b.localized_name ? -1 : 1       
        }
      }
    })
  }
  
  function mapStateToProps(state) {
    const {
      heroStatsLoading,
      heroStats,
      errorMessage
    } = state.api
  
    const {
      proOrderBy,
      proOrderDirection,
      publicOrderBy,
      publicOrderDirection
    } = state.heroStats
  
    const proStats = orderProHeroStats(heroStats, proOrderBy, proOrderDirection)
    const publicStats = orderPublicHeroStats(heroStats, publicOrderBy, publicOrderDirection)
  
    return {
      heroStatsLoading,
      heroStatsPro: proStats,
      heroStatsPublic: publicStats,
      errorMessage,
      proOrderBy,
      proOrderDirection,
      publicOrderBy,
      publicOrderDirection
    }
  }
  
  const mapDispatchToProps = ({
    fetchHeroStats,
    proSetOrderBy,
    proSetOrderDirection,
    publicSetOrderBy,
    publicSetOrderDirection
  })
  
  export default connect(
    mapStateToProps,
    mapDispatchToProps
  )(HeroStats)