var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { UmbImagingCropMode } from '../types.js';
import { UmbImagingRepository } from '../imaging.repository.js';
import { css, customElement, html, property, state, when } from '../../../../external/lit/index.js';
import { UmbLitElement } from '../../../core/lit-element/index.js';
import { UmbTextStyles } from '../../../core/style/index.js';
import { UMB_ACTION_EVENT_CONTEXT } from '../../../core/action/index.js';
import { UmbEntityUpdatedEvent } from '../../../core/entity-action/index.js';
let UmbImagingThumbnailElement = class UmbImagingThumbnailElement extends UmbLitElement {
    constructor() {
        super(...arguments);
        /**
         * The width of the thumbnail in pixels.
         * @default 300
         */
        this.width = 300;
        /**
         * The height of the thumbnail in pixels.
         * @default 300
         */
        this.height = 300;
        /**
         * The mode of the thumbnail.
         * @description The mode determines how the image is cropped.
         * @enum {UmbImagingCropMode}
         */
        this.mode = UmbImagingCropMode.MIN;
        /**
         * The alt text for the thumbnail.
         */
        this.alt = '';
        /**
         * The fallback icon for the thumbnail.
         */
        this.icon = 'icon-picture';
        /**
         * The `loading` state of the thumbnail.
         * @enum {'lazy' | 'eager'}
         * @default 'lazy'
         */
        this.loading = 'lazy';
        /**
         * External loading state (e.g., when parent is waiting for metadata)
         */
        this.externalLoading = false;
        this._isLoading = false;
        this._thumbnailUrl = '';
        this.#imagingRepository = new UmbImagingRepository(this);
    }
    #imagingRepository;
    #intersectionObserver;
    render() {
        return when(this.externalLoading || this._isLoading, () => this.#renderLoading(), () => this.#renderThumbnail());
    }
    connectedCallback() {
        super.connectedCallback();
        if (this.loading === 'lazy') {
            this.#intersectionObserver = new IntersectionObserver((entries) => {
                if (entries[0].isIntersecting) {
                    this.#generateThumbnailUrl();
                    this.#intersectionObserver?.disconnect();
                    this.#observeActionEvent();
                }
            });
            this.#intersectionObserver.observe(this);
        }
        else {
            this.#generateThumbnailUrl();
            this.#observeActionEvent();
        }
    }
    disconnectedCallback() {
        super.disconnectedCallback();
        this.#intersectionObserver?.disconnect();
    }
    /**
     * Observes the action events for the current media item.
     * Reloads the thumbnail when the media item is updated.
     * Note: Call this only when the media item is in view or otherwise is supposed to be loaded already.
     */
    #observeActionEvent() {
        this.consumeContext(UMB_ACTION_EVENT_CONTEXT, (actionEventContext) => {
            actionEventContext?.addEventListener(UmbEntityUpdatedEvent.TYPE, (event) => {
                if (event instanceof UmbEntityUpdatedEvent && event.getUnique() === this.unique) {
                    this.#generateThumbnailUrl();
                }
            });
        });
    }
    #renderLoading() {
        return html `<uui-loader-circle id="loader"></uui-loader-circle>`;
    }
    #renderThumbnail() {
        return when(this._thumbnailUrl, (url) => html `<img id="figure" src=${url} alt=${this.alt} loading=${this.loading} draggable="false" />`, () => html `<umb-icon id="icon" name=${this.icon}></umb-icon>`);
    }
    async #generateThumbnailUrl() {
        if (!this.unique)
            return;
        this._isLoading = true;
        const { data } = await this.#imagingRepository.requestResizedItems([this.unique], {
            height: this.height,
            width: this.width,
            mode: this.mode,
            format: this.format,
        });
        this._thumbnailUrl = data?.[0]?.url ?? '';
        this._isLoading = false;
    }
    static { this.styles = [
        UmbTextStyles,
        css `
			:host {
				display: block;
				position: relative;
				overflow: hidden;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				height: 100%;
			}

			#loader {
				font-size: 2em;
				margin-bottom: 1em;
			}

			#figure {
				display: block;
				width: 100%;
				height: 100%;
				object-fit: contain;
				object-position: center;

				background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill-opacity=".1"><path d="M50 0h50v50H50zM0 50h50v50H0z"/></svg>');
				background-size: 10px 10px;
				background-repeat: repeat;
			}

			#icon {
				width: 100%;
				height: 100%;
				font-size: var(--uui-size-8);
			}
		`,
    ]; }
};
__decorate([
    property({ type: String })
], UmbImagingThumbnailElement.prototype, "unique", void 0);
__decorate([
    property({ type: Number })
], UmbImagingThumbnailElement.prototype, "width", void 0);
__decorate([
    property({ type: Number })
], UmbImagingThumbnailElement.prototype, "height", void 0);
__decorate([
    property({ type: String })
], UmbImagingThumbnailElement.prototype, "mode", void 0);
__decorate([
    property({ type: String })
], UmbImagingThumbnailElement.prototype, "format", void 0);
__decorate([
    property({ type: String })
], UmbImagingThumbnailElement.prototype, "alt", void 0);
__decorate([
    property({ type: String })
], UmbImagingThumbnailElement.prototype, "icon", void 0);
__decorate([
    property({ type: String })
], UmbImagingThumbnailElement.prototype, "loading", void 0);
__decorate([
    property({ type: Boolean, reflect: false, attribute: 'external-loading' })
], UmbImagingThumbnailElement.prototype, "externalLoading", void 0);
__decorate([
    state()
], UmbImagingThumbnailElement.prototype, "_isLoading", void 0);
__decorate([
    state()
], UmbImagingThumbnailElement.prototype, "_thumbnailUrl", void 0);
UmbImagingThumbnailElement = __decorate([
    customElement('umb-imaging-thumbnail')
], UmbImagingThumbnailElement);
export { UmbImagingThumbnailElement };
