"use client";

import { Controller, type Control, type FieldPath, type FieldValues } from "react-hook-form";

import { DatePicker } from "@/components/date-range-picker";
import { formDatePickerClass, formFieldClass } from "@/components/form/common/form-layout";
import { Field, FieldError, FieldLabel } from "@/components/ui/field";
import { cn } from "@/lib/utils";

type DateFieldProps<T extends FieldValues> = {
  control: Control<T>;
  name: FieldPath<T>;
  label: string;
  placeholder?: string;
  className?: string;
  readOnly?: boolean;
};

export function DateField<T extends FieldValues>({
  control,
  name,
  label,
  placeholder = "Select date",
  className,
  readOnly = false,
}: DateFieldProps<T>) {
  return (
    <Controller
      control={control}
      name={name}
      render={({ field, fieldState }) => (
        <Field className={cn(formFieldClass, className)} data-invalid={!!fieldState.error}>
          <FieldLabel htmlFor={String(name)}>{label}</FieldLabel>
          <DatePicker
            id={String(name)}
            value={field.value ?? ""}
            placeholder={placeholder}
            align="start"
            aria-invalid={!!fieldState.error}
            className={cn(formDatePickerClass, readOnly && "pointer-events-none bg-muted/40")}
            onChange={readOnly ? undefined : field.onChange}
          />
          {fieldState.error ? <FieldError errors={[fieldState.error]} /> : null}
        </Field>
      )}
    />
  );
}