"use client";

import { memo } from "react";
import { useTranslation } from "../../../contexts/MessagesContext";
import UploadView from "./Upload.view";
import type { UploadStateValue } from "../../../../lib/propNormalization";
import type { UploadProps } from "./Upload.types";

/**
 * Figma: "Control / Upload". Click-to-upload tile with a label
 * and hint text used to add an image from the user's device.
 */
const UploadContainer = memo<UploadProps>(
  ({
    active = true,
    state,
    hasLabel,
    label,
    showHelpIcon = true,
    hintText,
    buttonLabel,
    previewSrc,
    previewAlt,
    fileName,
    onClick,
    className = "",
  }) => {
    const t = useTranslation("controlsChrome");
    const resolvedState: UploadStateValue =
      state ?? (active ? "default" : "disabled");
    const uploadButtonLabel = buttonLabel ?? t("uploadButton");

    return (
      <UploadView
        state={resolvedState}
        hasLabel={hasLabel ?? Boolean(label)}
        label={label}
        showHelpIcon={showHelpIcon}
        hintText={hintText ?? t("uploadHintDefault")}
        uploadButtonLabel={uploadButtonLabel}
        uploadAriaLabel={uploadButtonLabel}
        previewSrc={previewSrc}
        previewAlt={previewAlt ?? t("uploadAriaLabel")}
        fileName={fileName}
        onClick={onClick}
        className={className}
      />
    );
  },
);

UploadContainer.displayName = "Upload";

export default UploadContainer;