import {IMod} from "../../types/Imod";
import {IResearch} from "../../types/IResearch";
import {
    Accordion,
    AccordionDetails,
    AccordionSummary,
    Grid2,
    Paper,
    Table,
    TableBody,
    TableCell,
    TableContainer,
    TableRow
} from "@mui/material";
import {ExpandMore} from "@mui/icons-material";
import {getIcon, ModifiersProvidesTable} from "../ModifiersProvideTable";
import AvTimerOutlinedIcon from "@mui/icons-material/AvTimer";
import Required from "../Required";
import React from "react";
import {IBuilding} from "../../types/IBuilding";
import {IResearchShort} from "../../types/IResearchShort";
import ResearchFull from "./ResearchFull";
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' },
}));

const StyledLink = styled('a')(({ theme }) => ({
    color: '#e94560',
    textDecoration: 'none',
    '&:hover': {
        color: '#ff6b6b',
        textDecoration: 'underline',
    },
}));


interface IResearchProps {
    research: IResearchShort,
    building: IBuilding,
    mod: IMod,
}

function Research(props: IResearchProps){

    const research = props.research
    const building = props.building

    return <div className='addon-research-accordion' id={"research-" + research.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'}}>
                <img className="sergeantIcon" src={getIcon(research.icon)}/>
                    &nbsp; {research.name}
            </span>
        </AccordionSummary>
        <AccordionDetails sx={{color: 'rgba(255,255,255,0.85)'}}>
            <ResearchFull id={research.id} building={building}/>
        </AccordionDetails>
    </StyledAccordion></div>

}

export function renderAffectedResearches(researches: IResearchShort[], modId: number, raceId: string) {

    function researchLink(rs: IResearchShort) {
        return <span><img style={{verticalAlign: "top", height: 25}}
                          src={getIcon(rs.icon)}/>
            &nbsp;<StyledLink href={`/mod/${modId}/race/${raceId}/building/${rs.buildingId}#research-${rs.id}`}>
                {rs.name}
                </StyledLink></span>
    }

    return <div style={{color: 'rgba(255, 255, 255, 0.85)'}}> {researches.map(rs =>
        rs.buildingId == null ? <span key={rs.id}></span> :
            <span key={rs.id}>Research affect: {researchLink(rs)}<br/></span>
    )}</div>
}


export default Research;