import {
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
  Input,
} from "@repo/shadcn-ui/components";

import { cn } from "@repo/shadcn-ui/lib/utils";
import { Control, FieldPath, FieldValues } from "react-hook-form";
import { useTranslation } from "../../locales/i18n.ts";

type TextFieldProps<TFormValues extends FieldValues> = {
  control: Control<TFormValues>;
  name: FieldPath<TFormValues>;
  label?: string;
  placeholder?: string;
  description?: string;
  disabled?: boolean;
  required?: boolean;
  readOnly?: boolean;
  className?: string;

  icon?: React.ReactNode; // Icono con tamaño: <MailIcon className="h-[18px] w-[18px]" />
  iconPosition?: "left" | "right"; // 'left' por defecto
};

export function TextField<TFormValues extends FieldValues>({
  control,
  name,
  label,
  placeholder,
  description,
  disabled = false,
  required = false,
  readOnly = false,
  className,
  icon,
  iconPosition = "left",
}: TextFieldProps<TFormValues>) {
  const { t } = useTranslation();
  const isDisabled = disabled || readOnly;

  const hasIcon = Boolean(icon);
  const isLeft = iconPosition === "left";
  const inputPadding = hasIcon ? (isLeft ? "pl-10" : "pr-10") : "";

  const { getFieldState } = control;
  const state = getFieldState(name);

  return (
    <FormField
      control={control}
      name={name}
      render={({ field }) => (
        <FormItem className={cn("space-y-0", className)}>
          {label && (
            <div className='flex justify-between items-center'>
              <FormLabel className='m-0'>{label}</FormLabel>
              {required && <span className='text-xs text-destructive'>{t("common.required")}</span>}
            </div>
          )}
          <FormControl>
            <div className={cn("relative")}>
              <Input
                disabled={isDisabled}
                placeholder={placeholder}
                {...field}
                className={cn("placeholder:font-normal placeholder:italic", inputPadding)}
              />

              {hasIcon && (
                <span
                  aria-hidden='true'
                  className={cn(
                    "pointer-events-none absolute top-1/2 -translate-y-1/2",
                    isLeft ? "left-3" : "right-3"
                  )}
                >
                  {icon} {/* El tamaño viene indicado en el icono */}
                </span>
              )}
            </div>
          </FormControl>

          <p className={cn("text-xs text-muted-foreground", !description && "invisible")}>
            {description || "\u00A0"}
          </p>
          <FormMessage />
        </FormItem>
      )}
    />
  );
}