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;
};
var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
};
var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
    if (kind === "m") throw new TypeError("Private method is not writable");
    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
};
var _PlayPreview_meta;
import penWorker from '@devvit/previews/dist/pen.worker.min.js';
import { BrowserLiteClient } from '@devvit/runtime-lite/BrowserLiteClient.js';
import { LitElement, css, html } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import { Bubble } from '../bubble.js';
import '@devvit/previews/dist/devvit-preview.js';
/**
 * The rendered output of Devvit program under various parameters.
 * @fires {PreviewError} error
 * @fires {undefined} clear-errors
 * @fires {unknown} devvit-ui-error
 */
let PlayPreview = class PlayPreview extends LitElement {
    constructor() {
        super(...arguments);
        this._client = new BrowserLiteClient(new Blob([penWorker], { type: 'text/javascript' }), (type, err) => this.dispatchEvent(Bubble('error', { type, err })));
        _PlayPreview_meta.set(this, {
            'devvit-app-user': { values: ['t2_appuser'] },
            'devvit-subreddit': { values: ['t5_devvit'] },
            'devvit-user': { values: ['t2_user'] }
        });
    }
    static get styles() {
        return css `
      .preview {
        /* Hide overflow on corners */
        overflow: hidden;
        border-width: var(--border-width);
        border-style: solid;
        border-color: var(--color-neutral-border);
        border-radius: 16px;
        min-height: 320px;
        box-shadow: 0px 1px 2px 0px var(--color-shade-25);

        /* When the background is visible, the preview is loading. */
        background-color: var(--color-interactive-background);
        background-image: repeating-linear-gradient(
          -45deg,
          var(--color-interactive-background),
          var(--color-interactive-background) 18px,
          var(--color-interactive-background-disabled) 18px,
          var(--color-interactive-background-disabled) 32px
        );
        background-position-x: 0;
        background-position-y: 200%;
        min-width: 288px;
        transition-duration: 0.2s;
        transition-property: width;
        transition-timing-function: ease-out;
      }

      :host([previewWidth='288']) .preview {
        width: 288px;
      }
      :host([previewWidth='343']) .preview {
        width: 343px;
      }
      :host([previewWidth='400']) .preview {
        width: 400px;
      }
      :host([previewWidth='512']) .preview {
        width: 512px;
      }
      :host([previewWidth='718']) .preview {
        width: 718px;
      }
    `;
    }
    async reset() {
        if (!this.bundle)
            return;
        this._client.quit();
        this.dispatchEvent(Bubble('clear-errors', undefined));
        try {
            await this._client.loadBundle(this.bundle);
        }
        catch (err) {
            this.dispatchEvent(Bubble('error', { type: 'Error', err }));
        }
        // Re-render the preview.
        __classPrivateFieldSet(this, _PlayPreview_meta, { ...__classPrivateFieldGet(this, _PlayPreview_meta, "f") }, "f");
        this.requestUpdate();
    }
    disconnectedCallback() {
        this._client.quit();
        super.disconnectedCallback();
    }
    render() {
        // to-do: don't override toaster's --rem16 to offset the toast. Upstream a
        // variable.
        return html `<div class="preview">
      ${this.bundle &&
            html `<devvit-preview
        @devvit-ui-error=${(ev) => this.dispatchEvent(Bubble('error', { type: 'Error', err: ev.detail }))}
        .meta="${__classPrivateFieldGet(this, _PlayPreview_meta, "f")}"
        .client=${this._client}
        .scheme=${this.scheme}
        style="--rem16: 50px;"
      ></devvit-preview>`}
    </div>`;
    }
    async willUpdate(props) {
        if (props.has('bundle'))
            await this.reset();
        else
            this.requestUpdate();
    }
};
_PlayPreview_meta = new WeakMap();
__decorate([
    property({ attribute: false })
], PlayPreview.prototype, "bundle", void 0);
__decorate([
    property({ type: Number })
], PlayPreview.prototype, "previewWidth", void 0);
__decorate([
    property()
], PlayPreview.prototype, "scheme", void 0);
__decorate([
    state()
], PlayPreview.prototype, "_client", void 0);
PlayPreview = __decorate([
    customElement('play-preview')
], PlayPreview);
export { PlayPreview };
//# sourceMappingURL=play-preview.js.map