import React from "react";
import { FormInputField } from "@arcteryx/components-form";
import { useTranslation } from "react-i18next";

const FsInputField = ({ id, name, type, errorType, label, required, setValue, errors, watch, register }) => {
  const { t } = useTranslation("components-formstack");
  const [currentValue] = watch([name]);
  const error = errors[name];
  const valid = error === undefined && currentValue;
  const errorMsg = {
    firstname: t("Please enter your first name."),
    lastname: t("Please enter your last name."),
    city: t("Please enter your city."),
    address: t("Please enter your address."),
  };

  return (
    <FormInputField
      id={id}
      type={type}
      label={label}
      required={required}
      setValue={setValue}
      error={error}
      valid={valid}
      {...register(name, { required: (required && errorMsg[errorType]) || (required && t("This field is required.")) })}
    />
  );
};

export default FsInputField;