// src/routes/traffic/Grid.tsx
import { format } from "date-fns";
import React from "react";
import { ScrollArea, ScrollBar } from "../../../components/ui/scroll-area";

export const days = Array.from(
	{ length: 5 },
	(_, i) => new Date(Date.now() + i * 24 * 60 * 60 * 1000),
);

// the layout of the hours
const hoursBefore = 3;
const totalHours = 24;

// get the current hour
const currentHour = new Date().getHours();
const startHour = (currentHour - hoursBefore + 24) % 24;

// generate the hours array
const hours = Array.from(
	{ length: totalHours },
	(_, i) => (startHour + i) % 24,
);

export function Grid({
	days,
	children,
}: {
	days: any;
	children?: (day: Date, hour: number) => React.ReactNode;
}) {
	return (
		<ScrollArea className={`h-[80vh]`}>
			<div
				className="grid"
				style={{
					display: "grid",
					gridTemplateColumns: `100px repeat(${days.length}, 350px)`, // each day = 180 px wide
					//minWidth: `${100 + days.length * 350}px`,
				}}
			>
				{/* Empty top-left corner */}
				<div className="sticky top-0 left-0 bg-background z-30"></div>

				{/* Date headers */}
				{days.map((d: any) => (
					<div
						key={d.toDateString()}
						className="sticky top-0 bg-background z-20 p-2 font-semibold text-center"
					>
						{format(d, "EEEE M/d/yyyy")}
					</div>
				))}

				{hours.map((hour) => (
					<React.Fragment key={hour}>
						<div className="border p-1 text-right text-sm">{hour}:00</div>
						{days.map((d: any) => (
							<div key={`${d}-${hour}`} className="relative border h-20">
								{children && children(d, hour)}
							</div>
						))}
					</React.Fragment>
				))}
			</div>
			<ScrollBar orientation="horizontal" />
		</ScrollArea>
	);
}