Status Bar

import StatusBar from "@uppy/status-bar";
import type { StatusBarOptions } from "@uppy/status-bar";

const StatusBar = require("@uppy/status-bar");

import Uppy from "@uppy/core";
import StatusBar from "@uppy/status-bar";

const uppy = new Uppy();
uppy.use(StatusBar, {
  target: "#status-bar",
  showProgressDetails: true,
  hideUploadButton: false,
  hideAfterFinish: true,
});

// The status bar will automatically display upload progress
// and provide controls for pause/resume/cancel operations

/**
 * StatusBar plugin for Uppy that renders upload progress with controls
 */
export default class StatusBar<M extends Meta, B extends Body> extends UIPlugin<
  DefinePluginOpts<StatusBarOptions, keyof typeof defaultOptions>,
  M,
  B
> {
  /** Plugin version string matching package version */
  static VERSION: string;
  
  /**
   * Creates a new StatusBar plugin instance
   * @param uppy - Uppy instance to attach to
   * @param opts - Configuration options for the status bar
   */
  constructor(uppy: Uppy<M, B>, opts?: StatusBarOptions);
  
  /**
   * Initiates the upload process
   * @returns Promise that resolves when upload starts, or undefined if upload fails
   */
  startUpload(): ReturnType<Uppy<M, B>['upload']>;
  
  /**
   * Renders the status bar UI component
   * @param state - Current Uppy state containing files, progress, and capabilities
   * @returns Preact component for rendering the status bar interface
   */
  render(state: State<M, B>): ComponentChild;
  
  /**
   * Called when plugin is mounted to DOM - sets text direction if needed
   */
  onMount(): void;
  
  /**
   * Installs the plugin and sets up event listeners for upload events
   */
  install(): void;
  
  /**
   * Uninstalls the plugin and cleans up resources including event listeners
   */
  uninstall(): void;
}

/**
 * Configuration options for StatusBar plugin
 */
interface StatusBarOptions extends UIPluginOptions {
  /** Show detailed progress information including file counts and data amounts */
  showProgressDetails?: boolean;
  /** Hide the upload button */
  hideUploadButton?: boolean;
  /** Hide status bar after upload completion */
  hideAfterFinish?: boolean;
  /** Hide retry button */
  hideRetryButton?: boolean;
  /** Hide pause/resume button */
  hidePauseResumeButton?: boolean;
  /** Hide cancel button */
  hideCancelButton?: boolean;
  /** Custom handler for done button click */
  doneButtonHandler?: (() => void) | null;
  /** Localization strings for UI text */
  locale?: LocaleStrings<typeof StatusBarLocale>;
}

/**
 * Base UI plugin options inherited by StatusBarOptions
 */
interface UIPluginOptions {
  /** Target element or selector for mounting the plugin */
  target?: string | Element;
  /** Unique identifier for the plugin instance */
  id?: string;
}

/**
 * Default configuration values for StatusBar plugin
 */
const defaultOptions = {
  hideUploadButton: false,
  hideRetryButton: false,
  hidePauseResumeButton: false,
  hideCancelButton: false,
  showProgressDetails: false,
  hideAfterFinish: true,
  doneButtonHandler: null,
};

/**
 * Locale strings interface for StatusBar
 */
interface StatusBarLocale {
  strings: {
    uploading: string;
    complete: string;
    uploadFailed: string;
    paused: string;
    retry: string;
    cancel: string;
    pause: string;
    resume: string;
    done: string;
    filesUploadedOfTotal: Record<number, string>;
    dataUploadedOfTotal: string;
    dataUploadedOfUnknown: string;
    xTimeLeft: string;
    uploadXFiles: Record<number, string>;
    uploadXNewFiles: Record<number, string>;
    upload: string;
    retryUpload: string;
    xMoreFilesAdded: Record<number, string>;
    showErrorDetails: string;
  };
}

// Import minified CSS (recommended for production)
import "@uppy/status-bar/css/style.min.css";

// Or import regular CSS (for development/customization)
import "@uppy/status-bar/css/style.css";

// Core types (re-exported from @uppy/core)
type Meta = Record<string, unknown>;
type Body = Record<string, unknown>;

// From preact
type ComponentChild = VNode<any> | object | string | number | bigint | boolean | null | undefined;

interface UppyFile<M extends Meta, B extends Body> {
  id: string;
  name?: string;
  type: string;
  data: File | Blob;
  meta: InternalMetadata & M;
  size: number | null;
  isRemote: boolean;
  isGhost: boolean;
  progress: FileProgress;
  error?: string | null;
  extension: string;
  isPaused?: boolean;
  isRestored?: boolean;
  preview?: string;
  uploadURL?: string;
  response?: {
    body?: B;
    status: number;
    bytesUploaded?: number;
    uploadURL?: string;
  };
}

interface FileProgress {
  uploadStarted: boolean;
  uploadComplete: boolean;
  percentage: number;
  bytesUploaded: number;
  bytesTotal: number | null;
  preprocess?: FileProcessingInfo;
  postprocess?: FileProcessingInfo;
}

interface FileProcessingInfo {
  mode: string;
  fileIDs: string[];
}

interface InternalMetadata {
  name: string;
  type?: string;
}

interface State<M extends Meta, B extends Body> {
  meta: M;
  capabilities: {
    uploadProgress: boolean;
    individualCancellation: boolean;
    resumableUploads: boolean;
    isMobileDevice?: boolean;
    darkMode?: boolean;
  };
  files: Record<string, UppyFile<M, B>>;
  allowNewUpload: boolean;
  totalProgress: number;
  error: string | null;
  recoveredState: any;
  currentUploads: Record<string, any>;
  info: Array<{
    isHidden?: boolean;
    type: string;
    message: string;
    details?: string | Record<string, string> | null;
  }>;
  plugins: Record<string, any>;
  companion?: Record<string, string>;
}

// Plugin configuration types
interface DefinePluginOpts<Opts, AlwaysDefinedKeys extends keyof Opts> {
  [K in keyof Opts]: K extends AlwaysDefinedKeys ? Opts[K] : Opts[K];
}

// From @uppy/utils
interface I18n {
  (key: string, options?: Record<string, any>): string;
}

interface LocaleStrings<T> {
  strings: Partial<T>;
}