"use client";
import { redirect } from "next/navigation";
import { Separator } from "@/components/ui/separator";
import { ZDay, ZHour } from "@lifetracker/shared/types/days";
import EditableDayComment from "./EditableDayComment";
import { MoodStars } from "./MoodStars";
import Link from "next/link";
import { cn } from "@/lib/utils";
import { ArrowLeftSquare, ArrowRightSquare } from "lucide-react";
import spacetime from "spacetime";
import EditableHour from "@/components/dashboard/hours/EditableHour";
import { DayMetrics } from "./DayMetrics";
import { api } from "@/lib/trpc";
import LoadingSpinner from "@/components/ui/spinner";
export default function DayView({
    day,
}: {
    day: ZDay;
}) {

    const prevDay = spacetime(day.date).subtract(1, "day").format("iso-short");
    const nextDay = spacetime(day.date).add(1, "day").format("iso-short");

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

    const groupConsecutiveHours = (day: ZDay) => {
        const result = [];
        let currentGroup: ZHour[] = [];

        for (const hour of day.hours) {
            if (hour.categoryCode === null) {
                if (currentGroup.length > 0) {
                    result.push(currentGroup);
                    currentGroup = [];
                }

                result.push([hour]);

                continue;
            }

            if (currentGroup.length === 0 || hour.categoryCode === currentGroup[currentGroup.length - 1].categoryCode) {
                currentGroup.push(hour);
            } else {
                result.push(currentGroup);
                currentGroup = [hour];
            }
        }

        if (currentGroup.length > 0) {
            result.push(currentGroup);
        }

        return result;
    };

    const consecutiveHours = groupConsecutiveHours(day);


    return (
        <div className="flex flex-col gap-3">

            <div className="flex justify-between pr-4 flex-col gap-4 md:flex-row">
                <div className="flex">
                    <Link
                        href={`/dashboard/day/${prevDay}`}
                        className={cn(
                            "flex-0 items-center rounded-[inherit] px-3 py-2 text-gray-400 hover:text-primary/90",
                        )}
                    >
                        <div className="flex w-full justify-between">
                            <ArrowLeftSquare size={18} />
                        </div>
                    </Link>
                    <span className="text-2xl flex-1 hidden lg:block">
                        {spacetime(day.date).format("{day}, {month} {date}, {year}")}
                    </span>
                    <span className="text-2xl flex-1 lg:hidden block text-center">
                        {spacetime(day.date).format("{day-short}, {month-short} {date}, {year}")}
                    </span>
                    <Link
                        href={`/dashboard/day/${nextDay}`}
                        className={cn(
                            "flex-0 items-center rounded-[inherit] px-3 py-2 text-gray-400 hover:text-primary/90",
                        )}
                    >
                        <div className="flex w-full justify-between">
                            <ArrowRightSquare size={18} />
                        </div>
                    </Link>
                </div>
                <div className="flex justify-center">
                    <MoodStars
                        day={day}
                    />
                </div>
            </div>

            <Separator />
            <div className="flex justify-between pr-4 flex-col gap-4 md:flex-row">
                <div className="pl-4">
                    <EditableDayComment day={day}
                        className="text-xl"
                    />
                </div>
                <div className="pl-4">
                    <DayMetrics day={day} />
                </div>
            </div>
            <Separator />

            {day && userMetrics ?
                <ul>
                    {/* {consecutiveHours.map((group, i) => (
                    group.map((hour, j) => (
                        j == 0 ? (
                            <li key={hour.time} id={"hour-" + i.toString()}>
                                <EditableHour hour={hour} i={i} j={j} hourGroup={group} metrics={userMetrics} />
                            </li>) : (
                            ""
                        )

                    ))
                ))} */}
                    {
                        day.hours.map((hour, i) => (
                            <li key={hour.time} id={"hour-" + i.toString()}>
                                <EditableHour hour={hour} i={i} j={0} hourGroup={[]} metrics={userMetrics} />
                            </li>)
                        )


                    }
                </ul>
                : <LoadingSpinner />}

        </div>
    );
}