tm_panel/src/components/ui/ImageUploadField.tsx

"use client";

import FileImageUploadCard from "@/components/ui/FileImageUploadCard";
import { useImageUploadFieldPresenter } from "@/components/ui/useImageUploadFieldPresenter";

interface IProps {
  value?: string;
  onChange: (url: string) => void;
  label: string;
  inputId: string;
  accept?: string;
  title?: string;
  hint?: string;
  recommendation?: string;
  fallbackFileName?: string;
  category?: string;
  tags?: string[];
  description?: string;
  allowedTypes?: string[];
  maxSize?: number;
  errorMessage?: string;
}

/**
 * Controlled image upload field: renders the shared `FileImageUploadCard` and
 * owns the upload lifecycle via `useImageUploadFieldPresenter`. Stores the
 * resulting file URL through `onChange`.
 */
const ImageUploadField = ({
  value,
  onChange,
  label,
  inputId,
  accept,
  title,
  hint,
  recommendation,
  fallbackFileName,
  category,
  tags,
  description,
  allowedTypes,
  maxSize,
  errorMessage,
}: IProps) => {
  const {
    fileRegister,
    isUploading,
    uploadProgress,
    selectedFileName,
    selectedFileSize,
    previewUrl,
    errorMessage: uploadError,
    clear,
  } = useImageUploadFieldPresenter({
    value,
    onChange,
    category,
    tags,
    description,
    allowedTypes,
    maxSize,
  });

  return (
    <FileImageUploadCard
      label={label}
      inputId={inputId}
      accept={accept}
      title={title}
      hint={hint}
      recommendation={recommendation}
      fallbackFileName={fallbackFileName}
      previewUrl={previewUrl}
      selectedFileName={selectedFileName}
      selectedFileSize={selectedFileSize}
      isLoading={isUploading}
      uploadProgress={uploadProgress}
      errorMessage={uploadError ?? errorMessage}
      onClear={clear}
      fileRegister={fileRegister}
    />
  );
};

export default ImageUploadField;