import React from "react";
import {IShortWeapon, IWeapon} from "../types/IUnit";
import {AccordionDetails, AccordionSummary} from "@mui/material";
import {withTheme} from "../core/api";
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";
import {StyledAccordion} from "../commons/StyledAccordion";

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 theme = (this.props as any).theme;
        const isDark = theme.palette.mode === 'dark';
        const textColor = isDark ? '#dee2e6' : 'rgba(0, 0, 0, 0.85)';

        const weapon = this.props.weapon

        return (
            <div style={{marginBottom: 10}}><StyledAccordion TransitionProps={{ unmountOnExit: true, timeout: 100 }}>
                <AccordionSummary
                    expandIcon={<ExpandMore sx={{color: textColor}}/>}
                    aria-controls="panel1-content"
                    id="panel1-header"
                    sx={{color: textColor, '& .MuiAccordionSummary-content': { margin: '12px 0' }, '& .MuiAccordionSummary-content.Mui-expanded': { margin: '12px 0' }}}
                >
                    <span style={{fontSize: 18, color: textColor, display: 'flex', alignItems: 'center'}}> {!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"/>
                        )} &nbsp; {weapon.name ? weapon.name : this.humanReadableName(weapon.filename)}
                        {this.props.isDefault && <i style={{fontSize: 12, color: 'rgba(255,255,255,0.5)', marginLeft: 4}}>(default)</i>}
                    </span>
                </AccordionSummary>
                <AccordionDetails sx={{color: textColor}}>
                    <WeaponFull weaponId={weapon.id} isDefault={this.props.isDefault} mod={this.props.mod} race={this.props.race} haveReinforceMenu={this.props.haveReinforceMenu}/>
                </AccordionDetails>
            </StyledAccordion></div>
        );
    }
}

export default withTheme(Weapon);