"use client";

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

import { DatePicker } from "@/components/date-range-picker";
import { formDatePickerClass } from "@/components/form/common/form-layout";
import { FormField } from "@/components/form/form-field";
import { cn } from "@/lib/utils";

type MasterTableDateFieldProps<T extends FieldValues> = {
  control: Control<T>;
  name: FieldPath<T>;
  label: string;
  htmlFor?: string;
  required?: boolean;
  description?: string;
  placeholder?: string;
  className?: string;
};

/**
 * Master Table form date field using the same DatePicker as Stock Create.
 */
export function MasterTableDateField<T extends FieldValues>({
  control,
  name,
  label,
  htmlFor,
  required,
  description,
  placeholder = "Select date",
  className,
}: MasterTableDateFieldProps<T>) {
  const id = htmlFor ?? String(name);

  return (
    <Controller
      control={control}
      name={name}
      render={({ field, fieldState }) => (
        <FormField
          label={label}
          htmlFor={id}
          required={required}
          description={description}
          error={fieldState.error}
        >
          <DatePicker
            id={id}
            value={field.value ?? ""}
            placeholder={placeholder}
            align="start"
            aria-invalid={!!fieldState.error}
            className={cn(formDatePickerClass, "h-9", className)}
            onChange={field.onChange}
          />
        </FormField>
      )}
    />
  );
}