import React from 'react';


function getMatch (item, match, locationFirst) {
    if (!locationFirst || match.location === locationFirst) {
        return {
            firstTeam: item,
            firstScore: match.score,
            secondTeam: match.opponent,
            secondScore: match.opponentScore
        }
    } else {
        return {
            firstTeam: match.opponent,
            firstScore: match.opponentScore,
            secondTeam: item,
            secondScore: match.score
        }
    }
}


function Matches (props) {
    return (
        <table className="r-table">
            <tbody>
                {props.results.map(([item, result], i) => {
                    if (!result.match) {
                        return (
                            <tr key={props.firstColumn[i] || item} className={`replay-table-row`}>
                                <td className="replay-table-position">{props.firstColumn[i]}</td>
                                <td className="replay-table-team">{item}</td>
                                <td className="replay-table-score">{}</td>
                                <td className="replay-table-team">{}</td>
                            </tr>
                        );
                    } else {
                        const match = getMatch(item, result.match, props.locationFirst);
                        return (
                            <tr key={props.firstColumn[i] || item} className={`replay-table-row ${result.result}`}>
                                <td className="replay-table-position"
                                    onClick={props.selectRound ? () => props.selectRound(i+1) : null}>
                                    {props.firstColumn[i]}
                                </td>
                                <td className="replay-table-team" onClick={() => props.selectItem(match.firstTeam)}>
                                    {match.firstTeam}
                                </td>
                                <td className="replay-table-score">{`${match.firstScore} - ${match.secondScore}`}</td>
                                <td className="replay-table-team" onClick={() => props.selectItem(match.secondTeam)}>
                                    {match.secondTeam}
                                </td>
                            </tr>
                        );
                    }
                })}
            </tbody>
        </table>
    );
}

export default Matches;
@@ -588,16 +588,232 @@
 table%22%3E%0A
+            %3Cthead%3E%0A                %3Ctr%3E%0A                    %3Cth%3E#%3C/th%3E%0A                    %3Cth%3ETeam%3C/th%3E%0A                    %3Cth%3Evs.%3C/th%3E%0A                    %3Cth%3ETeam%3C/th%3E%0A                %3C/tr%3E%0A            %3C/thead%3E%0A
         

add header to Match mode