lifetracker/apps/web/components/dashboard/hours/HourMeasurementsDialog.tsx

"use client";
import { useEffect, useState, useRef } from "react";
import { toast } from "@/components/ui/use-toast";
import { api } from "@/lib/trpc";
import { zodResolver } from "@hookform/resolvers/zod";
import { TRPCClientError } from "@trpc/client";
import { useForm } from "react-hook-form";
import { z } from "zod";
import { zMeasurementSchema, ZMetric } from "@lifetracker/shared/types/metrics";
import { ZHour } from "@lifetracker/shared/types/days";

import { Icon } from "@/components/ui/icon";
import { titleCase } from "title-case";
import { Dialog, DialogClose, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
import { X } from "lucide-react";
import { useDecrementCount, useIncrementCount, } from "@lifetracker/shared-react/hooks/measurements";
import { Separator } from "@radix-ui/react-dropdown-menu";

type CreateMeasurementSchema = z.infer<typeof zMeasurementSchema>;

export default function HourMeasurementsDialog({
    hour: initialHour,
    metrics,
    reload,
    children,
}: {
    hour: ZHour,
    metrics: ZMetric[],
    reload: (newHour: ZHour) => void,
    children?: React.ReactNode;
}) {
    const [hour, setHour] = useState(initialHour);
    const [isOpen, onOpenChange] = useState(false);

    const { mutate: increment } = useIncrementCount({
        onSuccess: (res) => {
            const oldMeasurement = hour.measurements.find(m => m.metricId === res.metricId);
            const newHour = {
                ...hour,
                measurements: oldMeasurement ? hour.measurements.map(m => m.metricId === res.metricId ? res : m) : [...hour.measurements, res],
            };
            setHour(newHour);
            reload(newHour);
            console.log("New hour's deets", newHour.measurements);
            toast({
                description: "Measurement added!",
            });
        },
        onError: (error) => {
            toast({
                description: error.message,

            });
        },
    });

    const { mutate: decrement } = useDecrementCount({
        onSuccess: (res, req) => {
            const oldMeasurementIndex = hour.measurements.findIndex(m => m.metricId === req.metricId);
            let newMeasurements;

            if (oldMeasurementIndex !== -1) {
                if (res === undefined) {
                    // Remove the measurement if res is undefined
                    newMeasurements = [
                        ...hour.measurements.slice(0, oldMeasurementIndex),
                        ...hour.measurements.slice(oldMeasurementIndex + 1)
                    ];
                } else {
                    // Update the measurement
                    newMeasurements = [
                        ...hour.measurements.slice(0, oldMeasurementIndex),
                        res,
                        ...hour.measurements.slice(oldMeasurementIndex + 1)
                    ];
                }
            } else {
                // Add the new measurement
                newMeasurements = [...hour.measurements, res];
            }

            const newHour = {
                ...hour,
                measurements: newMeasurements,
            };

            setHour(newHour);
            reload(newHour);
            toast({
                description: res === undefined ? "Measurement removed!" : "Measurement updated!",
            });
        }
    });

    let currentMeasurements = hour.measurements.map(measurement => measurement.metricName);

    // With useEffect, update currentMeasurements when hour changes
    useEffect(() => {
        currentMeasurements = hour.measurements.map(measurement => measurement.metricName);
    }, [hour]);


    return (
        <Dialog open={isOpen} onOpenChange={onOpenChange}>
            <DialogTrigger asChild>{children}</DialogTrigger>
            <DialogContent>
                <DialogHeader>
                    <DialogTitle>Metrics for {hour.date} at {hour.datetime}</DialogTitle>
                </DialogHeader>
                <Separator />
                {hour.measurements && hour.measurements.length > 0 ?
                    (<>
                        <div className="font-bold">Measurements</div>
                        <div className="mx-4 mb-4">
                            {hour.measurements.map(measurement => {
                                const metric = metrics.find(m => m.id === measurement.metricId);
                                return (
                                    <div key={measurement.id} className="flex items-center justify-between">
                                        <div className="gap-4 flex"><Icon name={titleCase(metric.icon)} size={24} />
                                            <div>{metric.name}</div></div>
                                        <div className="flex  gap-4 items-center">
                                            <div className="hover:cursor-pointer" onClick={() => {
                                                decrement({ metricId: metric.id, hourId: hour.id, dayId: hour.dayId });
                                            }} ><Icon name={"Minus"} /></div>
                                            <div>{measurement.value}</div>
                                            <div className="hover:cursor-pointer" onClick={() => {
                                                increment({ metricId: metric.id, hourId: hour.id, dayId: hour.dayId });
                                            }}><Icon name={"Plus"} /></div>
                                        </div>
                                    </div>
                                );
                            })}
                        </div>
                    </>)
                    : <>
                    </>
                }
                <div className="font-bold">Add Measurement</div>
                <div className="grid" style={{ gridTemplateColumns: "repeat(6, 1fr)" }}>
                    {metrics.map(metric => (
                        // If metric.name is in currentMeasurements, don't show it
                        currentMeasurements.includes(metric.name) ? null :
                            <button style={{ aspectRatio: "1/1" }} key={metric.id} className="flex flex-col items-center justify-center hover:opacity-50" onClick={() => {
                                increment({ metricId: metric.id, hourId: hour.id, dayId: hour.dayId });
                                // onOpenChange(false);
                            }}>
                                <Icon name={titleCase(metric.icon)} size={32} />
                                <span className="text-sm">{metric.name}</span>
                            </button>
                    ))}
                </div>
            </DialogContent>
        </Dialog>






        // // Show a dropdown menu with an option for each metric. When the user selects a metric, increment the count for that metric in the hour.
        // // The dropdown should show the metric name and icon.
        // // Reset the dropdown to the default value after the user selects a metric.

        // <Select
        //     className="w-full h-2"
        //     unstyled={true}
        //     isSearchable={false}
        //     placeholder="Add"
        //     options={metrics.map(metric =>
        //         ({ value: metric.id, label: metric.name, icon: metric.icon }))}
        //     onChange={(selectedOption) => incrementCount(selectedOption.value)}
        //     classNames={{
        //         menu: (state) =>
        //             "bg-card px-4 py-2 text-white rounded-md shadow-lg",
        //     }}
        // />

    );
}