"use client";

import { usePathname, useRouter } from "next/navigation";
import { toast } from "@/components/ui/use-toast";
import { cn } from "@/lib/utils";

import { useUpdateDay } from "@lifetracker/shared-react/hooks/days";
import { EditableText } from "../EditableText";
import { format } from "date-fns";

export default function EditableDayComment({
    day,
    className,
}: {
    day: { id: string; date: string, comment: string };
    className?: string;
}) {
    const router = useRouter();
    const currentPath = usePathname();
    const { mutate: updateDay, isPending } = useUpdateDay({
        onSuccess: () => {
            toast({
                description: "Day updated!",
            });
            if (currentPath.includes("dashboard")) {
                router.refresh();
            }
        },
    });
    return (
        <EditableText
            viewClassName={className}
            editClassName={cn("p-2", className)}
            originalText={day.comment ?? "No Comment"}
            onSave={(newComment) => {
                if (!newComment) { return }
                updateDay(
                    {
                        dateQuery: format(day.date, "yyyy-MM-dd"),
                        comment: newComment,
                    },
                    {
                        onError: (e) => {
                            console.log(e);
                            toast({
                                description: e.message,
                                variant: "destructive",
                            });
                        },
                    },
                );
            }}
            isSaving={isPending}
        />
    );
}