import {useEffect, useState} from "react";
import {CalenderEntry} from "@/components/CalenderEntry";

let entries = {mo:[], tu:[], we:[], th:[], fr:[], sa:[]}

export default function CalenderView(p) {
    const [t, setT] = useState(false)

    function mouse_click(e) {
        let y_window = e.clientY;
        let y_target_offset = e.target.getBoundingClientRect().top;
        let row = Math.floor((y_window - y_target_offset) / 10)+1
        if(row <= 98 && row > 3) {
            let current_list = entries[e.currentTarget.id];
            let free = true;
            for(let i = 0; i < current_list.length; i++)
            {
                let current = current_list[i];

                for(let r = row; r < row + 2; r++)
                {
                    for(let s = current.start_point; s < current.end_point; s++)
                    {
                        if (s === r)
                        {
                            free = false;
                            break;
                        }
                    }
                }
            }

            if(free) {
                current_list.push(new CalenderEntry(row, row + 2));
                setT(!t);
            }
        }
    }

    function internal_to_time(internal)
    {
        internal -= 4
        internal /= 4
        let integer = Math.floor(internal)
        let decimal = internal.toFixed(2);
        let minutes = Math.floor((decimal - integer) * 60);
        let minutes_string = minutes.toString().length === 1 ? "0" + minutes : minutes
        return integer + ":" + minutes_string;
    }

    return (
        <div className={"calender-container"} id={t}>
            <div className={"calender-view"}>
                <div className={"spalte"} onClick={mouse_click} id={"mo"}>
                    <div className={"wochen-tag font-small"}>Montag</div>
                    {entries["mo"].map(d => (<div className={"entry"} style={{width: "100%", gridRowStart: d.start_point, gridRowEnd: d.end_point}}>
                        <p>{internal_to_time(d.start_point)}</p>
                        <p>{internal_to_time(d.end_point)}</p>
                    </div>))}
                </div>
                <div className={"spalte"} onClick={mouse_click} id={"tu"}>
                    <div className={"wochen-tag font-small"}>Dienstag</div>
                    {entries["tu"].map(d => (<div className={"entry"} style={{width: "100%", gridRowStart: d.start_point, gridRowEnd: d.end_point}}>

                        <p>{internal_to_time(d.start_point)}</p>
                        <p>{internal_to_time(d.end_point)}</p>
                    </div>))}
                </div>
                <div className={"spalte"} onClick={mouse_click} id={"we"}>
                    <div className={"wochen-tag font-small"}>Mittwoch</div>
                    {entries["we"].map(d => (<div className={"entry"} style={{width: "100%", gridRowStart: d.start_point, gridRowEnd: d.end_point}}>

                        <p>{internal_to_time(d.start_point)}</p>
                        <p>{internal_to_time(d.end_point)}</p>
                    </div>))}
                </div>
                <div className={"spalte"} onClick={mouse_click} id={"th"}>
                    <div className={"wochen-tag font-small"}>Donnerstag</div>
                    {entries["th"].map(d => (<div className={"entry"} style={{width: "100%", gridRowStart: d.start_point, gridRowEnd: d.end_point}}>

                        <p>{internal_to_time(d.start_point)}</p>
                        <p>{internal_to_time(d.end_point)}</p>
                    </div>))}
                </div>
                <div className={"spalte"} onClick={mouse_click} id={"fr"}>
                    <div className={"wochen-tag font-small"}>Freitag</div>
                    {entries["fr"].map(d => (<div className={"entry"} style={{width: "100%", gridRowStart: d.start_point, gridRowEnd: d.end_point}}>
                        <p>{internal_to_time(d.start_point)}</p>
                        <p>{internal_to_time(d.end_point)}</p>
                    </div>))}
                </div>
                <div className={"spalte"} onClick={mouse_click} id={"sa"}>
                    <div className={"wochen-tag font-small"}>Samstag</div>
                    {entries["sa"].map(d => (<div className={"entry"} style={{width: "100%", gridRowStart: d.start_point, gridRowEnd: d.end_point}}>
                        <p>{internal_to_time(d.start_point)}</p>
                        <p>{internal_to_time(d.end_point)}</p>
                    </div>))}
                </div>
            </div>
        </div>
    )
}