rhl-lieferscheine/components/search/form/SearchDateRangePicker.jsx

"use client";

import * as React from "react";
import dynamic from "next/dynamic";
import { Calendar as CalendarIcon, X } from "lucide-react";

import { cn } from "@/lib/utils";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
	Popover,
	PopoverContent,
	PopoverTrigger,
} from "@/components/ui/popover";
import { Skeleton } from "@/components/ui/skeleton";

import { useSearchDateRangePicker } from "@/lib/frontend/search/useSearchDateRangePicker";

function CalendarLoading() {
	return (
		<div className="space-y-3">
			<div className="flex gap-4">
				<Skeleton className="h-72 w-72" />
				<Skeleton className="h-72 w-72" />
			</div>
			<p className="text-xs text-muted-foreground text-center">
				Kalender lädt…
			</p>
		</div>
	);
}

const Calendar = dynamic(
	() => import("@/components/ui/calendar").then((m) => m.Calendar),
	{
		ssr: false,
		loading: CalendarLoading,
	},
);

export default function SearchDateRangePicker({
	from,
	to,
	onDateRangeChange,
	isSubmitting,
	className,
}) {
	const {
		disabled,
		open,
		setOpen,
		activeField,
		setActiveField,
		fromRef,
		toRef,
		month,
		setMonth,
		summary,
		fromDisplay,
		toDisplay,
		presetsRow1,
		presetsRow2,
		calendarKey,
		calendarSelected,
		calendarModifiers,
		calendarModifiersClassNames,
		isRangeInvalid,
		handlePickDay,
		handleClearFrom,
		handleClearTo,
		handleReset,
		applyPreset,
	} = useSearchDateRangePicker({
		from,
		to,
		onDateRangeChange,
		isSubmitting,
	});

	const fromInputId = React.useId();
	const toInputId = React.useId();

	const activeInputClass =
		"border-blue-600 bg-blue-50 dark:border-blue-900 dark:bg-blue-950";

	return (
		<div className={cn("grid gap-2", className)}>
			<Label>Zeitraum</Label>

			<Popover open={open} onOpenChange={setOpen}>
				<PopoverTrigger asChild>
					<Button
						type="button"
						variant="outline"
						disabled={disabled}
						className={cn(
							"w-[240px] justify-between font-normal",
							!from && !to ? "text-muted-foreground" : "",
						)}
						title="Zeitraum auswählen"
					>
						<span className="truncate">{summary}</span>
						<CalendarIcon className="ml-2 h-4 w-4 opacity-70" />
					</Button>
				</PopoverTrigger>

				<PopoverContent align="start" className="w-fit p-0">
					<div className="w-fit space-y-4 p-4">
						<div className="grid grid-cols-2 gap-4">
							<div className="space-y-1">
								<Label htmlFor={fromInputId}>Von</Label>
								<div className="relative">
									<Input
										id={fromInputId}
										ref={fromRef}
										readOnly
										disabled={disabled}
										value={fromDisplay}
										placeholder="TT.MM.JJJJ"
										className={cn(
											"pr-8",
											activeField === "from" ? activeInputClass : "",
										)}
										onFocus={() => setActiveField("from")}
										onClick={() => setActiveField("from")}
									/>
									{from ? (
										<button
											type="button"
											className="absolute right-2 top-1/2 -translate-y-1/2 rounded-sm p-1 opacity-70 hover:opacity-100"
											onClick={handleClearFrom}
											aria-label="Startdatum löschen"
											title="Startdatum löschen"
										>
											<X className="h-4 w-4" />
										</button>
									) : null}
								</div>
							</div>

							<div className="space-y-1">
								<Label htmlFor={toInputId}>Bis</Label>
								<div className="relative">
									<Input
										id={toInputId}
										ref={toRef}
										readOnly
										disabled={disabled}
										value={toDisplay}
										placeholder="TT.MM.JJJJ"
										className={cn(
											"pr-8",
											activeField === "to" ? activeInputClass : "",
										)}
										onFocus={() => setActiveField("to")}
										onClick={() => setActiveField("to")}
									/>
									{to ? (
										<button
											type="button"
											className="absolute right-2 top-1/2 -translate-y-1/2 rounded-sm p-1 opacity-70 hover:opacity-100"
											onClick={handleClearTo}
											aria-label="Enddatum löschen"
											title="Enddatum löschen"
										>
											<X className="h-4 w-4" />
										</button>
									) : null}
								</div>
							</div>
						</div>

						<Calendar
							key={calendarKey}
							mode="range"
							numberOfMonths={2}
							captionLayout="dropdown"
							month={month}
							onMonthChange={setMonth}
							selected={calendarSelected}
							modifiers={calendarModifiers}
							modifiersClassNames={calendarModifiersClassNames}
							onDayClick={handlePickDay}
						/>

						{isRangeInvalid ? (
							<p className="text-xs text-destructive text-center">
								Das Startdatum darf nicht nach dem Enddatum liegen.
							</p>
						) : null}

						<div className="space-y-2">
							<div className="text-sm text-muted-foreground">Schnellwahl</div>

							<div className="flex flex-wrap gap-2">
								{presetsRow1.map((p) => (
									<Badge
										key={p.key}
										asChild
										className={[
											"bg-white text-black border-border",
											"hover:bg-white/90",
											"dark:bg-white dark:text-black",
										].join(" ")}
									>
										<button
											type="button"
											className="cursor-pointer select-none disabled:opacity-60"
											disabled={disabled}
											onClick={() => applyPreset(p)}
											title={p.label}
										>
											{p.label}
										</button>
									</Badge>
								))}
							</div>

							<div className="flex flex-wrap gap-2">
								{presetsRow2.map((p) => (
									<Badge key={p.key} asChild>
										<button
											type="button"
											className="cursor-pointer select-none disabled:opacity-60"
											disabled={disabled}
											onClick={() => applyPreset(p)}
											title={p.label}
										>
											{p.label}
										</button>
									</Badge>
								))}
							</div>
						</div>

						<div className="flex justify-end">
							<Button
								type="button"
								variant="outline"
								disabled={disabled}
								onClick={handleReset}
							>
								Zurücksetzen
							</Button>
						</div>

						<p className="text-xs text-muted-foreground text-center">
							Tipp: Für einen einzelnen Tag setzen Sie <b>Von</b> und <b>Bis</b>{" "}
							auf dasselbe Datum.
						</p>
					</div>
				</PopoverContent>
			</Popover>
		</div>
	);
}