import React from "react";
import { useRouter } from "next/router";
import fieldLookup from "../../../data/crmfieldlookuptranslations.json";
import { getFieldTranslation } from "../helpers/translationHelpers";

export const RenderTextfield = ({
    id,
    className,
    rows,
    datafieldname,
    name,
    label,
    input,
    errorMsg,
    meta: { touched, error },
    ...custom
}) => {
    const router = useRouter();
    const { locale } = router;
    const { appealtypes } = router.query;

    const translatedLabel = getFieldTranslation({
        label,
        locale,
        appealtypes,
        fieldLookup
    });

    return (
        <>
            <div
                className={
                    touched && error
                        ? "govuk-form-group govuk-form-group--error"
                        : "govuk-form-group "
                }
            >
                <label className="govuk-label " htmlFor={id} id={id + "_label"}>
                    {translatedLabel}
                </label>
                {!custom.hasOwnProperty("showErrorBottom")
                    ? touched &&
                      error && (
                          <span
                              id={id + "-error"}
                              className="govuk-error-message"
                          >
                              <span className="govuk-visually-hidden">
                                  Error:
                              </span>{" "}
                              {error}
                          </span>
                      )
                    : ""}
                <input
                    {...input}
                    type={custom.type}
                    className={className}
                    name={name}
                    id={id}
                    maxLength={
                        custom.hasOwnProperty("maxFieldLength")
                            ? custom.maxFieldLength
                                ? custom.maxFieldLength
                                : 100
                            : 200
                    }
                    pattern={
                        custom.hasOwnProperty("pattern")
                            ? custom.pattern
                            : undefined
                    }
                />
                {custom.hasOwnProperty("showErrorBottom")
                    ? touched &&
                      error && (
                          <span
                              id={id + "-error"}
                              className="govuk-error-message"
                          >
                              <span className="govuk-visually-hidden">
                                  Error:
                              </span>{" "}
                              {error}
                          </span>
                      )
                    : ""}
            </div>
        </>
    );
};