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 _PlayPen_instances, _PlayPen_env, _PlayPen_build;
import * as tsvfs from '@typescript/vfs';
import { LitElement, css, html } from 'lit';
import { customElement, eventOptions, queryAssignedElements, state } from 'lit/decorators.js';
import { appEntrypointFilename, compile, newTSEnv } from '../../bundler/compiler.js';
import { link } from '../../bundler/linker.js';
import { unindent } from '../../utils/unindent.js';
import './play-editor.js';
import './play-preview.js';
/**
 * A complete and standalone playground: an editor, a runtime and client, a
 * preview and toolbar.
 */
let PlayPen = class PlayPen extends LitElement {
    constructor() {
        super(...arguments);
        _PlayPen_instances.add(this);
        _PlayPen_env.set(this, newTSEnv());
    }
    render() {
        return html `
      <div>
        <play-editor
          @edit=${(ev) => __classPrivateFieldGet(this, _PlayPen_instances, "m", _PlayPen_build).call(this, ev.detail)}
          .env=${__classPrivateFieldGet(this, _PlayPen_env, "f")}
        ></play-editor>
        <play-preview .bundle=${this._bundle}></play-preview>
      </div>
      <slot @slotchange=${this._onSlotChange}></slot>
    `;
    }
    _onSlotChange() {
        // If <script>...</script> exists, get the program inside.
        const src = unindent(this._scripts[0]?.innerText ?? '');
        __classPrivateFieldGet(this, _PlayPen_instances, "m", _PlayPen_build).call(this, src);
    }
};
_PlayPen_env = new WeakMap();
_PlayPen_instances = new WeakSet();
_PlayPen_build = function _PlayPen_build(src) {
    __classPrivateFieldGet(this, _PlayPen_env, "f").updateFile(appEntrypointFilename, src);
    this._bundle = link(compile(__classPrivateFieldGet(this, _PlayPen_env, "f")));
};
PlayPen.styles = css `
    div {
      display: flex;
      flex-direction: column;

      /* Fill available space. */
      height: 100%;
    }

    play-editor {
      /* Occupy available space. */
      flex-shrink: 1;

      /** The editor can be shrunk. */
      flex-grow: 1;
      min-height: 0;
    }
  `;
__decorate([
    queryAssignedElements({ selector: 'script[type="application/devvit"]' })
], PlayPen.prototype, "_scripts", void 0);
__decorate([
    state()
], PlayPen.prototype, "_bundle", void 0);
__decorate([
    eventOptions({ once: true })
], PlayPen.prototype, "_onSlotChange", null);
PlayPen = __decorate([
    customElement('play-pen')
], PlayPen);
export { PlayPen };
