import '../style/team_panel.css';
import {BASE} from "../Constants";
import {Team,TeamInfo,Color,User,Member} from "../model/Team/Team"

export default function TeamPanel({isCoach, team}: {isCoach: boolean, team: Team }){
    return (
        <div id="mainDiv">
            <header>
                <h1><a href="{{ path('/') }}">IQBall</a></h1>
            </header>
            <TeamDisplay team={team.info}/>

            {isCoach && <CoachOptions id={team.info.id}/>}


            <MembersDisplay members={team.members}/>
        </div>
    )
}

function TeamDisplay({ team}: {team : TeamInfo}) {
    return (
        <div id="teamInfo">
            <div>
                <h1>{team.name}</h1>
                <img id="logo" src={team.picture} alt="Logo d'équipe" />
            </div>
            <div id="colors">
                <p>Couleur principale</p>
                <ColorDisplay color={team.mainColor}/>
                <p>Couleur secondaire</p>
                <ColorDisplay color={team.secondColor}/>
            </div>
        </div>
    )
}

function ColorDisplay({color}: {color : Color}){
    return(
        <div className="square" style={{backgroundColor: color.hex}}/>
    )
}

function CoachOptions ({id}:{id:number}){
    return (
        <div>
            <button id="delete" onClick={()=>confirm('Êtes-vous sûr de supprimer cette équipe?') ? window.location.href=`${BASE}/team/${id}/delete` : {}}>Supprimer</button>
        </div>
    )
}

function MembersDisplay({members}:{members : Member[]}){
    const listMember = members.map((member) =>
        <MemberDisplay member={member}/>
    );
    return (
        <div id="Members">
            <h2>Membres :</h2>
            {listMember}
        </div>
    )
}

function MemberDisplay({member}: {member : Member}){
    return (
        <div className="Member">
            <img id="profilePicture" src={member.user.profilePicture} alt="Photo de profile"/>
            <p>{member.user.name}</p>
            <p>{member.role}</p>
            <p>{member.user.email}</p>
        </div>
    )
}