import { ZHour } from "@lifetracker/shared/types/days";
import React from "react";
import spacetime from "spacetime";
import { api } from "@/server/api/client";
import { EditableHourCode } from "@/components/dashboard/hours/EditableHourCode";
import { useUpdateHour } from "@lifetracker/shared-react/hooks/days";
import { useToast } from "@/components/ui/use-toast";
import { getHourFromTime } from "@lifetracker/shared/utils/hours";
import MonthView from "@/components/dashboard/timelines/MonthView";

async function fetchDays(view: string, dateQuery: string) {
    const timezone = await api.users.getTimezone();

    const today = spacetime(dateQuery ?? "today");
    const firstDay = today.subtract(3, "day").last("week").startOf("week");

    const days = [];
    for (let i = 0; i < 20; i++) {
        const dayDate = firstDay.add(i, "day").format("iso-short");
        // console.log(dayDate);
        const dayRes = await api.days.get({
            dateQuery: dayDate,
            timezone: timezone,
        });
        days.push(dayRes);
    }

    return days;
}

export default async function TimelinePage({ params }: { params: { view: string, dateQuery: string }; }) {
    const { view = "month", dateQuery } = await params;
    const days = await fetchDays(view, dateQuery);

    return (
        <>
            <MonthView days={days} />
        </>
    );
}