Soulstorm-wiki-frontend/src/classes/building/BuildingAddon.tsx

import React from "react";
import {useTheme} from "@mui/material/styles";
import {
    AccordionDetails,
    AccordionSummary,
    Grid2,
    Table,
    TableBody,
    TableCell,
    TableContainer,
    TableRow,
    Typography
} from "@mui/material";
import {IBuilding, IBuildingAddon} from "../../types/IBuilding";
import AvTimerOutlinedIcon from "@mui/icons-material/AvTimer";
import {ExpandMore} from "@mui/icons-material";
import {IMod} from "../../types/Imod";
import {getIcon, ModifiersProvidesTable,} from "../ModifiersProvideTable";
import Required from "../Required";
import {StyledAccordion} from "../../commons/StyledAccordion";
import {StyledPaper} from "../../commons/StyledPaper";
import {styled} from "@mui/material/styles";


interface IBuildingAddonProps {
    addon: IBuildingAddon,
    building: IBuilding,
    mod: IMod,
}

function BuildingAddon(props: IBuildingAddonProps){
    const theme = useTheme();
    const isDark = theme.palette.mode === 'dark';
    const textColor = isDark ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)';

    const addon = props.addon
    const building = props.building



    return <div className='addon-research-accordion' id={"addon-" + addon.id} ><StyledAccordion>
        <AccordionSummary
            sx={{color: textColor, '& .MuiAccordionSummary-content': { margin: '12px 0' }, '& .MuiAccordionSummary-content.Mui-expanded': { margin: '12px 0' }}}
            expandIcon={<ExpandMore sx={{color: textColor}}/>}
            aria-controls="panel1-content"
        >
            <span style={{fontSize: 20, color: textColor, display: 'flex', alignItems: 'center'}}>
                <img className="sergeantIcon" src={getIcon(addon.icon)}/>
                    &nbsp; {addon.name}
            </span>
        </AccordionSummary>
        <AccordionDetails sx={{color: textColor}}>
            <Grid2 container spacing={2}>
                <Grid2 size={{xs: 12, md: 4}}>
                    <TableContainer component={StyledPaper} elevation={0}>
                        <Table size="small" aria-label="a dense table">
                            <TableBody id="unit-stats-table">
                                <TableRow
                                    sx={{'&:last-child td, &:last-child th': {border: 0}}}
                                >
                                    <TableCell component="th" scope="row" >Cost</TableCell>
                                    <TableCell>
                                        {addon.addonCostRequisition > 0 &&
                                            <span>&nbsp;<img style={{verticalAlign: "top"}}
                                                             src="/images/Resource_requisition.gif"/>&nbsp;
                                                {addon.addonCostRequisition.toFixed(0)}</span>}
                                        {addon.addonCostPower > 0 && <span>&nbsp;<img style={{verticalAlign: "top"}}
                                                                                      src="/images/Resource_power.gif"/>&nbsp;
                                            {addon.addonCostPower.toFixed(0)}</span>}
                                        {(addon.addonCostPopulation !== undefined && addon.addonCostPopulation > 0) &&
                                            <span>&nbsp;<img style={{verticalAlign: "top"}}
                                                             src="/images/Resource_orksquadcap.gif"/>&nbsp;
                                                {addon.addonCostPopulation.toFixed(0)}</span>}
                                        {(addon.addonCostFaith !== undefined && addon.addonCostFaith > 0) &&
                                            <span>&nbsp;<img style={{verticalAlign: "top"}}
                                                             src="/images/Resource_faith.gif"/>&nbsp;
                                                {addon.addonCostFaith}</span>}
                                        {(addon.addonCostSouls !== undefined && addon.addonCostSouls > 0) &&
                                            <span>&nbsp;<img style={{verticalAlign: "top"}}
                                                             src="/images/Resource_souls.gif"/>&nbsp;
                                                {addon.addonCostSouls.toFixed(0)}</span>}
                                        {(addon.addonCostTime !== undefined && addon.addonCostTime > 0) &&
                                            <span>&nbsp;<AvTimerOutlinedIcon
                                                style={{verticalAlign: "top", fontSize: "18px"}}/>&nbsp;
                                                {addon.addonCostTime}s</span>}
                                    </TableCell>
                                </TableRow>

                            </TableBody>
                        </Table>
                    </TableContainer><br/>
                </Grid2>
                <Grid2 size={{xs: 12, md: 8}}>
                    <span style={{ whiteSpace: 'pre-wrap' }}>{addon.description}</span>
                </Grid2>
                <ModifiersProvidesTable modifiers={addon.addonModifiers} affectedData={addon.affectedData} modId={props.mod.id} race={building.race}/>
                {addon.addonRequirement !== null &&
                    <Grid2 size={{xs: 12, md: 12}}>
                        <Required requirement={addon.addonRequirement} modId={building.modId} raceId={building.race.id}/>
                    </Grid2>}
            </Grid2>
            <b className="hotkey" >Hotkey: {addon.hotkey} <span style={{ fontSize: '12px', fontWeight: 400, color: 'rgba(128,128,128,0.7)' }}>Filename: {addon.filename}</span></b>
        </AccordionDetails>
    </StyledAccordion></div>
}


export default BuildingAddon;