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

const FsFileUpload = ({ id, name, errors, register, maxFiles, required, setValue, label = null }) => {
  const { t } = useTranslation("components-formstack");
  const validFileUploadProps = {
    label: label || t("Upload your pictures here"),
    fileHeaderPart1: t("Drag and drop or "),
    fileHeaderPart2: t("choose files "),
    fileHeaderPart3: t("to upload"),
    maxSizeMessage: `${t("Maximum")} ${maxFiles} ${t("files")}. ${t("Maximum file size is: 25 Mb.")}`,
    maxSize: 26214400, // 25 Mb
    maxFiles,
    validExtension: "image/* ,application/pdf",
    validExtensionMessage: t("Valid extensions are: jpg, jpeg, tif, tiff, png, pdf."),
    displayMessage: t("no files attached"),
    requiredErrorText: t("Please attach pictures of your product."),
  };

  return (
    <FileUpload
      id={id}
      key={id}
      name={name}
      register={register}
      required={required}
      setValue={setValue}
      error={errors[name]}
      {...validFileUploadProps}
    />
  );
};

export default FsFileUpload;