import React, {useEffect, useState} from "react";
import SemesterTile from "@/components/SemesterTile";
import {useRouter} from "next/router";
import Background from "@/components/Background";
import Logout from "@/components/Logout";
import {baseURL} from "@/components/Constants"
import HelpButton from "@/components/HelpButton";
import StatusBar from "@/components/StatusBar";

export default function SemesteroverviewLecturer(p) {
    function getModules() {
        let urlTest = baseURL + "/module/id?sessionid=" + localStorage.getItem("sessionid");

        fetch(urlTest).then(response => response.json()).then(m => {
            setEntries(m);
            let args = "";
            for (let i = 0; i < m.length; i++) {
                args += m[i].semesterid;

                if (i < m.length - 1) {
                    args += "a";
                }
            }

            let temp = []
            let semesterURL = baseURL + "/semester/id/all?ids=" + args + "&sessionid=" + localStorage.getItem("sessionid");
            fetch(semesterURL).then(r => r.json()).then(sem => {
                sem.map(e => {
                    temp.push(e.name + " Sem. " + (e.number + 1))
                })
            }).then(() => setSemesterNames(temp))
        })

    }

    function onClickSemester(e, m, name) {
        if (e.activated == 1) {
            if (m.target === m.currentTarget) {
                localStorage.setItem("currentsid", e.semesterid)
                localStorage.setItem("currentmodulename", e.name)
                localStorage.setItem("moduleid", e.id)
                localStorage.setItem("semestername", name)
                router.push("/planning")
            }
        }
    }


    useEffect(() => {
        getModules();
    }, [])

    const [entries, setEntries] = useState([]);
    const [semesterNames, setSemesterNames] = useState([]);
    const router = useRouter();


    return (
        <div className={"semester-overview"}>
            <Logout/>
            <Background/>
            <HelpButton/>
            {entries.map((e, index) => (
                <div className={"semester-tile box-shadow"} style={{
                    backgroundColor: e.activated == 1 ? "#ffffff" : "#aaaaaa"
                }} onClick={(f) => onClickSemester(e, f, semesterNames[index])}>
                    <SemesterTile
                        editable={false} text={semesterNames[index]} text2={e.name}
                        onClick={(f) => onClickSemester(e, f, semesterNames[index])}
                    />
                    <StatusBar progress={0} module={e}/>
                </div>
            ))}
        </div>
    );
}