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 { ShadowlessElement, WithDisposable } from '@blockeditor/lit';
import { html } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { OpenIcon, WebIcon16 } from '../../_common/icons/text.js';
import { ThemeObserver } from '../../_common/theme/theme-observer.js';
import { getEmbedCardIcons } from '../../_common/utils/url.js';
import { styles } from '../styles.js';
let BookmarkCard = class BookmarkCard extends WithDisposable(ShadowlessElement) {
    constructor() {
        super(...arguments);
        this._themeObserver = new ThemeObserver();
    }
    connectedCallback() {
        super.connectedCallback();
        this.disposables.add(this.bookmark.model.propsUpdated.on(() => {
            this.requestUpdate();
        }));
        this.disposables.add(this.bookmark.slots.loadingUpdated.on(() => this.requestUpdate()));
        this._themeObserver.observe(document.documentElement);
        this._themeObserver.on(() => this.requestUpdate());
        this.disposables.add(() => this._themeObserver.dispose());
    }
    _selectBlock() {
        const selectionManager = this.bookmark.host.selection;
        const blockSelection = selectionManager.create('block', {
            path: this.bookmark.path,
        });
        selectionManager.setGroup('note', [blockSelection]);
    }
    _openLink() {
        let link = this.bookmark.model.url;
        if (!link.match(/^[a-zA-Z]+:\/\//)) {
            link = 'https://' + link;
        }
        window.open(link, '_blank');
    }
    _handleClick() {
        if (!this.bookmark.isInSurface) {
            this._selectBlock();
        }
    }
    _handleDoubleClick(event) {
        if (!this.bookmark.isInSurface) {
            event.stopPropagation();
            this._openLink();
        }
    }
    render() {
        const { icon, title, url, description, image, style } = this.bookmark.model;
        const loading = this.bookmark.loading;
        const loadingFailed = this.bookmark.loadingFailed;
        const cardClassMap = classMap({
            loading,
            'loading-failed': loadingFailed,
            [style]: true,
        });
        const domainName = url.match(/^(?:https?:\/\/)?(?:[^@\n]+@)?(?:www\.)?([^:/\n]+)/im)?.[1];
        const titleText = loading
            ? 'Loading...'
            : !title
                ? loadingFailed
                    ? domainName ?? 'Link card'
                    : ''
                : title;
        const { LoadingIcon, EmbedCardBannerIcon } = getEmbedCardIcons();
        const titleIconType = !icon?.split('.').pop() || icon?.split('.').pop() === 'svg'
            ? 'svg+xml'
            : icon?.split('.').pop();
        const titleIcon = loading
            ? LoadingIcon
            : icon
                ? html `<object type="image/${titleIconType}" data=${icon}>
            ${WebIcon16}
          </object>`
                : WebIcon16;
        const descriptionText = loading
            ? ''
            : !description
                ? loadingFailed
                    ? 'Failed to retrieve link information.'
                    : url
                : description ?? '';
        const bannerImage = !loading && image
            ? html `<object type="image/webp" data=${image}>
            ${EmbedCardBannerIcon}
          </object>`
            : EmbedCardBannerIcon;
        return html `
      <div
        class="affine-bookmark-card${cardClassMap}"
        @click=${this._handleClick}
        @dblclick=${this._handleDoubleClick}
      >
        <div class="affine-bookmark-content">
          <div class="affine-bookmark-content-title">
            <div class="affine-bookmark-content-title-icon">${titleIcon}</div>
            <div class="affine-bookmark-content-title-text">${titleText}</div>
          </div>
          <div class="affine-bookmark-content-description">
            ${descriptionText}
          </div>
          <div class="affine-bookmark-content-url" @click=${this._openLink}>
            <span>${url}</span>
            <div class="affine-bookmark-content-url-icon">${OpenIcon}</div>
          </div>
        </div>
        <div class="affine-bookmark-banner">${bannerImage}</div>
      </div>
    `;
    }
};
BookmarkCard.styles = styles;
__decorate([
    state()
], BookmarkCard.prototype, "bookmark", void 0);
BookmarkCard = __decorate([
    customElement('bookmark-card')
], BookmarkCard);
export { BookmarkCard };
//# sourceMappingURL=bookmark-card.js.map