"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 } 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 } from "drizzle-orm";

export default function EditableHour({
    hour: initialHour,
    i,
    className,
}: {
    hour: ZHour,
    i: number,
    className?: string;
}) {
    const router = useRouter();
    const currentPath = usePathname();
    const [hour, setHour] = useState(initialHour);
    const { mutate: updateHour, isPending } = useUpdateHour({
        onSuccess: (res, req, meta) => {
            const { categoryCode: oldCode, comment: oldComment } = hour;
            const newHour = {
                categoryCode: req.code,
                comment: oldComment,
                ...res,
            };
            console.log(res);
            setHour(newHour);
            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();
        return (hour.date == format(now, "yyyy-MM-dd")) && (((now.getHours()) + (now.getTimezoneOffset() / 60) - (parseInt(hour.time))) == 0)
    }
    return (
        <div
            hourid={hour.id}
            className={cn(
                "p-4 grid justify-between",
            )}
            style={{
                background: hour.background, color: hour.foreground, fontFamily: "inherit",
                gridTemplateColumns: "100px 100px 1fr 200px"
            }}
        >
            <span className="text-right">
                {isActiveHour(hour) && "--> "}
                {hour.datetime}
            </span>
            <div className="flex justify-center">
                <EditableHourCode
                    originalText={hour.categoryCode}
                    hour={hour}
                    onSubmit={updateHour}
                    i={i}
                />
            </div>
            <span>
                <EditableHourComment
                    originalText={hour.categoryDesc}
                    hour={hour}
                    onSubmit={updateHour}
                    i={i}
                />
            </span>
            <div className="text-right">
                <ButtonWithTooltip
                    delayDuration={500}
                    tooltip="Add Comment"
                    size="none"
                    variant="ghost"
                    className="align-middle text-gray-400"
                    onClick={() => {
                        console.log("Pushed edit")
                    }}
                >
                    <MessageCircle className="size-4" />
                </ButtonWithTooltip>
            </div>
        </div>
    );
}