"use client";

import { usePathname, useRouter } from "next/navigation";
import { toast } from "@/components/ui/use-toast";
import { cn } from "@/lib/utils";
import React, { useState, useEffect, useRef } from 'react';

import { useUpdateHour } from "@lifetracker/shared-react/hooks/days";
import { EditableText } from "@/components/dashboard/EditableText";
import { format } from "date-fns";
import { TZDate } from "@date-fns/tz";
import { ZHour } from "@lifetracker/shared/types/days";
import { MessageCircle, Pencil } from "lucide-react";
import { ButtonWithTooltip } from "@/components/ui/button";
import { EditableHourCode } from "./EditableHourCode";
import { EditableHourComment } from "./EditableHourComment";
import { api } from "@/lib/trpc";
import spacetime from 'spacetime';
import { eq, is } from "drizzle-orm";

export default function EditableHour({
    hour: initialHour,
    i,
    className,
}: {
    hour: ZHour,
    i: number,
    className?: string;
}) {
    const [hour, setHour] = useState(initialHour);
    const { mutate: updateHour, isPending } = useUpdateHour({
        onSuccess: (res, req, meta) => {
            const { categoryCode: oldCode, comment: oldComment } = hour;
            const newHour = {
                categoryCode: parseInt(req.code!),
                comment: oldComment,
                ...res,
            };
            console.log(res);
            setHour(newHour);
            // Only show toast if client screen is larger than mobile
            if (window.innerWidth > 640) {
                toast({
                    description: "Hour updated!",
                });
            }
        },
    });
    const tzOffset = spacetime().offset() / 60;
    const localDateTime = spacetime(hour.date).add(hour.time + tzOffset, "hour");
    hour.datetime = `${localDateTime.format('{hour} {ampm}')}`;



    useEffect(() => {
        // console.log(hour.categoryDesc);
    }, [hour]);


    function isActiveHour(hour: ZHour) {
        const now = new TZDate();
        const isCurrentHour = ((now.getHours() - localDateTime.hour()) == 0);
        const isToday = (localDateTime.format("iso-short") == format(now, "yyyy-MM-dd"));
        return isToday && isCurrentHour;
    }
    return (
        <div
            data-hourid={hour.id}
            className={cn(
                "p-4 grid justify-between",
            )}
            style={{
                background: hour.background!, color: hour.foreground!, fontFamily: "inherit",
                gridTemplateColumns: window.innerWidth > 640 ? "50px 100px 1fr 50px" : "50px 100px 1fr", // Known issue: This won't work if the screen is resized, only on reload
            }}
        >
            <span className="text-right">
                {/* {isActiveHour(hour) && "--> "} */}
                {hour.datetime}
            </span>
            <div className="flex justify-center">
                <EditableHourCode
                    className={"w-8 border-b"}
                    originalText={hour.categoryCode}
                    hour={hour}
                    onSubmit={updateHour}
                    i={i}
                />
            </div>
            <span className="hidden sm:block">
                <EditableHourComment
                    originalText={hour.categoryDesc}
                    hour={hour}
                    onSubmit={updateHour}
                    i={i}
                />
            </span>
            <span className="block sm:hidden">
                <div className="w-full text-left edit-hour-comment"
                    style={{
                        background: hour.background ?? "inherit", color: hour.foreground ?? "inherit", fontFamily: "inherit",
                    }}>
                    {hour.categoryName}
                </div>
            </span>
            <div className="text-right hidden sm:block">
                <ButtonWithTooltip
                    delayDuration={500}
                    tooltip="Edit"
                    size="none"
                    variant="ghost"
                    className="align-middle text-gray-400 hover:bg-active"
                    onClick={() => {
                        console.log("Pushed edit")
                    }}
                >
                    <Pencil className="size-4" />
                </ButtonWithTooltip>
            </div>
        </div>
    );
}