import "../style/home/home.css"

// import AccountSvg from "../assets/account.svg?react"
import { CSSProperties, useRef } from "react"
import { Header } from "./template/Header"

interface Tactic {
    id: number
    name: string
    creation_date: string
}

interface Team {
    id: number
    name: string
    picture: string
    main_color: string
    second_color: string
}

export default function Home({
    lastTactics,
    allTactics,
    teams,
    username,
}: {
    lastTactics: Tactic[]
    allTactics: Tactic[]
    teams: Team[]
    username: string
}) {
    return (
        <div id="main">
            <Header username={username} />
            <Body
                lastTactics={lastTactics}
                allTactics={allTactics}
                teams={teams}
            />
        </div>
    )
}

function Body({
    lastTactics,
    allTactics,
    teams,
}: {
    lastTactics: Tactic[]
    allTactics: Tactic[]
    teams: Team[]
}) {
    const widthPersonalSpace = 78
    const widthSideMenu = 100 - widthPersonalSpace
    return (
        <div id="body">
            <PersonalSpace width={widthPersonalSpace} allTactics={allTactics} />
            <SideMenu
                width={widthSideMenu}
                lastTactics={lastTactics}
                teams={teams}
            />
        </div>
    )
}

function SideMenu({
    width,
    lastTactics,
    teams,
}: {
    width: number
    lastTactics: Tactic[]
    teams: Team[]
}) {
    return (
        <div
            id="sideMenu"
            style={{
                width: width + "%",
            }}>
            <div id="sideMenuContent">
                <Team teams={teams} />
                <Tactic lastTactics={lastTactics} />
            </div>
        </div>
    )
}

function PersonalSpace({
    width,
    allTactics,
}: {
    width: number
    allTactics: Tactic[]
}) {
    return (
        <div
            id="personal-space"
            style={{
                width: width + "%",
            }}>
            <TitlePersonalSpace />
            <BodyPersonalSpace allTactics={allTactics} />
        </div>
    )
}

function TitlePersonalSpace() {
    return (
        <div id="titlePersonalSpace">
            <h2>Espace Personnel</h2>
        </div>
    )
}

function TableData({ allTactics }: { allTactics: Tactic[] }) {
    const nbRow = Math.floor(allTactics.length / 3) + 1
    let listTactic = Array(nbRow)
    for (let i = 0; i < nbRow; i++) {
        listTactic[i] = Array(0)
    }
    let i = 0
    let j = 0
    allTactics.forEach((tactic) => {
        listTactic[i].push(tactic)
        j++
        if (j === 3) {
            i++
            j = 0
        }
    })

    i = 0
    while (i < nbRow) {
        listTactic[i] = listTactic[i].map((tactic: Tactic) => (
            <td
                key={tactic.id}
                className="data"
                onClick={() => {
                    location.pathname = "/tactic/" + tactic.id + "/edit"
                }}>
                {troncName(tactic.name, 25)}
            </td>
        ))
        i++
    }
    if (nbRow == 1) {
        if (listTactic[0].length < 3) {
            for (let i = 0; i <= 3 - listTactic[0].length; i++) {
                listTactic[0].push(<td key={"tdNone" + i}></td>)
            }
        }
    }

    const data = listTactic.map((tactic, rowIndex) => (
        <tr key={rowIndex + "row"}>{tactic}</tr>
    ))
    return data
}

function BodyPersonalSpace({ allTactics }: { allTactics: Tactic[] }) {
    let data
    if (allTactics.length == 0) {
        data = <p>Aucune tactique créé !</p>
    } else {
        data = <TableData allTactics={allTactics} />
    }

    return (
        <div id="bodyPersonalSpace">
            <table>
                <tbody key="tbody">{data}</tbody>
            </table>
        </div>
    )
}

function Team({ teams }: { teams: Team[] }) {
    const listTeam = teams.map((team, rowIndex) => (
        <li key={"team" + rowIndex}>
            {team.name}
            <button onClick={() => (location.pathname = "/team/" + team.id)}>
                open
            </button>
        </li>
    ))
    return (
        <div id="teams">
            <div className="titreSideMenu">
                <h2 className="title">Mes équipes</h2>
                <button
                    className="new"
                    onClick={() => (location.pathname = "/team/new")}>
                    +
                </button>
            </div>
            <SetButtonTeam teams={teams} />
        </div>
    )
}

function Tactic({ lastTactics }: { lastTactics: Tactic[] }) {
    return (
        <div id="tactic">
            <div className="titreSideMenu">
                <h2 className="title">Mes dernières stratégies</h2>
                <button
                    className="new"
                    id="createTactic"
                    onClick={() => (location.pathname = "/tactic/new")}>
                    +
                </button>
            </div>
            <SetButtonTactic tactics={lastTactics} />
        </div>
    )
}

function SetButtonTactic({ tactics }: { tactics: Tactic[] }) {
    const lastTactics = tactics.map((tactic) => (
        <ButtonLastTactic tactic={tactic} />
    ))
    return <div className="SetButton">{lastTactics}</div>
}

function SetButtonTeam({ teams }: { teams: Team[] }) {
    const listTeam = teams.map((teams) => <ButtonTeam team={teams} />)
    return <div className="SetButton">{listTeam}</div>
}

function ButtonTeam({ team }: { team: Team }) {
    const name = troncName(team.name, 20)
    return (
        <div>
            <div
                id={"ButtonTeam" + team.id}
                className="buttonSideMenu data"
                onClick={() => {
                    location.pathname = "/team/" + team.id
                }}>
                {name}
            </div>
        </div>
    )
}

function ButtonLastTactic({ tactic }: { tactic: Tactic }) {
    const name = troncName(tactic.name, 20)
    return (
        <div
            id={"Button" + tactic.id}
            className="buttonSideMenu data"
            onClick={() => {
                location.pathname = "/tactic/" + tactic.id + "/edit"
            }}>
            {name}
        </div>
    )
}

function troncName(name: string, limit: number): string {
    if (name.length > limit) {
        name = name.substring(0, limit) + "..."
    }
    return name
}