Date Picker (BS / Nepali)

1"use client";
2 
3import { useState, useRef, useEffect, useMemo, useCallback } from "react";
4import { Calendar } from "lucide-react";
5import { cn } from "@/lib/utils";
6import {
7  Select,
8  SelectTrigger,
9  SelectValue,
10  SelectContent,
11  SelectItem,
12} from "@/components/ui/select";
13import {
14  adToBs,
15  bsToAd,
16  bsDaysInMonth,
17  bsWeekdayOffset,
18  bsMonthName,
19  formatBsDate,
20} from "@/lib/nepali";
21 
22interface DatePickerProps {
23  value: string; // AD 'YYYY-MM-DD'
24  onChange: (value: string) => void;
25  placeholder?: string;
26  className?: string;
27  id?: string;
28  name?: string;
29  required?: boolean;
30}
31 
32const WEEKDAYS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
33 
34export function DatePicker({
35  value,
36  onChange,
37  placeholder = "Select date",
38  className,
39  id,
40  name,
41  required,
42}: DatePickerProps) {
43  const [open, setOpen] = useState(false);
44  const wrapperRef = useRef<HTMLDivElement>(null);
45  const buttonRef = useRef<HTMLButtonElement>(null);
46  const [dropdownPos, setDropdownPos] = useState<{
47    top: number;
48    left: number;
49  } | null>(null);
50 
51  const selected = adToBs(value);
52 
53  const [view, setView] = useState<{ year: number; month: number }>(() => {
54    const bs = adToBs(value) ?? adToBs(new Date().toISOString().slice(0, 10));
55    return { year: bs?.year ?? 2080, month: bs?.month ?? 1 };
56  });
57 
58  const updatePosition = useCallback(() => {
59    if (buttonRef.current) {
60      const rect = buttonRef.current.getBoundingClientRect();
61      setDropdownPos({ top: rect.bottom + 6, left: rect.left });
62    }
63  }, []);
64 
65  useEffect(() => {
66    function handleClick(e: MouseEvent) {
67      if (
68        wrapperRef.current &&
69        !wrapperRef.current.contains(e.target as Node)
70      ) {
71        setOpen(false);
72      }
73    }
74    document.addEventListener("mousedown", handleClick);
75    return () => document.removeEventListener("mousedown", handleClick);
76  }, []);
77 
78  const todayBs = useMemo(
79    () => adToBs(new Date().toISOString().slice(0, 10)),
80    [],
81  );
82 
83  const daysInMonth = bsDaysInMonth(view.year, view.month);
84  const startOffset = bsWeekdayOffset(view.year, view.month);
85  const cells: (number | null)[] = [
86    ...Array(startOffset).fill(null),
87    ...Array.from({ length: daysInMonth }, (_, i) => i + 1),
88  ];
89 
90  const yearRange = useMemo(() => {
91    const base = todayBs?.year ?? 2080;
92    const start = Math.max(1975, base - 15);
93    const end = base + 5;
94    return Array.from({ length: end - start + 1 }, (_, i) => start + i);
95  }, [todayBs]);
96 
97// … truncated