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

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

export default function Home({ lastTactics } : { lastTactics : Tactic[] }) {
    return (
        <div id="main">
            <Title/>
            <Body lastTactics={lastTactics}/>
        </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 } : { lastTactics : Tactic[] }) {
    const widthPersonalSpace = 70;
    const widthSideMenu = 100-widthPersonalSpace 
    return (
        <div id="body">
            <PersonalSpace width = {widthPersonalSpace}/>
            <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 }: { width : number }) {
    return (
        <div id="personal-space" style={{
            width : width + "%",
        }}>
            <h2 id="ps-title">Espace Personnel</h2>
        </div>
    )
}

export function Team() {
    return (
        <div id="team">
            <h2>Mes équipes</h2>
            <button 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 id="titreTactic">
                <h2>Mes cinq dernières stratégies</h2>
                <button id="createTactic" onClick={() => (location.pathname = "/tactic/new")}>+</button>
                <ul>
                    {listTactic}
                </ul>
            </div>
        </div>
    )
}