import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { loadPlayers, loadParams } from '../../actions/appActions';
import { Avatar, Table } from 'antd';

class Scoreboard extends Component {

  constructor(props) {
    super(props);
    this.state = {
      players: [],
      playersLoadError: false,
      params: []
    };
    this.loadPlayerInterval = null;
  }

  componentDidMount() {
    this.loadPlayerInterval = setInterval(
      () => this.loadPlayers(),
      3000
    );
  };

  componentWillUnmount() {
    clearInterval(this.loadPlayerInterval);
  };

  loadPlayers = () => {
    let currentShow = this.props.params.find((param) => {
      return param.key === 'current show';
    });
    if (currentShow) {
      this.props.loadPlayers(currentShow.value);
    }
  };

  render() {

    let orderedPlayers = this.props.players.sort(function (a, b) {
      return b.values.score - a.values.score;
    });

    for (var i = 0; i < orderedPlayers.length; i++) {
      orderedPlayers[i].standing = i + 1;
    }

    const columns = [
      {
        title: '',
        dataIndex: 'standing',
        key: 'standing',
        width: 50
      }, {
        title: 'Avatar',
        dataIndex: 'playerId',
        key: 'playerId',
        width: 100,
        render: (playerId) => (
          <Avatar size={64} src={'https://platform.thegameisover.de/v2/account/' + playerId + '/avatar?v=s'} />
        )
      }, {
        title: 'Name',
        dataIndex: 'name',
        key: 'name',
        style: 'tableHeader'
      }, {
        title: 'Berufsfeld',
        dataIndex: 'cluster',
        key: 'cluster'
      }, {
        title: 'Macht',
        dataIndex: 'values.power',
        key: 'macht',
        width: 100
      }, {
        title: 'Psyche',
        dataIndex: 'values.psyche',
        key: 'psyche',
        width: 100
      }, {
        title: 'Struktur',
        dataIndex: 'values.structure',
        key: 'structure',
        width: 100
      }, {
        title: 'Post Labour Score',
        dataIndex: 'values.score',
        key: 'score',
        width: 200,
        render: (score) => (
          <span style={{ fontWeight: 'bold', fontSize: '1.2em' }}>{score}</span>
        )
      }
    ]

    return (
      <div>
        <Table
          columns={columns}
          dataSource={orderedPlayers}
          pagination={false}
          rowKey='id'
          size="small"
          bordered
        />
      </div>
    )
  }
}

Scoreboard.propTypes = {
  loadPlayers: PropTypes.func.isRequired,
  players: PropTypes.array,
  loadParams: PropTypes.func.isRequired,
  params: PropTypes.array
};

const mapStateToProps = state => ({
  players: state.appData.players,
  playersLoadError: state.appData.playersLoadError,
  params: state.appData.params
});

export default connect(mapStateToProps, { loadPlayers, loadParams })(Scoreboard);