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 { UmbMediaUrlRepository } from '../repository/index.js';
import { UMB_MEDIA_WORKSPACE_CONTEXT } from '../../workspace/constants.js';
import { css, customElement, html, nothing, repeat, state, when } from '../../../../../external/lit/index.js';
import { UmbLitElement } from '../../../../core/lit-element/index.js';
import { UmbRequestReloadStructureForEntityEvent } from '../../../../core/entity-action/index.js';
import { observeMultiple } from '../../../../../libs/observable-api/index.js';
import { debounce, sanitizeHTML } from '../../../../core/utils/index.js';
let UmbMediaLinksWorkspaceInfoAppElement = class UmbMediaLinksWorkspaceInfoAppElement extends UmbLitElement {
    #mediaUrlRepository;
    #urls;
    #eventContext;
    constructor() {
        super();
        this.#mediaUrlRepository = new UmbMediaUrlRepository(this);
        this._isNew = false;
        this._loading = false;
        this._links = [];
        this.#urls = [];
        this.#debounceRequestUrls = debounce(() => this.#requestUrls(), 50);
        this.#onReloadRequest = () => {
            this.#debounceRequestUrls();
        };
        this.consumeContext(UMB_MEDIA_WORKSPACE_CONTEXT, (context) => {
            if (context) {
                this.observe(observeMultiple([context.isNew, context.unique]), ([isNew, unique]) => {
                    if (!unique)
                        return;
                    this._isNew = isNew === true;
                    if (unique !== this._unique) {
                        this._unique = unique;
                        this.#requestUrls();
                    }
                }, 'observeWorkspaceState');
            }
            else {
                this.removeUmbControllerByAlias('observeWorkspaceState');
            }
        });
    }
    #setLinks() {
        const links = this.#urls.map((u) => {
            const url = u.url;
            return { url };
        });
        this._links = links;
    }
    async #requestUrls() {
        if (this._isNew)
            return;
        if (!this._unique)
            return;
        this._loading = true;
        this.#urls = [];
        const { data } = await this.#mediaUrlRepository.requestItems([this._unique]);
        if (data?.length) {
            this.#urls = data;
            this.#setLinks();
        }
        this._loading = false;
    }
    #debounceRequestUrls;
    #onReloadRequest;
    render() {
        return html `
			<umb-workspace-info-app-layout headline="#general_links">
				${when(this._loading, () => this.#renderLoading(), () => this.#renderContent())}
			</umb-workspace-info-app-layout>
		`;
    }
    #renderLoading() {
        return html `<div id="loader-container"><uui-loader></uui-loader></div>`;
    }
    #openSvg(imagePath) {
        const popup = window.open('', '_blank');
        if (!popup)
            return;
        const html = `<!doctype html>
<body style="background-image: linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(135deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(135deg, transparent 75%, #ccc 75%); background-size:30px 30px; background-position:0 0, 15px 0, 15px -15px, 0px 15px;">
	<img src="${imagePath}"/>
	<script>history.pushState(null, null, "${sanitizeHTML(window.location.href)}");</script>
</body>`;
        popup.document.open();
        popup.document.write(html);
        popup.document.close();
    }
    #renderContent() {
        if (this._links.length) {
            return html `
				${repeat(this._links, (item) => item.url, (item) => this.#renderLinkItem(item))}
			`;
        }
        else {
            return html `
				<div class="link-item">
					<span class="link-content italic"><umb-localize key="content_noMediaLink"></umb-localize></span>
				</div>
			`;
        }
    }
    #renderLinkItem(item) {
        if (!item.url)
            return nothing;
        const ext = item.url.split(/[#?]/)[0].split('.').pop()?.trim().toLowerCase();
        if (ext === 'svg') {
            return html `
				<a href="#" target="_blank" class="link-item with-href" @click=${() => this.#openSvg(item.url)}>
					<span class="link-content">${item.url}</span>
					<uui-icon name="icon-out"></uui-icon>
				</a>
			`;
        }
        else {
            return html `
				<a href=${item.url} target="_blank" class="link-item with-href">
					<span class="link-content">${item.url}</span>
					<uui-icon name="icon-out"></uui-icon>
				</a>
			`;
        }
    }
    disconnectedCallback() {
        super.disconnectedCallback();
        this.#eventContext?.removeEventListener(UmbRequestReloadStructureForEntityEvent.TYPE, this.#onReloadRequest);
    }
    static { this.styles = [
        css `
			uui-box {
				--uui-box-default-padding: 0;
			}

			#link-section {
				display: flex;
				flex-direction: column;
				text-align: left;
			}

			.link-item {
				padding: var(--uui-size-space-4) var(--uui-size-space-5);
				display: grid;
				grid-template-columns: 1fr auto;
				gap: var(--uui-size-6);
				color: inherit;
				text-decoration: none;
				word-break: break-all;
			}

			.link-language {
				color: var(--uui-color-divider-emphasis);
			}

			.link-content.italic {
				font-style: italic;
			}

			.link-item uui-icon {
				margin-right: var(--uui-size-space-2);
				vertical-align: middle;
			}

			.link-item.with-href {
				cursor: pointer;
			}

			.link-item.with-href:hover {
				background: var(--uui-color-divider);
			}
		`,
    ]; }
};
__decorate([
    state()
], UmbMediaLinksWorkspaceInfoAppElement.prototype, "_isNew", void 0);
__decorate([
    state()
], UmbMediaLinksWorkspaceInfoAppElement.prototype, "_unique", void 0);
__decorate([
    state()
], UmbMediaLinksWorkspaceInfoAppElement.prototype, "_loading", void 0);
__decorate([
    state()
], UmbMediaLinksWorkspaceInfoAppElement.prototype, "_links", void 0);
UmbMediaLinksWorkspaceInfoAppElement = __decorate([
    customElement('umb-media-links-workspace-info-app')
], UmbMediaLinksWorkspaceInfoAppElement);
export { UmbMediaLinksWorkspaceInfoAppElement };
export default UmbMediaLinksWorkspaceInfoAppElement;
