import { default as ResizableElement } from '../../../../base/src/resizable-element.ts';
import { ObjectFit } from '../../../../types/src/index.ts';
import { ClickHandlerType } from '../../../../types/src/image';
import { LocalizeController } from '../../../../utils/src/custom-element/i18n';
import { TemplateResult } from 'lit';
import { Zoom } from 'medium-zoom';
import { default as CxIcon } from '../icon/icon';
import { default as CxPopup } from '../popup/popup';
import { default as CxResizeObserver } from '../resize-observer/resize-observer';
import { default as CxSkeleton } from '../skeleton/skeleton';
import { default as CxSpace } from '../space/space';

/**
 * @summary Images are wrappers for img elements with built-in lazy loading, skeleton, and fallback support.
 * The cx-image component is a simple way to display images in your application.
 *
 * @csspart image - The `img` element.
 * @csspart skeleton - The skeleton element, will be shown while the image is loading and the `skeleton` property is set.
 * @csspart fallback - The fallback element, will be shown if the image fails to load and the `fallback` property is set.
 * @csspart base - The component’s outer wrapper.
 * @csspart fallback-icon - The icon rendered inside the fallback slot.
 *
 * @cssproperty [--padding=0] - The padding of the image.
 * @cssproperty --padding-top - The padding-top of the image (this will override the `--padding` property).
 * @cssproperty --padding-left - The padding-left of the image (this will override the `--padding` property).
 * @cssproperty --padding-right - The padding-right of the image (this will override the `--padding` property).
 * @cssproperty --padding-bottom - The padding-bottom of the image (this will override the `--padding` property).
 * @cssproperty --border-radius - The border-radius of the image.
 * @cssproperty --border - The border of the image.
 *
 * @event cx-load - Emitted when the image has loaded.
 * @event cx-error - Emitted when the image has failed to load (after all retry attempts when `retry-on-error` is enabled).
 * @event cx-image-zoom-open - Emitted when the image zoom is opened.
 * @event cx-image-zoom-close - Emitted when the image zoom is closed.
 *
 * @slot skeleton - The skeleton element, will be shown while the image is loading and the `skeleton` property is set.
 * @slot fallback - The fallback element, will be shown if the image fails to load and the `fallback` property is set.
 */
export default class CxImage extends ResizableElement {
    static readonly styles: import('lit').CSSResult[];
    static readonly dependencies: {
        'cx-icon': typeof CxIcon;
        'cx-popup': typeof CxPopup;
        'cx-resize-observer': typeof CxResizeObserver;
        'cx-skeleton': typeof CxSkeleton;
        'cx-space': typeof CxSpace;
    };
    readonly localize: LocalizeController;
    imageElement?: HTMLImageElement;
    zoomImageElement: HTMLImageElement;
    highlighterElement: HTMLDivElement;
    private _retryCount;
    private _retryTimer;
    isLoaded: boolean;
    isError: boolean;
    /** Incremented on each retry attempt to force the img element to remount via keyed(). */
    private _retryIndex;
    /**
     * The path to the image to load.
     */
    src: string;
    /**
     * The path to the placeholder image to be shown if src is not available.
     */
    placeholder: string;
    /**
     * A description of the image used by assistive devices.
     */
    alt: string;
    /**
     * The object-fit property of the image.
     */
    objectFit: ObjectFit;
    /**
     * Should the skeleton be shown when the image is loading.
     */
    skeleton: boolean;
    /**
     * Should show the fallback image when the image fails to load.
     */
    fallback: boolean;
    /**
     * Determines if the image should be zoom-able.
     */
    canZoom: boolean;
    /**
     * Indicates whether the image is currently loading. Useful for displaying a loading spinner when the image source is expected but not yet available.
     */
    loading: boolean;
    /**
     * Indicates whether the image takes the full width of the parent container.
     */
    block: boolean;
    /**
     * The loading attribute of the image.
     */
    htmlLoading: 'eager' | 'lazy';
    /**
     * The type of click handler to use.
     * - automatic: The click handler is automatically handled by the image.
     * - manual: The click handler is manually handled by the parent element.
     */
    clickHandlerType: ClickHandlerType;
    /**
     * When true, automatically retries loading the image on error before showing the fallback.
     */
    retryOnError: boolean;
    /**
     * Maximum number of retry attempts when `retry-on-error` is enabled.
     */
    maxRetries: number;
    /**
     * Indicates whether the image is currently zoomed.
     */
    isZoomed: boolean;
    imageRatio: number;
    parsedAlt: string;
    parsedAltDarkMode: string;
    protected zoom: Zoom | null;
    private lastPatchedWidth;
    get currentAltValue(): string;
    get currentSrc(): string;
    get highlighterTabindex(): "0" | undefined;
    get highlighterRole(): "img" | "button";
    get highlighterClass(): {
        [x: string]: boolean;
        'highlightable-item': boolean;
        'highlightable-item--effect-text-reveal': boolean;
    };
    get imageClass(): {
        [x: string]: boolean;
        image: boolean;
        'image--can-zoom': boolean;
        'image--has-action': boolean;
        'image--hidden': boolean;
    };
    /**
     * Whether the image have zoom action.
     */
    protected get hasZoomAction(): boolean;
    runFirstUpdated(): void;
    runConnectedCallback(): void;
    disconnectedCallback(): void;
    /**
     * Handle mouse enter event.
     */
    private handleMouseEnter;
    /**
     * Handle mouse leave event.
     */
    private handleMouseLeave;
    /**
     * If image is currently zoomed, close the zoom.
     */
    private handleBlur;
    private handleKeyDown;
    handleCanZoomChange(): Promise<void>;
    handleObjectFitChange(): Promise<void>;
    handleSrcChange(): void;
    private clearRetryTimer;
    private scheduleRetry;
    private initZoom;
    protected handleLoad(event: Event): void;
    protected handleError(): void;
    protected handleSizeChange(): void;
    private handleResize;
    /**
     * This function is used to update the last patched width of the image.
     * This is required to correctly handle the orientation of the image on load.
     * The this.clientWidth inside this.imageClass is not recalculated when the image is loaded.
     */
    private updateLastPatchedWidth;
    /**
     * Support CMS5 click action for the image.
     */
    protected handleClickAction(event: MouseEvent): void;
    updated(changedProps: Map<string, unknown>): void;
    openZoom(): void;
    protected renderContent(): TemplateResult;
    render(): TemplateResult;
}
declare global {
    interface HTMLElementTagNameMap {
        'cx-image': CxImage;
    }
}
