import React from "react";
import {IShortWeapon, IWeapon} from "../types/IUnit";
import {Accordion, AccordionDetails, AccordionSummary} from "@mui/material";
import {IconUrl} from "../core/api";
import {ExpandMore} from "@mui/icons-material";
import {IMod} from "../types/Imod";
import {Irace} from "../types/Irace";
import WeaponFull from "./WeaponFull";

interface IWeaponProps {
    weapon: IShortWeapon,
    isDefault: Boolean,
    renderRequired: Boolean,
    mod: IMod,
    race: Irace,
    haveReinforceMenu: Boolean,
}

class Weapon extends React.Component<IWeaponProps, any> {

    public static defaultProps = {
        isDefault: false,
        renderRequired: true,
    };

    humanReadableName(unit: string) {
        const firstUpper = String(unit).charAt(0).toUpperCase() + String(unit).slice(1);
        return firstUpper.replaceAll('_', ' ').replace('.rgd', '');
    }


    render() {

        const weapon = this.props.weapon

        return (
            <div style={{marginBottom: 10}}><Accordion TransitionProps={{ unmountOnExit: true, timeout: 100 }}>
                <AccordionSummary
                    expandIcon={<ExpandMore/>}
                    aria-controls="panel1-content"
                    id="panel1-header"
                >
                    <span style={{fontSize: 18}}> {!this.props.isDefault && weapon.icon && !weapon.icon.endsWith("upgrade.png") ?
                        <img className="weaponIcon" src={IconUrl + weapon.icon.replaceAll('\\', '/')}/> : (
                            weapon.isMeleeWeapon ?
                                <img className="weaponIcon" src="/images/MeleeStance_icon_bw.jpg"/> :
                                <img className="weaponIcon" src="/images/RangedStance_icon_bw.jpg"/>
                        )} {weapon.name ? weapon.name : this.humanReadableName(weapon.filename)} </span>
                </AccordionSummary>
                <AccordionDetails>
                    <WeaponFull weaponId={weapon.id} isDefault={this.props.isDefault} mod={this.props.mod} race={this.props.race} haveReinforceMenu={this.props.haveReinforceMenu}/>
                </AccordionDetails>
            </Accordion></div>
        );
    }
}

export default Weapon;