import "../style/home.css"
import { CSSProperties } from "react"

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

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

export function Title() {
    return (
        <div id="header">
            <h1 id="IQBall"><span id="IQ">IQ</span><span id="B">B</span>all</h1>
        </div>
    )
}

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

        </div>
    )
}

export function SideMenu({ width, lastTactics } : { width : number, lastTactics : Tactic[] }) {

    return (
        <div id="sideMenu" style={{
            width : width + "%",
        }}>
            <Team/>
            <Tactic lastTactics={lastTactics}/>
        </div>
    )
}


export 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 BodyPersonalSpace({ 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} onClick={() => {location.pathname="/tactic/"+tactic.id+"/edit"}}>{tactic.name}</td>
        );
        i++;
    }

    const data = listTactic.map((tactic, rowIndex) => 
        <tr key={rowIndex+"row"}>
            {tactic}
        </tr>
    );
    return (
        <div id="bodyPersonalSpace">
            <table>
                <tbody key="tbody">
                    {data}
                </tbody>
            </table>

        </div>
    )
}

export function Team() {
    return (
        <div className="titreSideMenu">
            <h2 className="title">Mes équipes</h2>
            <button className="new" onClick={() => location.pathname="/tactic/new"}>+</button>
        </div>
    )
}

export function Tactic({lastTactics} : { lastTactics : Tactic[]}) {

    const listTactic = lastTactics.map(tactic => 
        <li
            key = {tactic.id}
        > 
            {tactic.name} : {tactic.creation_date}
            <button onClick={() => {location.pathname="/tactic/"+tactic.id+"/edit"}}>open</button>
        </li>
    );
    return (
        <div id="tactic">
            <div className="titreSideMenu">
                <h2 className="title">Mes cinq dernières stratégies</h2>
                <button className="new" id="createTactic" onClick={() => (location.pathname = "/tactic/new")}>+</button>
             </div>
            <ul>
                {listTactic}
            </ul>
        </div>
    );
}