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_appendPreviewError, _PlayPen_autoSave, _PlayPen_clearPreviewErrors, _PlayPen_onShare, _PlayPen_save, _PlayPen_setName, _PlayPen_setSrc;
import { LitElement, css, html } from 'lit';
import { customElement, property, query, state } from 'lit/decorators.js';
import { ifDefined } from 'lit/directives/if-defined.js';
import { appEntrypointFilename, compile, newTSEnv, setSource } from '../../bundler/compiler.js';
import { link } from '../../bundler/linker.js';
import blocksGallery from '../../examples/blocks-gallery.example.js';
import helloBlocks from '../../examples/hello-blocks.example.js';
import { PenSave, loadPen, penToHash, savePen } from '../pen-save.js';
import './play-editor.js';
import './play-pen-footer.js';
import './play-pen-header.js';
import './play-preview.js';
/**
 * A complete and standalone playground: an editor, a runtime and client, a
 * preview and toolbar. Accepts a slotted template.
 */
let PlayPen = class PlayPen extends LitElement {
    constructor() {
        super(...arguments);
        _PlayPen_instances.add(this);
        /**
         * Allow loading and saving from LocalStorage. Do not enable for multiple
         * playgrounds on the same document.
         */
        this.allowStorage = false;
        /**
         * Allow loading and saving from URL hash. Loading from hash has precedence
         * over LocalStorage. Do not enable for multiple playgrounds on the same
         * document.
         */
        this.allowURL = false;
        this.srcByLabel = { 'Hello Blocks!': helloBlocks, 'Blocks Gallery': blocksGallery };
        /** Execution desktop / mobile render mode. */
        this._desktop = false;
        this._diagnostics = { previewErrs: [] };
        _PlayPen_env.set(this, newTSEnv()
        /** Program title. */ );
        /** Program title. */ this._name = '';
    }
    connectedCallback() {
        super.connectedCallback();
        let pen;
        if (this.allowURL)
            pen = loadPen(globalThis.location);
        if (this.allowStorage)
            pen ?? (pen = loadPen(globalThis.localStorage));
        if (!pen)
            return;
        __classPrivateFieldGet(this, _PlayPen_instances, "m", _PlayPen_setSrc).call(this, pen.src);
        __classPrivateFieldGet(this, _PlayPen_instances, "m", _PlayPen_setName).call(this, pen.name);
    }
    render() {
        return html `<play-pen-header
        name=${this._name}
        .srcByLabel=${this.srcByLabel}
        @edit-name=${(ev) => __classPrivateFieldGet(this, _PlayPen_instances, "m", _PlayPen_setName).call(this, ev.detail)}
        @edit-src=${(ev) => {
            __classPrivateFieldGet(this, _PlayPen_instances, "m", _PlayPen_setSrc).call(this, ev.detail);
            this._editor.setSrc(ev.detail);
        }}
        @share=${__classPrivateFieldGet(this, _PlayPen_instances, "m", _PlayPen_onShare)}
      ></play-pen-header>
      <main>
        <play-editor
          .env=${__classPrivateFieldGet(this, _PlayPen_env, "f")}
          src=${ifDefined(this._src)}
          @edit=${(ev) => __classPrivateFieldGet(this, _PlayPen_instances, "m", _PlayPen_setSrc).call(this, ev.detail)}
          @edit-template=${(ev) => {
            this.srcByLabel = { ['Default']: ev.detail, ...this.srcByLabel };
            if (this._src != null)
                return;
            // If no source was restored, use the template.
            __classPrivateFieldGet(this, _PlayPen_instances, "m", _PlayPen_setSrc).call(this, ev.detail);
            this._editor.setSrc(ev.detail);
        }}
          ><slot></slot
        ></play-editor>
        <play-preview
          .bundle=${this._bundle}
          ?desktop=${this._desktop}
          scheme=${ifDefined(this._scheme)}
          @clear-errors=${() => __classPrivateFieldGet(this, _PlayPen_instances, "m", _PlayPen_clearPreviewErrors).call(this)}
          @error=${(ev) => __classPrivateFieldGet(this, _PlayPen_instances, "m", _PlayPen_appendPreviewError).call(this, ev.detail)}
        ></play-preview>
      </main>
      <play-pen-footer
        ?desktop=${this._desktop}
        .diagnostics=${this._diagnostics}
        scheme=${ifDefined(this._scheme)}
        @preview-desktop=${(ev) => (this._desktop = ev.detail)}
        @preview-scheme=${(ev) => (this._scheme = ev.detail)}
      ></play-pen-footer>`;
    }
};
_PlayPen_env = new WeakMap();
_PlayPen_instances = new WeakSet();
_PlayPen_appendPreviewError = function _PlayPen_appendPreviewError(err) {
    this._diagnostics = {
        ...this._diagnostics,
        previewErrs: [...this._diagnostics.previewErrs, err]
    };
};
_PlayPen_autoSave = function _PlayPen_autoSave() {
    if (this.allowStorage)
        savePen(undefined, globalThis.localStorage, PenSave(this._name, this._src ?? ''));
};
_PlayPen_clearPreviewErrors = function _PlayPen_clearPreviewErrors() {
    if (this._diagnostics)
        this._diagnostics.previewErrs.length = 0;
    this._diagnostics = { ...this._diagnostics };
};
_PlayPen_onShare = async function _PlayPen_onShare() {
    // to-do: record to clipboard and show a toast.
    __classPrivateFieldGet(this, _PlayPen_instances, "m", _PlayPen_save).call(this);
    const url = new URL(globalThis.location.href);
    url.hash = penToHash(PenSave(this._name, this._src ?? ''));
    await navigator.clipboard.writeText(url.href);
};
_PlayPen_save = function _PlayPen_save() {
    savePen(this.allowURL ? globalThis.location : undefined, this.allowStorage ? globalThis.localStorage : undefined, PenSave(this._name, this._src ?? ''));
};
_PlayPen_setName = function _PlayPen_setName(name) {
    this._name = name;
    __classPrivateFieldGet(this, _PlayPen_instances, "m", _PlayPen_autoSave).call(this);
};
_PlayPen_setSrc = function _PlayPen_setSrc(src) {
    this._src = src;
    setSource(__classPrivateFieldGet(this, _PlayPen_env, "f"), src);
    __classPrivateFieldGet(this, _PlayPen_env, "f").updateFile(appEntrypointFilename, src || ' '); // empty strings trigger file deletion!
    // Skip blank source.
    if (!/^\s*$/.test(src))
        this._bundle = link(compile(__classPrivateFieldGet(this, _PlayPen_env, "f")));
    __classPrivateFieldGet(this, _PlayPen_instances, "m", _PlayPen_autoSave).call(this);
};
PlayPen.styles = css `
    :host {
      /* to-do: Support light and dark mode. */
      /* color-scheme: light dark; */

      /* Global color definitions. */
      --rpl-global-orangered: #ff4500;
      --rpl-orangered-100: #ffede5;
      --rpl-orangered-500: #d93a00;

      /*  #theme# Duck branding */
      --color-background: #fffcf0;

      /* #theme# Light mode color definitions. */
      --rpl-neutral-content-weak: #576f76;
      --rpl-neutral-content: #2a3c42;
      --rpl-neutral-content-strong: #0f1a1c;
      --rpl-neutral-background-weak: #f9fafa;
      --rpl-neutral-background-weak-hovered: #f2f4f5;
      --rpl-neutral-background: #ffffff;
      --rpl-neutral-background-hovered: #f9fafa;
      --rpl-neutral-border: rgba(0, 0, 0, 0.2);
      --rpl-brand-background: #d93a00;
      --rpl-brand-background-hovered: #962900;
      --rpl-brand-background-pressed: #7e2200;
      --rpl-brand-onBackground: #ffffff;
      --rpl-secondary-plain: #0f1a1c;
      --rpl-secondary-background: #eaedef;
      --rpl-secondary-background-hovered: #e2e7e9;
      --rpl-secondary-background-pressed: #bec2c4;
      --rpl-secondary-onBackground: #000000;
      --rpl-interactive-content-disabled: rgba(0, 0, 0, 0.25);
      --rpl-interactive-background-disabled: rgba(0, 0, 0, 0.05);

      /* #theme# Light mode. */
      color: #213547;
      background-color: var(--color-background);

      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
    }

    @media (prefers-color-scheme: dark) {
      :host {
        /* #theme# Dark mode. */
        /* color: rgba(255, 255, 255, 0.87);
        background-color: #242424; */
      }
    }

    play-editor {
      width: 100%;
      flex-grow: 1;
      flex-shrink: 1;
    }

    play-preview {
      flex-shrink: 0;
    }

    main {
      column-gap: 24px;
      display: flex;
      flex-direction: row;
      overflow: clip;
      padding-right: 24px;
      padding-left: 24px;
      row-gap: 24px;
      height: 100%;
      background-color: var(--color-background);
    }
  `;
__decorate([
    property({ attribute: 'allow-storage', type: Boolean })
], PlayPen.prototype, "allowStorage", void 0);
__decorate([
    property({ attribute: 'allow-url', type: Boolean })
], PlayPen.prototype, "allowURL", void 0);
__decorate([
    property({ attribute: false })
], PlayPen.prototype, "srcByLabel", void 0);
__decorate([
    state()
], PlayPen.prototype, "_bundle", void 0);
__decorate([
    state()
], PlayPen.prototype, "_desktop", void 0);
__decorate([
    state()
], PlayPen.prototype, "_diagnostics", void 0);
__decorate([
    query('play-editor')
], PlayPen.prototype, "_editor", void 0);
__decorate([
    state()
], PlayPen.prototype, "_name", void 0);
__decorate([
    state()
], PlayPen.prototype, "_scheme", void 0);
__decorate([
    state()
], PlayPen.prototype, "_src", void 0);
PlayPen = __decorate([
    customElement('play-pen')
], PlayPen);
export { PlayPen };
//# sourceMappingURL=play-pen.js.map