import { useEffect, useRef } from "react";
import { Input, type InputProps, type InputRef } from "tdesign-react";

export interface AccessibleInputProps extends InputProps {
  inputAriaLabel?: string;
  inputAriaInvalid?: boolean;
  inputAriaDescribedby?: string;
}

/**
 * TDesign places unknown aria props on its wrapper. This adapter mirrors the
 * important field attributes onto the native input so labels, errors and
 * keyboard tooling target the actual editable control.
 */
export default function AccessibleInput({ inputAriaLabel, inputAriaInvalid, inputAriaDescribedby, ...props }: AccessibleInputProps) {
  const ref = useRef<InputRef>(null);
  useEffect(() => {
    const input = ref.current?.inputElement;
    if (!input) return;
    if (inputAriaLabel) input.setAttribute("aria-label", inputAriaLabel);
    else input.removeAttribute("aria-label");
    if (inputAriaInvalid) input.setAttribute("aria-invalid", "true");
    else input.removeAttribute("aria-invalid");
    if (inputAriaDescribedby) input.setAttribute("aria-describedby", inputAriaDescribedby);
    else input.removeAttribute("aria-describedby");
  }, [inputAriaDescribedby, inputAriaInvalid, inputAriaLabel]);
  return <Input {...props} ref={ref} />;
}