import {Accordion, AccordionDetails, AccordionSummary} from "@mui/material";
import {ExpandMore} from "@mui/icons-material";
import React from "react";
import {IAbilityShort} from "../types/IAbility";
import {getIcon} from "./ModifiersProvideTable";
import {IMod} from "../types/Imod";
import AbilityFull from "./AbilityFull";
import {Irace} from "../types/Irace";
import {styled} from '@mui/material/styles';

const StyledAccordion = styled(Accordion)(({ theme }) => ({
    background: 'linear-gradient(145deg, #1a1a2e 0%, #16213e 100%)',
    border: '1px solid rgba(255, 255, 255, 0.1)',
    borderRadius: '12px',
    '&:before': { display: 'none' },
    '&.Mui-expanded': { margin: '0 0 8px 0' },
}));

interface IAbilityProps {
    ability: IAbilityShort,
    race: Irace,
    mod: IMod,
}

function Ability(props: IAbilityProps){

    const ability = props.ability

    return <div className='addon-research-accordion' id={"research-" + ability.id}><StyledAccordion TransitionProps={{ unmountOnExit: true, timeout: 100 }}>
        <AccordionSummary
            expandIcon={<ExpandMore sx={{color: '#ffffff'}}/>}
            aria-controls="panel1-content"
            sx={{color: '#ffffff'}}
        >
                <span style={{fontSize: 20, color: '#ffffff'}}>
                {ability.activationType === "Passive ability" ? <img className="abilityIcon" src="/images/PassiveIcon.gif"/> : <img className="abilityIcon" src={getIcon(ability.icon)}/>}
                    &nbsp; {ability.name ? ability.name : ability.fileName.charAt(0).toUpperCase() + ability.fileName.slice(1).replaceAll('_', ' ').replace('.rgd', '')}
                    <i style={{fontSize: 12, color: 'rgba(255,255,255,0.5)'}}>  ({ability.activationType})</i>
                </span>

        </AccordionSummary>
        <AccordionDetails sx={{color: 'rgba(255,255,255,0.85)'}}>
            <AbilityFull abilityId={ability.id} mod={props.mod} race={props.race} />
        </AccordionDetails>
    </StyledAccordion></div>

}


export default Ability;