"use client";

import { set } from "date-fns";
import { BookOpen, Info, MessageCircle, NotebookPen, Quote } from "lucide-react";
import { useEffect, useRef, useState } from "react";

function selectHourCode(time: number) {
    document.getElementById("hour-" + (time).toString())?.getElementsByClassName("edit-hour-code")[0].focus();
}
function selectHourComment(time: number) {
    document.getElementById("hour-" + (time).toString())?.getElementsByClassName("edit-hour-comment")[0].focus();
}

export function EditableHourComment({
    originalText,
    hour,
    onSubmit,
    i
}) {

    // console.log(`Hello from ${hour.time}, where the categoryDesc is ${hour.categoryDesc}`);

    const ref = useRef<HTMLInputElement>(null);

    const [text, setText] = useState(originalText);

    useEffect(() => {
        if (ref.current) {
            ref.current.value = text;
        }
    }, [ref]);

    // Update the text when Hour changes
    useEffect(() => {
        setText(hour.comment ?? hour.categoryName);
    }, [hour]);

    // Update the ref element whenever the Text changes
    useEffect(() => {
        if (ref.current) {
            ref.current.value = text;
        }
    }, [text]);

    const submit = () => {
        setText(ref.current?.value ?? originalText);
        onSubmit({
            date: hour.date,
            datetime: hour.datetime,
            dayId: hour.dayId,
            comment: ref.current?.value ?? "",
            code: hour.categoryCode.toString(),
        });
        selectHourComment(i + 1);
    };
    return (
        <div className="flex">
            {hour.comment ?
                <NotebookPen className="mr-4" />
                : ""}
            <input
                className="w-full text-left edit-hour-comment hover:border-b hover:border-dashed"
                style={{
                    background: hour.background ?? "inherit", color: hour.foreground ?? "inherit", fontFamily: "inherit",
                    borderColor: hour.foreground ?? "inherit"
                }}
                ref={ref}
                defaultValue={text}
                onKeyDown={(e) => {
                    if (e.key === "Enter") {
                        e.preventDefault();
                        submit();
                    }
                    if (e.key == "ArrowDown") {
                        e.preventDefault();
                        selectHourComment(i + 1);
                    }
                    if (e.key == "ArrowUp") {
                        e.preventDefault();
                        selectHourComment(i - 1);
                    }
                    if (e.key == "ArrowLeft") {
                        e.preventDefault();
                        selectHourCode(i);
                    }
                }}
                onClick={(e) => {
                    e.target.select();
                }}
                onFocus={(e) => {
                    e.target.select();
                }}
                onBlur={(e) => {
                    if (!e.target.value) {
                        e.target.value = originalText ?? "";
                    }
                }}
            />
        </div>
    );
}