"use client";
import LoadingSpinner from "@/components/ui/spinner";
import { api } from "@/lib/trpc";

export default function AnalyticsView() {

    const { data: metrics } = api.metrics.list.useQuery();

    const drugsList = metrics?.filter((metric) => metric.type === "drug");
    const timeSinceDrug = drugsList?.map((drug) => {
        console.log(api.measurements.timeSinceLastMeasurement.useQuery({ metricId: drug.id! }));
        return drug.name;
    });
    console.log(timeSinceDrug);

    return (
        <div className="flex gap-4">
            <h1 className="font-bold text-xl">Drugs</h1>
            <div>
                {
                    !drugsList ? <LoadingSpinner /> :
                        <ul>
                            {drugsList.map((drug) => (
                                <li key={drug.id}>
                                    {drug.name}:
                                </li>
                            ))}
                        </ul>
                }
            </div>
        </div>
    );
}