import {AvailableMods, AvailableRacesPart, AvailableUnits, IconUrl} from "../core/api";
import React, {useEffect, useRef, useState} from "react";
import {NavLink, useLocation, useParams} from "react-router-dom";
import {withRouter} from "../core/withrouter";
import {IMod} from "../types/Imod";
import {Irace} from "../types/Irace";
import {Button, ListItem, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow} from "@mui/material";
import {ArrowBack} from "@mui/icons-material";
import {IRaceUnits, IUnitShort} from "../types/IUnitShort";
import UnitsTable from "../classes/UnitsTable";


interface ModPageState {
    mod: IMod,
}



class ModPage extends React.Component<any, ModPageState> {

    constructor(props: any) {
        super(props);
        fetch(AvailableMods + "/" + this.props.match.params.modId)
            .then(res => res.json())
            .then((res: IMod) => {
                this.setState({
                    mod : res
                });
            });


    }


    render() {
        if(this.state != null &&  this.state.mod != null ){

            document.title = this.state.mod.name

            return <div>
                <a href="/"><Button id="back-button" variant="contained"
                                          startIcon={<ArrowBack/>}> Back</Button></a>
                <h1>{this.state.mod.name} ({this.state.mod.version})</h1>
                <UnitsTable modId={this.state.mod.id}/>
            </div>;
        } else {
            return "";
        }
    }
}



export default withRouter(ModPage);