"use client";

import * as React from "react";
import { Label } from "@/components/ui/label";
import { SelectApp, type SelectAppOption } from "./select-app";

interface FormSelectProps {
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  form: any;
  name: string;
  label: string;
  options: SelectAppOption[];
  placeholder?: string;
  searchable?: boolean;
  searchPlaceholder?: string;
  required?: boolean;
  requiredMessage?: string;
  disabled?: boolean;
  className?: string;
}

export const FormSelect = React.forwardRef<HTMLButtonElement, FormSelectProps>(
  function FormSelect(
    {
      form,
      name,
      label,
      options,
      placeholder = "Pilih...",
      searchable,
      searchPlaceholder,
      required,
      requiredMessage,
      disabled,
      className,
    },
    ref
  ) {
    const validators = required
      ? {
          onSubmit: ({ value }: { value: unknown }) => {
            if (!value) return requiredMessage || `${label} wajib diisi`;
            return undefined;
          },
        }
      : undefined;

    return (
      <form.Field name={name} validators={validators}>
        {(field: any) => (
          <div className={className || "space-y-2"}>
            <Label htmlFor={name}>{label}</Label>
            <SelectApp
              ref={ref}
              value={field.state.value ?? ""}
              onValueChange={(v) => field.handleChange(v)}
              options={options}
              placeholder={placeholder}
              searchable={searchable}
              searchPlaceholder={searchPlaceholder}
              disabled={disabled}
              invalid={field.state.meta.errors.length > 0}
            />
            {field.state.meta.errors.length > 0 && (
              <p className="text-xs text-destructive">
                {field.state.meta.errors[0]}
              </p>
            )}
          </div>
        )}
      </form.Field>
    );
  }
);

export type { SelectAppOption as SelectOption };