import { Label, TextInput } from "flowbite-react";
import { FC, useId } from "react";
import { useFormContext } from "react-hook-form";

type Props = {
  labelText?: string;
  name: string;
  inputType?: string;
  errors?: any;
  labelCls?: string;
  placeholder?: string;
  mandatory?: boolean;
  readonly?: boolean;
  size?: string;
  addon?: any;
  disabled?: boolean;
};

export const InputField: FC<Props> = ({
  labelText,
  name,
  inputType = "text",
  errors,
  labelCls,
  placeholder = "",
  mandatory = false,
  readonly = false,
  size = "md",
  addon = "",
  disabled = false,
  ...props
}) => {
  const { register } = useFormContext();
  const id = useId();
  const dynamicFieldError = (name: string) => {
    if (name.includes(".")) {
      let field = name.split(".");
      return errors?.[field[0]]?.[field[1]]?.[field[2]]?.["message"];
    }
  };
  return (
    <>
      <div className="w-full">
        <div className={`mb-2 block ${labelCls}`}>
          <Label htmlFor={id} value={labelText} />
          {mandatory && <span className="text-red-500"> *</span>}
        </div>
        <TextInput
          readOnly={readonly}
          disabled={disabled}
          className={`input-field ${readonly ? "readonly-input dark:!bg-gray-900" : ""}`}
          sizing={size}
          id={id}
          type={inputType}
          placeholder={placeholder}
          {...register(name, {
            valueAsNumber: inputType === "number" ? true : false,
          })}
          addon={addon}
          {...props}
          helperText={
            errors && (
              <span className="text-red-600">
                {errors?.[name]?.message && errors?.[name]?.message}
                {name?.includes(".") && dynamicFieldError(name)}
              </span>
            )
          }
        />
      </div>
    </>
  );
};