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

// import AccountSvg from "../assets/account.svg?react"
import {Header} from "./template/Header"
import {BASE} from "../Constants"
import Popup from "../components/Popup";
import {useState} from "react";

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

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

interface Folder{
    id:number
    name:string
}

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

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

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

function PersonalSpace({
    width,
    tactics,
    folders,
    currentFolder
}: {
    width: number
    tactics: Tactic[]
    folders: Folder[]
    currentFolder: number
}) {
    const [showPopup, setShowPopup] = useState(false)
    return (
        <div
            id="personal-space"
            style={{
                width: width + "%",
            }}>
            <TitlePersonalSpace />
            <NewFolder showPopup={showPopup} setShowPopup={setShowPopup} currentFolder={currentFolder}/>
            <BodyPersonalSpace tactics={tactics} folders={folders} />
        </div>
    )
}

function NewFolder({
                       showPopup,
                       setShowPopup,
                       currentFolder
                   }: { showPopup, setShowPopup: (newVal: boolean) => void, currentFolder: number }) {
    return (
        <div>
            <div
                id="new-folder-button"
                onClick={() => setShowPopup(true)}
            >Nouveau dossier</div>
            <Popup displayState={showPopup} onClose={() => setShowPopup(false)}>
                <h2>Nouveau dossier</h2>
                <form action={location.pathname + BASE + "folder/" + currentFolder + "/new"} method="post" id="new-folder-form">
                    <label for="folderName">Nom du dossier</label>
                    <input type="text" id="folderName" name="folderName" required/>
                    <input type="submit" value="Confirmer" id="submit-form"/>
                </form>
            </Popup>
        </div>
    )
}

function TitlePersonalSpace() {
    return (
        <div id="title-personal-space">
            <h2>Espace Personnel</h2>
        </div>
    )
}

function TableData({ tactics,folders }: { tactics: Tactic[],folders: Folder[]}) {
    const nbTacticRow = Math.floor(tactics.length / 3) + 1
    const nbFolderRow = Math.floor(folders.length / 3) + 1
    let listTactic = Array(nbTacticRow)
    let listFolder = Array(nbFolderRow)
    for (let i = 0; i < nbTacticRow; i++) {
        listTactic[i] = Array(0)
    }
    for (let i = 0; i < nbFolderRow ; i++) {
        listFolder[i] = Array(0)
    }
    let i = 0
    let j = 0
    tactics.forEach((tactic) => {
        listTactic[i].push(tactic)
        j++
        if (j === 3) {
            i++
            j = 0
        }
    })
    folders.forEach((folder) => {
        listFolder[i].push(folder)
        j++
        if (j === 3) {
            i++
            j = 0
        }
    })

    i = 0
    while (i < nbTacticRow) {
        listTactic[i] = listTactic[i].map((tactic: Tactic) => (
            <td
                key={tactic.id}
                className="data"
                onClick={() => {
                    location.pathname = BASE + "/tactic/" + tactic.id + "/edit"
                }}>
                {truncateString(tactic.name, 25)}
            </td>
        ))
        i++
    }
    i = 0
    while (i < nbFolderRow) {
        listFolder[i] = listFolder[i].map((folder: Folder) => (
            <td
                key={folder.id}
                className="data"
                onClick={() => {
                    location.pathname = BASE + "/tactic/" + folder.id + "/edit"
                }}>
                {truncateString(folder.name, 25)}
            </td>
        ))
        i++
    }

    if (nbTacticRow == 1) {
        if (listTactic[0].length < 3) {
            for (let i = 0; i <= 3 - listTactic[0].length; i++) {
                listTactic[0].push(<td key={"tdNone" + i}></td>)
            }
        }
    }
    if (nbFolderRow == 1) {
        if (listFolder[0].length < 3) {
            for (let i = 0; i <= 3 - listFolder[0].length; i++) {
                listFolder[0].push(<td key={"tdNone" + i}></td>)
            }
        }
    }

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

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

    return (
        <div id="body-personal-space">
            <table>
                <tbody key="tbody">{data}</tbody>
            </table>
        </div>
    )
}

function Team({ teams }: { teams: Team[] }) {
    return (
        <div id="teams">
            <div className="titre-side-menu">
                <h2 className="title">Mes équipes</h2>
                <button
                    className="new"
                    onClick={() => (location.pathname = BASE + "/team/new")}>
                    +
                </button>
            </div>
            <SetButtonTeam teams={teams} />
        </div>
    )
}

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

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

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

function ButtonTeam({ team }: { team: Team }) {
    const name = truncateString(team.name, 20)
    return (
        <div>
            <div
                id={"button-team" + team.id}
                className="button-side-menu data"
                onClick={() => {
                    location.pathname = BASE + "/team/" + team.id
                }}>
                {name}
            </div>
        </div>
    )
}

function ButtonLastTactic({ tactic }: { tactic: Tactic }) {
    const name = truncateString(tactic.name, 20)
    return (
        <div
            id={"button" + tactic.id}
            className="button-side-menu data"
            onClick={() => {
                location.pathname = BASE + "/tactic/" + tactic.id + "/edit"
            }}>
            {name}
        </div>
    )
}

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