"use client";
import { ReactNode, useState } from "react";
import { cn } from "../helper/cn";

export const PenaltyDropdown = ({
	onClick,
	btnClassName,
	showDatePicker,
	btnTip,
	btnName,
	Icon,
}: {
	onClick: (data: { reason: string; until: Date | null }) => void;
	showDatePicker?: boolean;
	btnClassName?: string;
	btnName: string;
	btnTip?: string;
	Icon: ReactNode;
}) => {
	const [reason, setReason] = useState("");
	const [until, setUntil] = useState<string>("default");
	return (
		<details className="dropdown dropdown-left dropdown-center">
			<summary className={cn("btn btn-xs btn-square btn-soft", btnClassName)}>{Icon}</summary>
			<div
				className="dropdown-content bg-base-100 rounded-box z-1 p-4 shadow-sm space-y-4 shadow-md"
				style={{ minWidth: "500px", right: "40px" }}
			>
				<h2 className="text-xl font-blod text-center">{btnName}</h2>
				<textarea
					value={reason}
					onChange={(e) => setReason(e.target.value)}
					className="input w-full"
					placeholder="Begründung"
					style={{ minHeight: "100px" }}
				/>
				{showDatePicker && (
					<select
						className="select w-full select-bordered"
						value={until}
						onChange={(e) => setUntil(e.target.value)}
					>
						<option value="default" disabled>
							Keine
						</option>
						<option value="1h">1 Stunde</option>
						<option value="6h">6 Stunden</option>
						<option value="12h">12 Stunden</option>
						<option value="24h">24 Stunden</option>
						<option value="72h">72 Stunden</option>
						<option value="1w">1 Woche</option>
						<option value="2w">2 Wochen</option>
						<option value="1m">1 Monat</option>
						<option value="3m">3 Monate</option>
						<option value="6m">6 Monate</option>
						<option value="1y">1 Jahr</option>
					</select>
				)}
				<button
					className={cn("btn w-full btn-square btn-soft tooltip tooltip-bottom", btnClassName)}
					data-tip={btnTip}
					onClick={() => {
						let untilDate: Date | null = null;
						if (until !== "default") {
							const now = new Date();
							switch (until) {
								case "1h":
									untilDate = new Date(now.getTime() + 1 * 60 * 60 * 1000);
									break;
								case "6h":
									untilDate = new Date(now.getTime() + 6 * 60 * 60 * 1000);
									break;
								case "12h":
									untilDate = new Date(now.getTime() + 12 * 60 * 60 * 1000);
									break;
								case "24h":
									untilDate = new Date(now.getTime() + 24 * 60 * 60 * 1000);
									break;
								case "72h":
									untilDate = new Date(now.getTime() + 72 * 60 * 60 * 1000);
									break;
								case "1w":
									untilDate = new Date(now.getTime() + 7 * 24 * 60 * 60 * 1000);
									break;
								case "2w":
									untilDate = new Date(now.getTime() + 14 * 24 * 60 * 60 * 1000);
									break;
								case "1m":
									untilDate = new Date(now.setMonth(now.getMonth() + 1));
									break;
								case "3m":
									untilDate = new Date(now.setMonth(now.getMonth() + 3));
									break;
								case "6m":
									untilDate = new Date(now.setMonth(now.getMonth() + 6));
									break;
								case "1y":
									untilDate = new Date(now.setFullYear(now.getFullYear() + 1));
									break;
								default:
									untilDate = null;
							}
						}
						onClick({ reason, until: untilDate });
					}}
				>
					{Icon} {btnName}
				</button>
			</div>
		</details>
	);
};