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 { LitElement, css, html } from 'lit';
import { customElement, property, query } from 'lit/decorators.js';
import { defaultSettings } from '../storage/settings-save.js';
import { Bubble } from '../utils/bubble.js';
import { cssReset } from '../utils/css-reset.js';
import './play-button.js';
let PlaySettingsDialog = class PlaySettingsDialog extends LitElement {
    constructor() {
        super(...arguments);
        this.allowStorage = false;
        this.remoteRuntimeOrigin = defaultSettings.remoteRuntimeOrigin;
        this.runtimeDebugLogging = false;
        this.sandboxApp = false;
        this.useExperimentalBlocks = false;
        this.useLocalRuntime = false;
        this.useRemoteRuntime = false;
        this.useUIRequest = false;
    }
    open() {
        this._dialog.showModal();
    }
    close() {
        this._dialog.close();
    }
    render() {
        return html `
      <dialog>
        <header>
          <h1>Settings</h1>
          <play-button
            appearance="plain"
            icon="close-outline"
            @click=${this.close}
            size="small"
            title="Close"
          ></play-button>
        </header>

        <p>
          Settings are ${this.allowStorage ? 'saved and ' : ''}not shareable.
        </p>

        <fieldset>
          <legend>Reddit Internal</legend>
          <p>Runtime settings take effect on subsequent execution.</p>
          <label>
            <input
              ?checked="${this.useLocalRuntime}"
              type="checkbox"
              @change=${(ev) => this.dispatchEvent(Bubble('use-local-runtime', ev.currentTarget.checked))}
            />
            Use local runtime. Execute apps locally whenever possible. Default:
            ${onOff(defaultSettings.useLocalRuntime)}.
          </label>
          <label>
            <input
              ?checked="${this.sandboxApp}"
              type="checkbox"
              @change=${(ev) => this.dispatchEvent(Bubble('sandbox-app', ev.currentTarget.checked))}
            />
            Sandbox app execution. Sandboxing is slower but may be more
            production-like. Default: ${onOff(defaultSettings.sandboxApp)}.
          </label>
          <label>
            <input
              ?checked="${this.runtimeDebugLogging}"
              type="checkbox"
              @change=${(ev) => this.dispatchEvent(Bubble('runtime-debug-logging', ev.currentTarget.checked))}
            />
            Enable runtime debug logging. May also require enabling verbose
            DevTools console logs. Default:
            ${onOff(defaultSettings.runtimeDebugLogging)}.
          </label>
          <label>
            <input
              ?checked="${this.useRemoteRuntime}"
              type="checkbox"
              @change=${(ev) => this.dispatchEvent(Bubble('use-remote-runtime', ev.currentTarget.checked))}
            />
            Use remote runtime. Upload on every change and execute apps remotely
            as needed. Default: ${onOff(defaultSettings.useRemoteRuntime)}.
          </label>
          <label>
            <input
              type="text"
              value="${this.remoteRuntimeOrigin}"
              @change=${(ev) => this.dispatchEvent(Bubble('edit-remote-runtime-origin', ev.currentTarget.value))}
            />
            Remote runtime origin. Destination for app uploads and remote
            execution. Default: ${defaultSettings.remoteRuntimeOrigin}.
          </label>
          <label>
            <input
              ?checked="${this.useExperimentalBlocks}"
              type="checkbox"
              @change=${(ev) => this.dispatchEvent(Bubble('use-experimental-blocks', ev.currentTarget.checked))}
            />
            Use experimental blocks. Default:
            ${onOff(defaultSettings.useExperimentalBlocks)}.
          </label>
          <label>
            <input
              ?checked="${this.useUIRequest}"
              type="checkbox"
              @change=${(ev) => this.dispatchEvent(Bubble('use-ui-request', ev.currentTarget.checked))}
            />
            Use UI Request (multithreading). Default:
            ${onOff(defaultSettings.useUIRequest)}.
          </label>
        </fieldset>
      </dialog>
    `;
    }
};
PlaySettingsDialog.styles = css `
    ${cssReset}

    dialog {
      color: var(--color-neutral-content);
      background-color: var(--color-neutral-background);
      box-shadow: var(--shadow-m);

      border-bottom-left-radius: var(--radius);
      border-bottom-right-radius: var(--radius);
      border-top-left-radius: var(--radius);
      border-top-right-radius: var(--radius);

      padding-top: var(--space);
      padding-bottom: var(--space);
      padding-left: var(--space);
      padding-right: var(--space);

      /* No border needed. Dialog background has sufficient contrast against the scrim. */
      border-width: 0;

      /* to-do: breakpoints */
      width: 480px;
      max-width: 90vw;
    }

    dialog::backdrop {
      /* to-do: Update to css variable --color-shade-60 once supported by Chromium and Safari.
      https://bugs.webkit.org/show_bug.cgi?id=263834
      https://bugs.chromium.org/p/chromium/issues/detail?id=827397
      https://stackoverflow.com/a/77393321 */
      background-color: rgba(0, 0, 0, 0.6);
    }

    header {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      row-gap: var(--space);
    }

    h1 {
      color: var(--color-neutral-content-strong);

      /* No margins needed for composition. */
      margin-top: 0;
      margin-bottom: 0;

      /* RPL/Heading Bold/24-HeadingBold */
      font-family: var(--font-family-sans);
      font-size: 24px;
      font-style: normal;
      font-weight: 700;
      line-height: 28px;
      letter-spacing: 0.2px;
    }

    input[type='checkbox'] {
      float: left;
      margin-inline-end: var(--space);
    }

    input[type='text'] {
      display: block;
      width: 100%;
    }

    label {
      cursor: pointer; /* Finger. */
      display: block; /* Each control starts a new block. */
      margin-bottom: var(--space);
    }

    legend {
      font-weight: bold;
    }
  `;
__decorate([
    property({ attribute: 'allow-storage', type: Boolean })
], PlaySettingsDialog.prototype, "allowStorage", void 0);
__decorate([
    property({ attribute: 'remote-runtime-origin' })
], PlaySettingsDialog.prototype, "remoteRuntimeOrigin", void 0);
__decorate([
    property({ attribute: 'runtime-debug-logging', type: Boolean })
], PlaySettingsDialog.prototype, "runtimeDebugLogging", void 0);
__decorate([
    property({ attribute: 'sandbox-app', type: Boolean })
], PlaySettingsDialog.prototype, "sandboxApp", void 0);
__decorate([
    property({ attribute: 'use-experimental-blocks', type: Boolean })
], PlaySettingsDialog.prototype, "useExperimentalBlocks", void 0);
__decorate([
    property({ attribute: 'use-local-runtime', type: Boolean })
], PlaySettingsDialog.prototype, "useLocalRuntime", void 0);
__decorate([
    property({ attribute: 'use-remote-runtime', type: Boolean })
], PlaySettingsDialog.prototype, "useRemoteRuntime", void 0);
__decorate([
    property({ attribute: 'use-ui-request', type: Boolean })
], PlaySettingsDialog.prototype, "useUIRequest", void 0);
__decorate([
    query('dialog')
], PlaySettingsDialog.prototype, "_dialog", void 0);
PlaySettingsDialog = __decorate([
    customElement('play-settings-dialog')
], PlaySettingsDialog);
export { PlaySettingsDialog };
/** Translate a boolean to on / off. */
function onOff(on) {
    return on ? 'on' : 'off';
}
//# sourceMappingURL=play-settings-dialog.js.map