import React from 'react';
import { ThemeOverrideProps } from '@xsolla/xui-core';

type ImageUploaderSize = "xl" | "lg" | "md" | "sm" | "xs";
/** Controlled value shape. */
interface ImageUploaderValue {
    filename?: string;
    url?: string;
}
/**
 * Normalized file shape produced by the platform picker / drag-drop pipeline.
 * - `uri` is a data-URL on web and a file URI on native.
 * - On web, the original `File` is passed through for consumers that need it
 *   (e.g. to upload via FormData / fetch).
 */
type ImageUploaderFile = {
    name: string;
    size: number;
    uri: string;
    mimeType?: string;
    /** The original DOM File (web only) */
    file?: File;
};
interface ImageUploaderProps extends ThemeOverrideProps {
    /** Size of the uploader. Figma default is `xl`. */
    size?: ImageUploaderSize;
    /** Placeholder shown under the icon. Accepts a string or a custom React node. */
    placeholder?: React.ReactNode;
    /** Placeholder shown while the file is uploading. Accepts a string or a custom React node. */
    uploadingPlaceholder?: React.ReactNode;
    /** Description below the placeholder. Only rendered when `wideView` is true. Accepts a string or a custom React node. */
    description?: React.ReactNode;
    /** Error message — when provided, component renders in the error state. */
    errorMessage?: string;
    /** Wide view (horizontal layout). When true, the box stretches to its parent's full width. */
    wideView?: boolean;
    /** Disabled state. */
    disabled?: boolean;
    /** Controlled loading state (shows spinner + "Uploading" label). */
    loading?: boolean;
    /** Controlled value. When provided, the component reflects this value. */
    value?: ImageUploaderValue | null;
    /**
     * Fires when the user picks (or drops) a file. Use this to perform the
     * actual upload — the component itself does no I/O.
     *
     * If the handler returns a `Promise`:
     * - The component automatically shows the uploading state (spinner +
     *   `uploadingPlaceholder`) until the promise settles.
     * - If the promise resolves to an `ImageUploaderValue` (`{url, filename?}`)
     *   or a `string` URL, the component automatically calls `onChange(value)`
     *   with that value. The string form is sugar for `{url: <string>}`.
     * - If the promise rejects, the component calls `onChange(null, error)`.
     *
     * For finer-grained control, pass `loading` explicitly instead.
     */
    onUpload?: (file: ImageUploaderFile) => void | Promise<ImageUploaderValue | string | void>;
    /**
     * Fires when the displayed value changes — on file pick (with a local
     * data-URL preview), after upload resolves (with the server value), or on
     * remove (`null`). The optional second argument carries any error thrown by
     * the consumer's `onUpload`.
     */
    onChange?: (value: ImageUploaderValue | null, error?: Error) => void;
    /** Fires when the user removes the image (trash click / clear). */
    onDelete?: () => void;
    /**
     * Accepted file types — passed through to the hidden `<input accept>` as a
     * picker hint (web only — ignored on native). Standard HTML syntax:
     * comma-separated list of MIME types (`image/png`), MIME wildcards
     * (`image/*`), or file extensions (`.png`). Defaults to `image/*`.
     *
     * No runtime validation is performed — the consumer's `onUpload` (or the
     * backend it calls) is responsible for accepting/rejecting files.
     */
    accept?: string;
    /**
     * Native file picker hook. Required on native (no DOM `<input type="file">`).
     * On web, omit this and the component falls back to a hidden file input.
     */
    openPicker?: () => Promise<ImageUploaderFile | null>;
    testID?: string;
}
declare const ImageUploader: React.ForwardRefExoticComponent<ImageUploaderProps & React.RefAttributes<HTMLInputElement>>;

export { ImageUploader, type ImageUploaderFile, type ImageUploaderProps, type ImageUploaderSize, type ImageUploaderValue };