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_onReset, _PlayPen_onShare, _PlayPen_reportError;
import { LitElement, css, html } from 'lit';
import { customElement, property, query } from 'lit/decorators.js';
import './play-editor.js';
import './play-pen-context-provider.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;
    }
    render() {
        return html `
      <play-pen-context-provider
        ?allow-storage=${this.allowStorage}
        ?allow-url=${this.allowURL}
      >
        <play-pen-header
          @new=${__classPrivateFieldGet(this, _PlayPen_instances, "m", _PlayPen_onReset)}
          @share=${__classPrivateFieldGet(this, _PlayPen_instances, "m", _PlayPen_onShare)}
        ></play-pen-header>
        <main>
          <play-editor><slot /></play-editor>
          <play-preview
            @execution-error=${(ev) => __classPrivateFieldGet(this, _PlayPen_instances, "m", _PlayPen_reportError).call(this, ev.detail)}
          ></play-preview>
        </main>
        <play-pen-footer></play-pen-footer>
      </play-pen-context-provider>
    `;
    }
};
_PlayPen_instances = new WeakSet();
_PlayPen_onReset = function _PlayPen_onReset() {
    this._provider.setName('');
    this._provider.setSrc(this._provider.template ?? '');
    this._editor.setSrc(this._provider.template ?? '');
};
_PlayPen_onShare = function _PlayPen_onShare() {
    // to-do: record to clipboard and show a toast.
    this._provider.save();
};
_PlayPen_reportError = function _PlayPen_reportError(err) {
    // to-do: report errors to users.
    console.error(err);
};
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;

      /* #theme# Light mode color definitions. */
      --rpl-neutral-content-weak: #576f76;
      --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;

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

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

    play-pen-context-provider {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
    }

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

    play-preview {
      width: 343px;
      flex-shrink: 0;
    }

    main {
      display: flex;
      flex-direction: row;
      gap: 24px;
      overflow: clip;
      padding-right: 24px;
      padding-left: 24px;
      height: 100%;
    }
  `;
__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([
    query('play-pen-context-provider')
], PlayPen.prototype, "_provider", void 0);
__decorate([
    query('play-editor')
], PlayPen.prototype, "_editor", void 0);
PlayPen = __decorate([
    customElement('play-pen')
], PlayPen);
export { PlayPen };
