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 '../_common/components/embed-card/embed-card-caption.js';
import { PathFinder } from '@blockeditor/block-std';
import { assertExists } from '@blockeditor/global/utils';
import { flip, offset } from '@floating-ui/dom';
import { html, nothing } from 'lit';
import { customElement, property, query, state } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { ref } from 'lit/directives/ref.js';
import { styleMap } from 'lit/directives/style-map.js';
import { HoverController } from '../_common/components/hover/controller.js';
import { EMBED_CARD_HEIGHT, EMBED_CARD_WIDTH } from '../_common/consts.js';
import { EmbedBlockElement } from '../_common/embed-block-helper/embed-block-element.js';
import { OpenIcon } from '../_common/icons/text.js';
import { getEmbedCardIcons } from '../_common/utils/url.js';
import { youtubeUrlRegex, } from './embed-youtube-model.js';
import { styles, YoutubeIcon } from './styles.js';
import { refreshEmbedYoutubeUrlData } from './utils.js';
let EmbedYoutubeBlockComponent = class EmbedYoutubeBlockComponent extends EmbedBlockElement {
    constructor() {
        super(...arguments);
        this._cardStyle = 'video';
        this.loading = false;
        this._showOverlay = true;
        this.showCaption = false;
        this._isDragging = false;
        this.open = () => {
            let link = this.model.url;
            if (!link.match(/^[a-zA-Z]+:\/\//)) {
                link = 'https://' + link;
            }
            window.open(link, '_blank');
        };
        this.refreshData = () => {
            refreshEmbedYoutubeUrlData(this).catch(console.error);
        };
        this._whenHover = new HoverController(this, ({ abortController }) => {
            return {
                template: html `
        <style>
          :host {
            z-index: 1;
          }
        </style>
        <embed-card-toolbar
          .model=${this.model}
          .block=${this}
          .host=${this.host}
          .abortController=${abortController}
          .std=${this.std}
        ></embed-card-toolbar>
      `,
                computePosition: {
                    referenceElement: this._youtubeBlockEl,
                    placement: 'top-end',
                    middleware: [flip(), offset(4)],
                    autoUpdate: true,
                },
            };
        });
    }
    _selectBlock() {
        const selectionManager = this.host.selection;
        const blockSelection = selectionManager.create('block', {
            path: this.path,
        });
        selectionManager.setGroup('note', [blockSelection]);
    }
    _handleClick() {
        if (!this.isInSurface) {
            this._selectBlock();
        }
    }
    connectedCallback() {
        super.connectedCallback();
        if (!!this.model.caption && !!this.model.caption.length) {
            this.showCaption = true;
        }
        if (!this.model.videoId) {
            this.page.withoutTransact(() => {
                const url = this.model.url;
                const urlMatch = url.match(youtubeUrlRegex);
                if (urlMatch) {
                    const [, videoId] = urlMatch;
                    this.page.updateBlock(this.model, {
                        videoId,
                    });
                }
            });
        }
        if (!this.model.description && !this.model.title) {
            this.page.withoutTransact(() => {
                this.refreshData();
            });
        }
        this.disposables.add(this.model.propsUpdated.on(({ key }) => {
            this.requestUpdate();
            if (key === 'url')
                this.refreshData();
        }));
        // this is required to prevent iframe from capturing pointer events
        this.disposables.add(this.std.selection.slots.changed.on(sels => {
            if (this._isDragging)
                return;
            this._showOverlay = !sels.some(sel => PathFinder.equals(sel.path, this.path));
        }));
        // this is required to prevent iframe from capturing pointer events
        this.handleEvent('pointerMove', ctx => {
            this._isDragging = ctx.get('pointerState').dragging;
            if (this._isDragging)
                this._showOverlay = true;
        });
        if (this.isInSurface) {
            const surface = this.surface;
            assertExists(surface);
            this.disposables.add(surface.edgeless.slots.elementUpdated.on(({ id }) => {
                if (id === this.model.id) {
                    this.requestUpdate();
                }
            }));
        }
    }
    render() {
        const { image, title = 'YouTube', description, creator, creatorImage, videoId, style, } = this.model;
        this._cardStyle = style;
        this._width = EMBED_CARD_WIDTH[this._cardStyle];
        this._height = EMBED_CARD_HEIGHT[this._cardStyle];
        const loading = this.loading;
        const { LoadingIcon, EmbedCardBannerIcon } = getEmbedCardIcons();
        const titleIcon = loading ? LoadingIcon : YoutubeIcon;
        const titleText = loading ? 'Loading...' : title;
        const descriptionText = loading ? '' : description;
        const bannerImage = !loading && image
            ? html `<object type="image/webp" data=${image}>
            ${EmbedCardBannerIcon}
          </object>`
            : EmbedCardBannerIcon;
        const creatorImageEl = !loading && creatorImage
            ? html `<object type="image/webp" data=${creatorImage}>
            ${EmbedCardBannerIcon}
          </object>`
            : nothing;
        return this.renderEmbed(() => html `
        <div
          style=${styleMap({
            position: 'relative',
        })}
        >
          <div
            ${this.isInSurface ? nothing : ref(this._whenHover.setReference)}
            class=${classMap({
            'affine-embed-youtube-block': true,
            loading,
        })}
            @click=${this._handleClick}
          >
            <div class="affine-embed-youtube-video">
              ${videoId
            ? html `
                    <div class="affine-embed-youtube-video-iframe-container">
                      <iframe
                        id="ytplayer"
                        type="text/html"
                        src=${`https://www.youtube.com/embed/${videoId}`}
                        frameborder="0"
                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                        allowfullscreen
                      ></iframe>
                      <div
                        class=${classMap({
                'affine-embed-youtube-video-iframe-overlay': true,
                hide: !this._showOverlay,
            })}
                      ></div>
                    </div>
                  `
            : bannerImage}
            </div>
            <div class="affine-embed-youtube-content">
              <div class="affine-embed-youtube-content-header">
                <div class="affine-embed-youtube-content-title-icon">
                  ${titleIcon}
                </div>

                <div class="affine-embed-youtube-content-title-text">
                  ${titleText}
                </div>

                <div class="affine-embed-youtube-content-creator-image">
                  ${creatorImageEl}
                </div>

                <div class="affine-embed-youtube-content-creator-text">
                  ${creator}
                </div>
              </div>

              <div class="affine-embed-youtube-content-description">
                ${descriptionText}
              </div>

              <div class="affine-embed-youtube-content-url" @click=${this.open}>
                <span>www.youtube.com</span>

                <div class="affine-embed-youtube-content-url-icon">
                  ${OpenIcon}
                </div>
              </div>
            </div>
          </div>

          <embed-card-caption
            .block=${this}
            .display=${this.showCaption}
            @blur=${() => {
            if (!this.model.caption)
                this.showCaption = false;
        }}
          ></embed-card-caption>

          ${this.selected?.is('block')
            ? html `<affine-block-selection></affine-block-selection>`
            : nothing}
        </div>
      `);
    }
};
EmbedYoutubeBlockComponent.styles = styles;
__decorate([
    property({ attribute: false })
], EmbedYoutubeBlockComponent.prototype, "loading", void 0);
__decorate([
    state()
], EmbedYoutubeBlockComponent.prototype, "_showOverlay", void 0);
__decorate([
    state()
], EmbedYoutubeBlockComponent.prototype, "showCaption", void 0);
__decorate([
    query('.affine-embed-youtube-block')
], EmbedYoutubeBlockComponent.prototype, "_youtubeBlockEl", void 0);
__decorate([
    query('embed-card-caption')
], EmbedYoutubeBlockComponent.prototype, "captionElement", void 0);
EmbedYoutubeBlockComponent = __decorate([
    customElement('affine-embed-youtube-block')
], EmbedYoutubeBlockComponent);
export { EmbedYoutubeBlockComponent };
//# sourceMappingURL=embed-youtube-block.js.map