import Button from "@/components/Button";
import {useRouter} from "next/router";
import {useEffect, useState} from "react";
import Background from "@/components/Background";


let userModuleMapping = new Map()

export default function InputForm(p) {

    let startDateParam = "";
    let endDateParam = "";
    let courseNameParam = "";

    if (p.startDate != null) startDateParam = p.startDate;
    if (p.endDate != null) endDateParam = p.endDate;
    if (p.courseName != null) courseNameParam = p.courseName;

    const router = useRouter();

    const [startDate, setStartDate] = useState(startDateParam);
    const [endDate, setEndDate] = useState(endDateParam);
    const [courseName, setCourseName] = useState(courseNameParam);
    const [users, setUsers] = useState([]);

    async function getAllUsers() {
        let sessionid = localStorage.getItem("sessionid");
        let url = "http://localhost:8080/users/all?sessionid=" + sessionid;


        try {
            await fetch(url).then(response => response.json()).then(user => setUsers(user));
        }
        catch(e)
        {
            router.push("/")
        }
    }

    useEffect(() => {
        userModuleMapping.clear()
        getAllUsers();
    }, [])

    async function onCreateClicked() {
        let startSplit = startDate.split("-");
        let endSplit = endDate.split("-");
        let startYear = parseInt(startSplit[0]);
        let endYear = parseInt(endSplit[0]);

        //month - 1 because jan = 0, day like month... but because of next lines 3 to 4 not - 1
        let startInternalDate = new Date(startYear, parseInt(startSplit[1]) - 1, parseInt(startSplit[2]))
        let endInternalDate = new Date(endYear, parseInt(endSplit[1]) - 1, parseInt(endSplit[2]))

        let startDayInYear = Math.round((startInternalDate - new Date(startYear, 0, 0)) / (1000 * 60 * 60 * 24));
        let endDayInYear = Math.round((endInternalDate - new Date(endYear, 0, 0)) / (1000 * 60 * 60 * 24));

        let id = p.courseName == null ? 0 : localStorage.getItem("currentsid");

        let json = {
            "id": id,
            "startday": startDayInYear,
            "endday": endDayInYear,
            "name": courseName,
            "startyear": startYear,
            "endyear": endYear
        }

        let url = "http://localhost:8080/semester?sessionid=" + localStorage.getItem("sessionid");
        let method = p.courseName == null ? "POST" : "PUT";


        let semesterid = localStorage.getItem("currentsid");
        let tempsid = 0;
        await fetch(url, {
            method: method,
            headers: {"Content-Type": "application/json"},
            body: JSON.stringify(json)
        }).then(response => response.json()).then(semester => {tempsid = semester.id});


        if(method === "POST")
        {
            semesterid = tempsid;
        }

        for(let [key, value] of userModuleMapping)
        {
            let json1 = {
                "id": 0,
                "userid": value.getUserid(),
                "semesterid": semesterid,
                "name": value.getModuleName(),
                "activated": value.getActivated()
            }

            if(value.getChecked())
            {
                await fetch("http://localhost:8080/module?sessionid=" + localStorage.getItem("sessionid"), {
                    method: method,
                    headers: {"Content-Type": "application/json"},
                    body: JSON.stringify(json1)
                })
            }
        }

        router.back();
    }

    class UserModuleInfo
    {
        constructor()
        {
            this.moduleName = "";
            this.userid = 0;
            this.activated = 0
            this.checked = false
        }

        getModuleName() {return this.moduleName}
        getUserid() {return this.userid}
        getActivated() {return this.activated}
        getChecked() {return this.checked}

        setModuleName(name) {this.moduleName = name}
        setUserid(id) {this.userid = id}
        setActivated(a) {this.activated = a}
        setChecked(b) {this.checked = b}
    }

    function onModuleClicked(user, module) {

        if(userModuleMapping.has(user.id))
        {
            let temp = userModuleMapping.get(user.id)
            temp.setModuleName(module)
            temp.setUserid(user.id)
            console.log("test")
        }
        else
        {
            let temp = new UserModuleInfo()
            temp.setModuleName(module)
            temp.setUserid(user.id)
            userModuleMapping.set(user.id, temp)
            console.log("test1")
        }
    }

    function onSelectedCheckBox(user, state)
    {
        if(userModuleMapping.has(user.id))
        {
            userModuleMapping.get(user.id).setChecked(state.target.checked);
        }
        else
        {
            let temp = new UserModuleInfo()
            temp.setChecked(state.target.checked)
            temp.setUserid(user.id)
            userModuleMapping.set(user.id, temp)
        }
    }

    function onActivatedCheckBox(user, state)
    {
        if(userModuleMapping.has(user.id))
        {
            let t = state.target.checked ? 1 : 0;
            userModuleMapping.get(user.id).setActivated(t);
        }
        else
        {
            let temp = new UserModuleInfo()
            let t = state.target.checked ? 1 : 0;
            temp.setActivated(t)
            temp.setUserid(user.id)
            userModuleMapping.set(user.id, temp)
        }
    }

    return (
        <>
            <Background/>
            <div className="inputForm box-shadow">
                <p style={{
                    fontSize: "18px",
                    color: "#777777",
                    fontWeight: 500,
                    width: 150
                }}>SemesterName</p>
                <input className="courseNameInput box-shadow" value={courseName}
                       onChange={(e) => setCourseName(e.target.value)}/>
                <div className="semesterRangeInput">
                    <div className="semesterDateLables">
                        <p className="semesterDateLable" style={{
                            fontSize: " 18px",
                            color: "#777777",
                            fontWeight: 500,
                            width: 150
                        }}>Semesterstart</p>
                        <p className="semesterDateLable" style={{
                            fontSize: " 18px",
                            color: "#777777",
                            fontWeight: 500,
                            width: 150
                        }}>Semesterende</p>
                    </div>
                    <div className="semesterDateInputPair">
                        <input type="date" id="start" className={"box-shadow selector"} value={startDate}
                               style={{padding: 5}}
                               onChange={(e) => setStartDate(e.target.value)}/>
                        <p className="inputFieldSeperator">-</p>
                        <input type="date" id="start" className={"box-shadow selector"} value={endDate}
                               style={{padding: 5}}
                               onChange={(e) => setEndDate(e.target.value)}/>
                    </div>
                </div>
                <div className="round-border dozentSelector">
                    <table>
                        <tbody>
                        <tr>
                            <th style={{
                                fontSize: " 18px",
                                color: "#777777",
                                fontWeight: 500,
                            }}>Wählen
                            </th>
                            <th style={{
                                fontSize: " 18px",
                                color: "#777777",
                                fontWeight: 500,
                            }}>Freischalten
                            </th>
                            <th style={{
                                fontSize: " 18px",
                                color: "#777777",
                                fontWeight: 500,
                                textAlign: "center"
                            }}>Dozent
                            </th>
                            <th style={{
                                fontSize: " 18px",
                                color: "#777777",
                                fontWeight: 500,
                                textAlign: "center",
                            }}>Modul
                            </th>
                        </tr>
                        {users.map(user => (
                            <tr>

                                <td><div style={{
                                    display: "flex",
                                    flexDirection: "row",
                                    justifyContent: "center",
                                }}><input type="checkbox" onChange={(e) => {
                                    onSelectedCheckBox(user, e)
                                }}/></div></td>

                                <td><div style={{
                                    display: "flex",
                                    flexDirection: "row",
                                    justifyContent: "center",
                                }}><input type="checkbox" onChange={(e) => {
                                    onActivatedCheckBox(user, e);
                                }}/></div></td>
                                <td style={{textAlign: "center"}}>{user.firstName + " " + user.lastName}</td>
                                <select id={"userSelect"} name={"userSelect"} className={"box-shadow selector"}
                                        multiple={false} style={{
                                    maxHeight: 80,
                                    marginTop: 10,
                                    padding: "5px 2px"
                                }} onChange={(e) => {
                                    onModuleClicked(user, e.target.value)
                                }}>
                                    <option value={"Please Select"}>Please Select</option>
                                    <option value={"Programmieren"}>Programmieren</option>
                                    <option value={"BWL"}>BWL</option>
                                    <option value={"Lineare Algebra"}>Lineare Algebra</option>
                                    <option value={"Analysis"}>Analysis</option>
                                    <option value={"AnwendungsProjekt"}>AnwendungsProjekt</option>
                                </select>
                            </tr>
                        ))}
                        </tbody>
                    </table>
                </div>
                <div id="buttons">
                    <Button color="rgba(54,54,54,0.64)" width="100px" height="30px" text="Abbrechen" onClick={() => {
                        router.back()
                    }}/>
                    <Button color="#77932b" width="100px" height="30px" text="Speichern" onClick={() => {
                        onCreateClicked()
                    }}/>
                </div>
            </div>
        </>
    )
}