"use client";

import DatePicker from "react-datepicker";
import { cn } from "@/lib/utils";

type DatePickerInputProps = {
  id?: string;
  value: string;
  onValueChange: (value: string) => void;
  minDate?: Date;
  maxDate?: Date;
  required?: boolean;
  disabled?: boolean;
  placeholderText?: string;
  className?: string;
  wrapperClassName?: string;
  popperClassName?: string;
  calendarClassName?: string;
};

export function formatDateForApi(date: Date | null) {
  if (!date) {
    return "";
  }

  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(
    2,
    "0",
  )}-${String(date.getDate()).padStart(2, "0")}`;
}

export function parseApiDate(value: string) {
  if (!value) {
    return null;
  }

  const normalizedValue = value.includes("T") ? value.split("T")[0] : value;
  const [year, month, day] = normalizedValue.split("-").map(Number);

  if (!year || !month || !day) {
    return null;
  }

  return new Date(year, month - 1, day);
}

export function DatePickerInput({
  id,
  value,
  onValueChange,
  minDate,
  maxDate,
  required,
  disabled,
  placeholderText = "DD/MM/YYYY",
  className,
  wrapperClassName,
  popperClassName,
  calendarClassName,
}: DatePickerInputProps) {
  return (
    <DatePicker
      id={id}
      selected={parseApiDate(value)}
      onChange={(date: Date | null) => onValueChange(formatDateForApi(date))}
      minDate={minDate}
      maxDate={maxDate}
      dateFormat="dd/MM/yyyy"
      placeholderText={placeholderText}
      showMonthDropdown
      showYearDropdown
      dropdownMode="select"
      required={required}
      disabled={disabled}
      wrapperClassName={cn("w-full", wrapperClassName)}
      popperClassName={cn("id-card-date-picker-popper", popperClassName)}
      calendarClassName={cn("id-card-date-picker", calendarClassName)}
      className={cn(
        "h-12 w-full rounded-xl border border-[var(--theme-border)] bg-white px-3 text-sm font-medium shadow-sm outline-none transition-colors placeholder:text-muted-foreground focus-visible:border-[var(--theme-primary)] focus-visible:ring-2 focus-visible:ring-[var(--theme-primary)]/20",
        className,
      )}
    />
  );
}