import type { ReactElement } from "react";
import { useContext } from "react";
import { Locale } from "../../locale";
import { FilesUploaderCtx } from "../context/index";

/**
 * Компонент вывода подсказки загрузчика
 * @returns
 * */
export const FilesUploaderTip = (): ReactElement => {

  const {
    getCN,
    fileTypes,
    maxSize,
    isMultiple,
    maxFiles,
    maxSizeType,
  } = useContext(FilesUploaderCtx);

  const types = fileTypes.length === 0 ? "*" : fileTypes.map((type) => type.toUpperCase()).join(", ");

  const isMaxSize = typeof maxSize === "number" && maxSize > 0 && maxSize !== Infinity;

  return (
    <div className={getCN("tip")} role={"tooltip"}>
      {isMaxSize && <div className={getCN("tipSize")}>
        <Locale options={{ maxSize: maxSize.toString(), isMultiple, maxSizeType }} code={"filesUploader.maxSize"} />
      </div>}
      <div className={getCN("tipLength")}>
        <Locale options={{ maxFiles: maxFiles.toString(), isMultiple, maxSizeType }} code={"filesUploader.maxLength"} />
      </div>
      <div className={getCN("tipTypes")}>
        <Locale options={{ types, isMultiple }} code={types === "*" ? "filesUploader.allTypes" : "filesUploader.specificTypes"} />
      </div>
    </div>
  );
};