import { default as CxButton } from '../../../atoms/src/components/button/button.ts';
import { default as CxSpace } from '../../../atoms/src/components/space/space.ts';
import { default as CxTypography } from '../../../atoms/src/components/typography/typography.ts';
import { default as CortexElement } from '../../../base/src/cortex-element.ts';
import { default as CxCropper } from '../../../molecules/src/cropper/cropper.ts';
import { Asset, CropMode, FocusMode, Parameter, Proxy, Transformation, Unit } from '../../../types/src/asset-link-format';
import { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
import { default as CxAssetLinkFormatCrop } from './components/asset-link-format-crop/asset-link-format-crop';
import { default as CxAssetLinkFormatExtension } from './components/asset-link-format-extension/asset-link-format-extension';
import { default as CxAssetLinkFormatProxy } from './components/asset-link-format-proxy/asset-link-format-proxy';
import { default as CxAssetLinkFormatQuality } from './components/asset-link-format-quality/asset-link-format-quality';
import { default as CxAssetLinkFormatResize } from './components/asset-link-format-resize/asset-link-format-resize';
import { default as CxAssetLinkFormatRotation } from './components/asset-link-format-rotation/asset-link-format-rotation';
import { default as CxAssetLinkFormatMetadata } from './components/asset-link-metadata/asset-link-format-metadata';

export type CxAssetLinkFormatChangeEvent = CustomEvent<string>;
/**
 * @summary The `cx-asset-link-format` component is used to format an asset link with various transformations such as cropping, resizing, rotating, and applying quality settings.
 *
 * @event `cx-asset-link-format-change` - Emitted when the asset link format is changed.
 */
export default class CxAssetLinkFormat extends CortexElement {
    static readonly styles: CSSResultGroup;
    static readonly dependencies: {
        'cx-asset-link-format-crop': typeof CxAssetLinkFormatCrop;
        'cx-asset-link-format-extension': typeof CxAssetLinkFormatExtension;
        'cx-asset-link-format-metadata': typeof CxAssetLinkFormatMetadata;
        'cx-asset-link-format-proxy': typeof CxAssetLinkFormatProxy;
        'cx-asset-link-format-quality': typeof CxAssetLinkFormatQuality;
        'cx-asset-link-format-resize': typeof CxAssetLinkFormatResize;
        'cx-asset-link-format-rotation': typeof CxAssetLinkFormatRotation;
        'cx-button': typeof CxButton;
        'cx-space': typeof CxSpace;
        'cx-typography': typeof CxTypography;
    };
    private readonly localize;
    /**
     * The base URL for the asset service.
     * This URL is used to fetch the asset link and apply transformations.
     * This is useful for integration with different environments that are outside of the Orange Logic platform, such as Content Browser SDK.
     * If not provided, the component will use the current window location as the base URL.
     * @example 'https://qa-latest.orangelogic.com'
     */
    baseUrl: string | undefined;
    /**
     * The token used for authentication with the asset service.
     */
    token: string | undefined;
    /**
     * The asset to be formatted.
     * This is an object that contains the asset's details such as ID, original URL, image URL, width, and height.
     * This property is required for the component to function correctly.
     */
    asset: Asset | undefined;
    cropModes: CropMode[];
    focusModes: FocusMode[];
    /**
     * The list of available file extensions for the asset.
     * This is an array of objects, each containing a `displayName` and a `value`.
     * The `displayName` is the name displayed in the dropdown, and the `value` is the actual file extension.
     */
    extensions: Array<{
        displayName: string;
        value: string;
    }>;
    /**
     * The list of available proxies for the asset.
     * This is an array of objects, each containing details about the proxy such as `id`, `proxyName`, `formatWidth`, and `formatHeight`.
     * This property is used to select different formats for the asset.
     */
    proxies: Proxy[] | undefined;
    /**
     * The selector for the cropper element.
     * This is used to link the cropper functionality with the asset link format component.
     * If not provided, the component will not use a cropper.
     */
    forCropper: string | undefined;
    /**
     * The session identifier to be used for the asset link.
     * This is useful for working with Orange Logic platform's sessions.
     */
    useSession: string;
    /**
     * The list of transformations applied to the asset link.
     * This is an array of objects, each containing a `key` (the type of transformation) and a `value` (the parameters for the transformation).
     * This property is used to keep track of all transformations applied to the asset link.
     * Making this a property allows for easy syncing with the backend code.
     */
    transformations: Transformation[];
    /**
     * The ID of the selected proxy format.
     * This is a string that represents the ID of the selected proxy format from the list of available proxies.
     */
    selectedProxy: string;
    useCustomExtension: boolean;
    noMetadata: boolean;
    noCrop: boolean;
    noResize: boolean;
    noRotate: boolean;
    lastImageSize: {
        height: number;
        width: number;
    };
    hideHeader: boolean;
    /** Show a Reset button in the header that clears all transformations. Supports one Undo step after reset. */
    canReset: boolean;
    queryElement: HTMLElement | null;
    /**
     * The currently active setting in the asset link format component.
     * This is a string that represents the active setting, such as 'cx-asset-link-format-crop', 'cx-asset-link-format-resize', etc.
     * This property is used to control which setting is currently being edited or displayed.
     */
    activeSetting: string;
    /**
     * The currently selected format for the asset link.
     * This is an object that contains details about the selected format, such as `extension`, `height`, `keepMetadata`, `originalUrl`, `proxyUrl`, `quality`, `rotation`, `url`, `width`, `x`, and `y`.
     */
    selectedFormat: {
        extension: string;
        height: number;
        keepMetadata: boolean;
        originalUrl: string;
        quality: number;
        rotation: number;
        url: string;
        width: number;
        x: number;
        y: number;
    } | undefined;
    /**
     * The size for resizing the asset.
     * This is an object that contains the `height`, `unit`, and `width` for resizing.
     */
    private resizeSize;
    /**
     * The size for cropping the asset.
     * This is an object that contains the `height`, `percentageHeight`, `percentageWidth`, `unit`, `width`, `x`, and `y` for cropping.
     */
    private cropSize;
    /**
     * The rotation angle for the asset.
     * This is a number that represents the rotation angle in degrees.
     */
    private rotation;
    /**
     * The default size of the asset.
     * This is an object that contains the `height` and `width` of the asset.
     * This is used to set the initial size of the asset when it is loaded.
     */
    private defaultSize;
    /**
     * The cropper element used for cropping the asset.
     * This is an instance of the `CxCropper` component that provides cropping functionality.
     * This property is set when the `forCropper` is provided and the cropper element is found in the DOM.
     */
    cropperElement: CxCropper | null;
    /**
     * The list of parameters for the asset link.
     * This is an array of objects, each containing details about a parameter that can be applied to the asset link.
     * This property is used to allow additional parameters to be added to the asset link transformations.
     */
    parameters: Parameter[];
    /**
     * Indicates whether the component is currently loading.
     * This is used to show a loading state while a transformation is being processed.
     */
    private loading;
    /**
     * The last action performed on the asset link.
     * This is used to keep track of the last transformation action applied, such as crop, resize, rotate, etc.
     * This is useful for showing the correct loading state and for applying transformations correctly.
     */
    private lastAction;
    private frozenIndex;
    /** Snapshot saved on Reset to allow one Undo step back to the pre-reset state. */
    private preResetTransformations;
    /** True when there are transformations beyond the frozen index (i.e. user has added new ones). */
    private get hasUnfrozenTransformations();
    private apiGetTransformAssetLink;
    private apiGetCropFocusMode;
    /**
     * Checks if the crop apply button should be disabled.
     * This is determined by comparing the current crop size with the last crop size.
     * If the current crop size is equal to the last crop size, the button is disabled.
     * @return {boolean} - Returns true if the crop apply button should be disabled, false otherwise.
     */
    get disabledCropApply(): boolean;
    /**
     * Returns the list of formats available for the asset link.
     * This is derived from the `proxies` property, filtering out any proxies that have a `cdnName`.
     */
    get formats(): Proxy[];
    get imageSize(): {
        height: number;
        width: number;
    };
    /**
     * Returns the last crop size based on the transformations applied to the asset link.
     * This is calculated by iterating through the transformations and applying the last crop, resize, or rotate transformation to the default size of the asset.
     * It returns an object with the last crop size in both pixel and aspect ratio units.
     */
    get lastCropSize(): {
        "%": {
            height: number;
            percentageHeight: number;
            percentageWidth: number;
            unit: Unit;
            width: number;
            x: number;
            y: number;
        };
        px: {
            height: number;
            percentageHeight: number;
            percentageWidth: number;
            unit: Unit;
            width: number;
            x: number;
            y: number;
        };
    };
    /**
     * Returns the last resize size based on the transformations applied to the asset link.
     * This is calculated by iterating through the transformations and applying the last crop, resize, or rotate transformation to the default size of the asset.
     * It returns an object with the last resize size in both pixel and aspect ratio units.
     */
    get lastResizeSize(): {
        "%": {
            height: number;
            unit: Unit;
            width: number;
        };
        px: {
            height: number;
            unit: Unit;
            width: number;
        };
    };
    /**
     * Returns the transformation string for the asset link.
     */
    get transformationString(): string;
    constructor();
    runConnectedCallback(): void;
    disconnectedCallback(): void;
    updated(changedProperties: PropertyValues): void;
    getCropSize(): {
        cropMode: string;
        focusMode: string;
        height: number;
        keepAspectRatio?: boolean;
        percentageHeight: number;
        percentageWidth: number;
        ratioHeight: number;
        ratioWidth: number;
        unit: Unit;
        width: number;
        x: number;
        y: number;
    };
    setActiveSetting(activeSetting: string): void;
    private freezeTransformations;
    handleTransformationsChange(): Promise<void>;
    private handleCropperElementChange;
    private handleCropperSelectorChange;
    private handleAssetChange;
    private handleProxiesChange;
    handleSelectedProxyChange(oldValue: unknown): Promise<void>;
    handleLoadingChange(): void;
    private handleSelectedFormatChange;
    private handleResizeSizeChange;
    private handleCropSizeChange;
    private handleRotationChange;
    private handleActiveSettingChange;
    private handleRequestAutoCropSuggestion;
    private onCropComplete;
    private onCropDragStart;
    private onDetailsShow;
    private onDetailsHide;
    private onProxyChange;
    private onCropModeChange;
    private onCropFocusModeChange;
    private onCropChange;
    private onCropChanged;
    private onCropApply;
    private onResizeChange;
    private onResizeApply;
    private onRotationChange;
    private onRotationApply;
    private onQualityChange;
    private onMetadataChange;
    private onExtensionChange;
    private syncQuality;
    private handleUndo;
    private handleReset;
    render(): TemplateResult;
}
declare global {
    interface HTMLElementTagNameMap {
        'cx-asset-link-format': CxAssetLinkFormat;
    }
    interface GlobalEventHandlersEventMap {
        'cx-asset-link-format-change': CxAssetLinkFormatChangeEvent;
    }
}
