import "../style/team_panel.css"
import { BASE } from "../Constants"
import { Team, TeamInfo, Member } from "../model/Team"
import { Tactic } from "../model/tactic/Tactic"
import { fetchAPI } from "../Fetcher"
import { useState } from "react"

export default function TeamPanel({
    isCoach,
    team,
    currentUserId,
    tactics,
}: {
    isCoach: boolean
    team: Team
    currentUserId: number
    tactics: Tactic[]
}) {
    const [teamTactics, setTeamTactics] = useState(tactics)

    function handleTacticDelete(tacticId: number) {
        fetchAPI(`tactic/${tacticId}/unshare-to-team`, team.info)
        const updatedTactics = teamTactics.filter(
            (tactic) => tactic.id !== tacticId,
        )
        setTeamTactics(updatedTactics)
    }

    return (
        <div id="main-div">
            <div id="header-div">
                <header>
                    <h1>
                        <a href={BASE + "/"}>IQBall</a>
                    </h1>
                </header>
            </div>
            <div id="content-container">
                <div id="left-panel">
                    <TeamDisplay team={team.info} />
                    {isCoach && <CoachOptions id={team.info.id} />}
                    <MembersDisplay
                        members={team.members}
                        isCoach={isCoach}
                        idTeam={team.info.id}
                        currentUserId={currentUserId}
                    />
                </div>
                <div id="right-panel">
                    <TacticsDisplay
                        tactics={teamTactics}
                        isCoach={isCoach}
                        onTacticDelete={(tacticId) =>
                            handleTacticDelete(tacticId)
                        }
                    />
                </div>
            </div>
        </div>
    )
}

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

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

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>
            <button
                id="edit"
                onClick={() =>
                    (window.location.href = `${BASE}/team/${id}/edit`)
                }>
                Modifier
            </button>
        </div>
    )
}

function MembersDisplay({
    members,
    isCoach,
    idTeam,
    currentUserId,
}: {
    members: Member[]
    isCoach: boolean
    idTeam: number
    currentUserId: number
}) {
    const listMember = members.map((member) => (
        <MemberDisplay
            key={member.user.id}
            member={member}
            isCoach={isCoach}
            idTeam={idTeam}
            currentUserId={currentUserId}
        />
    ))
    return (
        <div id="members">
            <div id="head-members">
                <h2>Membres :</h2>
                {isCoach && (
                    <button
                        id="add-member"
                        onClick={() =>
                            (window.location.href = `${BASE}/team/${idTeam}/addMember`)
                        }>
                        +
                    </button>
                )}
            </div>
            {listMember}
        </div>
    )
}

function MemberDisplay({
    member,
    isCoach,
    idTeam,
    currentUserId,
}: {
    member: Member
    isCoach: boolean
    idTeam: number
    currentUserId: number
}) {
    return (
        <div className="member">
            <img
                id="profile-picture"
                src={member.user.profilePicture}
                alt="Photo de profile"
            />
            <p>{member.user.name}</p>
            <p>{member.role}</p>
            <p>{member.user.email}</p>
            {isCoach && currentUserId !== member.user.id && (
                <button
                    id="delete"
                    onClick={() =>
                        confirm(
                            "Êtes-vous sûr de retirer ce membre de l'équipe?",
                        )
                            ? (window.location.href = `${BASE}/team/${idTeam}/remove/${member.user.id}`)
                            : {}
                    }>
                    Retirer
                </button>
            )}
            {isCoach && currentUserId == member.user.id && (
                <button
                    id="delete"
                    onClick={() =>
                        confirm("Êtes-vous sûr de quitter cette équipe?")
                            ? (window.location.href = `${BASE}/team/${idTeam}/remove/${member.user.id}`)
                            : {}
                    }>
                    Quitter
                </button>
            )}
        </div>
    )
}

function TacticsDisplay({
    tactics,
    isCoach,
    onTacticDelete,
}: {
    tactics: Tactic[]
    isCoach: boolean
    onTacticDelete: (tacticId: number) => void
}) {
    const listTactic = tactics.map((tactic) => (
        <TacticDisplay
            key={tactic.id}
            tactic={tactic}
            isCoach={isCoach}
            onTacticDelete={() => onTacticDelete(tactic.id)}
        />
    ))
    return (
        <div id="tactics">
            <div id="head-tactics">
                <h1>Tactiques partagées</h1>
            </div>
            {listTactic}
        </div>
    )
}

function TacticDisplay({
    tactic,
    isCoach,
    onTacticDelete,
}: {
    tactic: Tactic
    isCoach: boolean
    onTacticDelete: () => void
}) {
    return (
        <div
            className="tactic"
            onClick={() =>
                (location.pathname = BASE + "/tactic/" + tactic.id + "/edit")
            }>
            <p>{tactic.name}</p>
            {isCoach && (
                <button
                    id="delete"
                    onClick={(event) => {
                        event.stopPropagation()
                        confirm(
                            "Êtes-vous sûr de vouloir supprimer le partage cette tactique ?",
                        ) && onTacticDelete()
                    }}>
                    Retirer
                </button>
            )}
        </div>
    )
}