import React, { Component } from 'react';
import PropTypes from 'prop-types';
import axios from 'axios';

export default class FirstComponent extends Component {

    constructor(props) {
        super(props);

        this.state = {
            prioMatches: this.getMatchData(),
            DataIsLoaded: false,
            bank: '300.0'
        }

        this.handleBankChange = this.handleBankChange.bind(this)
    }

    handleBankChange(event) {
        this.setState({ bank: event.target.value })
    }

    render() {
        const { DataIsLoaded, prioMatches } = this.state;
        if (!DataIsLoaded) {
            return (
                <div>
                    <h1> LOADING ... </h1>
                </div>
            )
        }

        const element = (<div>Test from Element</div>)
        return (<div className='comptext'>
            <h3>First Component</h3>
            {this.props.displaytext}
            {element}
            <label htmlFor='bank'>Bank:</label>
            <input id='bank' value={this.state.bank} type='text' onChange={this.handleBankChange}></input>
            <h2>Match data</h2>
            <table className='matchTable'>
                <tbody>
                    <tr>{this.createMatchTableHeader()}</tr>
                    {this.createMatchTable()}
                </tbody>
            </table>
            <p>Match data end</p>
        </div>)
    }

    getMatchData() {
        fetch('http://nordh.xyz:8666/?what=getPrioMatches')
            .then((res) => res.json())
            .then((json) => {
                this.setState({
                    prioMatches: json,
                    DataIsLoaded: true,
                })
            });
    }

    createMatchTableHeader() {
        let header = Object.keys(this.state.prioMatches[0])
 
        const handleSortChange = (accessor) => {
//            const sortOrder = accessor === sortField && order === "asc" ? "desc" : "asc";
//            setSortField(accessor);
//            setOrder(sortOrder);
//            handleSorting(accessor, sortOrder);
           };

        return header.map((key, index) => {
            return <th key={index} className='matchTableHeader' onClick={handleSortChange(index)}>{key.toUpperCase()}</th>
        })
    }

    createMatchTable() {
        return this.state.prioMatches.map((match, index) => {
            const { id, date, league, country, homeTeam, awayTeam, odds1, oddsX, odds2, analysisValue } = match
            return (<tr key={id} className='matchTableRow'>
                <td className='matchTableCell'>{id}</td>
                <td className='matchTableCell'>{date}</td>
                <td className='matchTableCell'>{country}</td>
                <td className='matchTableCell'>{league}</td>
                <td className='matchTableCell'>{homeTeam}</td>
                <td className='matchTableCell'>{awayTeam}</td>
                <td className='matchTableCell'>{odds1}</td>
                <td className='matchTableCell'>{oddsX}</td>
                <td className='matchTableCell'>{odds2}</td>
                <td className='matchTableCell'>{analysisValue}</td>
            </tr>)
        })
    }
}

FirstComponent.propTypes = {
    displaytext: PropTypes.string.isRequired
};