import React, {useEffect, useState} from "react";
import {AvailableUnits} from "../core/api";
import {Grid2, Table, TableBody, TableCell, TableContainer, TableHead, TableRow} from "@mui/material";
import {NavLink} from "react-router-dom";
import {IRaceUnits, IUnitShort} from "../types/IUnitShort";


interface IUnitsTable {
    racesUnits: IRaceUnits[];
}

export default function UnitsTable(prop: {modId: number}) {

    const [unitsTable, setUnitsTable] = useState<IUnitsTable>({
        racesUnits: []
    });


    function getUnitRef(modId: number, raceId: string, unit: IUnitShort) {
        return <span style={{fontSize: 11}}><a href={"/mod/" + modId + "/race/" + raceId + "/unit/" + unit.id}>
        {unit.name}
    </a><br/></span>
    }

    useEffect(() => {
        fetch(AvailableUnits  + "/mod/" + prop.modId)
            .then(res => res.json())
            .then((res: IRaceUnits[]) => {
                setUnitsTable({
                    racesUnits : res
                });
            })
    }, []);

    function armourTypePriority(armorTypeId: string): number {
        switch(armorTypeId) {
            case 'Infantry Low':
                return 1;
            case 'Infantry Medium':
                return 2;
            case 'Infantry High':
                return 3;
            case 'Demon Medium':
                return 4;
            case 'Infantry Heavy Medium':
                return 5;
            case 'Infantry Heavy High':
                return 6;
            case 'Commander':
                return 7;
            case 'Vehicle Low':
                return 8;
            case 'Vehicle Medium':
                return 9;
            case 'Vehicle High':
                return 10;
            case 'Demon High':
                return 11;
            case 'Air':
                return 12;
            case 'Building Low':
                return 13;
            case 'Building Medium':
                return 14;
            case 'Building High':
                return 15;
            default:
                return 0;
        }
    }

    function getUnitsRef(units: IUnitShort[], raceId: string): JSX.Element[] {
        return units
            .sort((a, b) => armourTypePriority(a.armourTypeName) - armourTypePriority(b.armourTypeName))
            .map(unit =>
            getUnitRef(prop.modId, raceId, unit)
        )
    }

    function generateRaceUnitTable(racesUnitsPart: IRaceUnits[]){
        return (<TableContainer>
            {<Table sx={{minWidth: 650}} size="small" aria-label="a dense table">
                <TableHead>
                    <TableRow>
                        {racesUnitsPart.map(raceUnits => <TableCell><h2><NavLink state={raceUnits.race.id}
                                                                                        to={"/mod/" + prop.modId + "/race/" + raceUnits.race.id}>{raceUnits.race.name}</NavLink>
                        </h2></TableCell>)}
                    </TableRow>
                </TableHead>
                <TableBody>
                    <TableRow style={{verticalAlign: 'top'}}>
                        {racesUnitsPart.map(raceUnits =>
                            <TableCell>
                                {getUnitsRef(raceUnits.infantry, raceUnits.race.id)}
                            </TableCell>)
                        }
                    </TableRow>
                    <TableRow style={{verticalAlign: 'top'}}>
                        {racesUnitsPart.map(raceUnits =>
                            <TableCell>
                                {getUnitsRef(raceUnits.tech, raceUnits.race.id)}
                            </TableCell>)
                        }
                    </TableRow>
                    <TableRow style={{verticalAlign: 'top'}}>
                        {racesUnitsPart.map(raceUnits =>
                            <TableCell>
                                {getUnitsRef(raceUnits.support, raceUnits.race.id)}
                            </TableCell>)
                        }
                    </TableRow>
                </TableBody>
            </Table>}
        </TableContainer>)
    }

    function generateRaceUnitTables(racesUnits: IRaceUnits[], raceCount: number){
        var elements: JSX.Element[] = []
        for(let i = 0; i < racesUnits.length;i = i + raceCount){
            elements.push(generateRaceUnitTable(racesUnits.slice(i, i + raceCount)))
        }
        return elements
    }


    return (
        <Grid2>
            <Grid2 display={{ lg: 'block', xs: 'none' }} >
                {generateRaceUnitTables(unitsTable.racesUnits, 9)}
            </Grid2>
            <Grid2 display={{ lg: 'none', xs: 'block' }}>
                {unitsTable.racesUnits.map(raceUnits => <h4><NavLink state={raceUnits.race.id}
                                                                                to={"/mod/" + prop.modId + "/race/" + raceUnits.race.id}>{raceUnits.race.name}</NavLink>
                </h4>)}
            </Grid2>
        </Grid2>
    )

}