import { ComponentType } from 'react';
import { PropsWithChildren } from 'react';
import { WebPlayerCustomMediaProps } from '@car-cutter/react-webplayer';
import { WebPlayerIconProps } from '@car-cutter/react-webplayer';
import { WebPlayerProps } from '@car-cutter/react-webplayer';

export declare const ANALYTICS_EVENT_DISPLAY = "analytics-display";

export declare const ANALYTICS_EVENT_ERROR = "analytics-error";

export declare const ANALYTICS_EVENT_INTERACTION = "analytics-interaction";

export declare const ANALYTICS_EVENT_LOAD = "analytics-load";

declare type AspectRatio = `${number}:${number}`;

declare type Category = {
    id: string;
    title: string;
    items: Item[];
};

export declare type Composition = {
    aspectRatio: AspectRatio;
    imageHdWidth: MediaWidth;
    imageSubWidths: MediaWidth[];
    categories: Category[];
};

export declare const DEFAULT_EVENT_PREFIX = "cc-webplayer:" satisfies string;

export declare const EVENT_COMPOSITION_LOAD_ERROR = "composition-load-error";

export declare const EVENT_COMPOSITION_LOADED = "composition-loaded";

export declare const EVENT_COMPOSITION_LOADING = "composition-loading";

export declare const EVENT_EXTEND_MODE_OFF = "extend-mode-off";

export declare const EVENT_EXTEND_MODE_ON = "extend-mode-on";

export declare const EVENT_GALLERY_CLOSE = "gallery-close";

export declare const EVENT_GALLERY_OPEN = "gallery-open";

export declare const EVENT_HOTSPOTS_OFF = "hotspots-off";

export declare const EVENT_HOTSPOTS_ON = "hotspots-on";

export declare const EVENT_ITEM_CHANGE = "item-change";

/**
 * Generates a URL for fetching the composition JSON for a given customer and vehicle.
 *
 * @param {string} customerToken - The CarCutter Customer Token (computed by hashing the Customer ID with SHA-256).
 * @param {string} vin - The Vehicle Identification Number.
 * @returns {string} The URL to fetch the composition JSON.
 */
export declare function generateCompositionUrl(
customerToken: string,
vin: string
): string {
    return `https://cdn.car-cutter.com/gallery/${customerToken}/${vin}/composition_v3.json`;
}

declare type Hotspot = {
    title: string;
    icon?: string;
    description?: string;
    type?: "damage" | "feature";
    position: {
        x: number;
        y: number;
    };
    detail?: {
        type: "image" | "link" | "pdf";
        src: string;
    };
};

declare type ImageItem = { type: "image" } & ImageWithHotspots;

declare type ImageWithHotspots = {
    src: string;
    hotspots?: Hotspot[];
};

declare type InteriorThreeSixtyItem = {
    type: "interior-360";
    poster?: string;
} & ImageWithHotspots;

export declare type Item =
| ImageItem
| VideoItem
| ThreeSixtyItem
| NextGenThreeSixtyItem
| InteriorThreeSixtyItem;

export declare type MediaLoadStrategy = "quality" | "balanced" | "speed";

declare type MediaWidth = number;

declare type NextGenThreeSixtyItem = {
    type: "next360";
    images: ImageWithHotspots[];
};

declare type ThreeSixtyItem = {
    type: "360";
    images: ImageWithHotspots[];
};

declare type VideoItem = {
    type: "video";
    src: string;
    poster?: string;
};

export declare const WEB_PLAYER_CUSTOM_MEDIA_WC_TAG = "cc-webplayer-custom-media";

export declare const WEB_PLAYER_ICON_WC_TAG = "cc-webplayer-icon";

export declare const WEB_PLAYER_WC_TAG = "cc-webplayer";

export declare const WebPlayer: ComponentType<WebPlayerProps>;

export declare const WebPlayerCustomMedia: ComponentType<PropsWithChildren<WebPlayerCustomMediaProps>>;

export { WebPlayerCustomMediaProps }

export declare const WebPlayerIcon: ComponentType<PropsWithChildren<WebPlayerIconProps>>;

export { WebPlayerIconProps }

export { WebPlayerProps }

export { }