"use client"

import * as React from "react";
import { format } from "date-fns";

import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { Calendar } from "@/components/ui/calendar";
import {
	Popover,
	PopoverContent,
	PopoverTrigger,
} from "@/components/ui/popover";
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";

interface DateTimePickerProps {
	onDateSelectChange: (selectedDate: Date | undefined) => void;
}

export function DateTimePicker({
	onDateSelectChange
}: DateTimePickerProps) {
	const [date, setDate] = React.useState<Date>();
	const [isOpen, setIsOpen] = React.useState(false); 
	// TODO : this is buggy as hell

	const hours = Array.from({ length: 24 }, (_, i) => i);
	const handleDateSelect = (selectedDate: Date | undefined) => {
		if (selectedDate) {
			setDate(selectedDate);
			onDateSelectChange(selectedDate)
		}
	};

	const handleTimeChange = (
		type: "hour" | "minute",
		value: string
	) => {
		if (date) {
			const newDate = new Date(date);
			if (type === "hour") {
				newDate.setHours(parseInt(value));
			} else if (type === "minute") {
				newDate.setMinutes(parseInt(value));
			}
			setDate(newDate);
		}
	};

	return (
		<Popover open={isOpen} onOpenChange={setIsOpen}>
			<PopoverTrigger asChild>
				<Button
					variant="outline"
					className={cn(
						"w-fit justify-start text-left font-normal",
						!date && "text-muted-foreground"
					)}
				>
					{/*<CalendarIcon className="mr-2 h-4 w-4" />*/}
					<p className="w-full">  {date ? (
						format(date, "MM/dd/yyyy hh:mm")
					) : (
						<span>MM/DD/YYYY hh:mm</span>
					)} </p>
				</Button>
			</PopoverTrigger>
			<PopoverContent className="w-auto p-0">
				<div className="sm:flex">
					<Calendar
						mode="single"
						selected={date}
						onSelect={handleDateSelect}
						initialFocus
					/>
					<div className="flex flex-col sm:flex-row sm:h-[300px] divide-y sm:divide-y-0 sm:divide-x">
						<ScrollArea className="w-64 sm:w-auto">
							<div className="flex sm:flex-col p-2">
								{hours.reverse().map((hour) => (
									<Button
										key={hour}
										size="icon"
										variant={date && date.getHours() === hour ? "default" : "ghost"}
										className="sm:w-full shrink-0 aspect-square"
										onClick={() => handleTimeChange("hour", hour.toString())}
									>
										{hour}
									</Button>
								))}
							</div>
							<ScrollBar orientation="horizontal" className="sm:hidden" />
						</ScrollArea>
						<ScrollArea className="w-64 sm:w-auto">
							<div className="flex sm:flex-col p-2">
								{Array.from({ length: 12 }, (_, i) => i * 5).map((minute) => (
									<Button
										key={minute}
										size="icon"
										variant={date && date.getMinutes() === minute ? "default" : "ghost"}
										className="sm:w-full shrink-0 aspect-square"
										onClick={() => handleTimeChange("minute", minute.toString())}
									>
										{minute.toString().padStart(2, '0')}
									</Button>
								))}
							</div>
							<ScrollBar orientation="horizontal" className="sm:hidden" />
						</ScrollArea>
					</div>
				</div>
			</PopoverContent>
		</Popover>
	);
}