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 { openURL } from '../utils/open-url.js';
import './play-button.js';
import './play-export-dialog.js';
import './play-icon/play-icon.js';
import './play-logo/play-logo.js';
import './play-new-pen-button.js';
import './play-resizable-text-input.js';
import './play-settings-dialog.js';
let PlayPenHeader = class PlayPenHeader extends LitElement {
    constructor() {
        super(...arguments);
        this.allowStorage = false;
        this.name = '';
        this.remoteRuntimeOrigin = defaultSettings.remoteRuntimeOrigin;
        this.runtimeDebugLogging = false;
        this.sandboxApp = false;
        this.url = '';
        this.useExperimentalBlocks = false;
        this.useUIRequest = false;
        this.useLocalRuntime = false;
        this.useRemoteRuntime = false;
    }
    render() {
        return html `
      <header>
        <div class="titling">
          <play-logo></play-logo>
          <play-resizable-text-input
            @edit-text=${(ev) => this.dispatchEvent(Bubble('edit-name', ev.detail))}
            placeholder="Untitled"
            .text=${this.name}
          ></play-resizable-text-input>
        </div>
        <div class="actions">
          <play-new-pen-button
            size="small"
            .srcByLabel=${this.srcByLabel}
          ></play-new-pen-button
          ><play-button
            appearance="bordered"
            size="small"
            icon="reading-outline"
            title="Open Documentation"
            label="Docs"
            @click=${() => openURL('https://developers.reddit.com/docs')}
          ></play-button
          ><play-button
            appearance="bordered"
            size="small"
            icon="download-outline"
            title="Export Pen"
            label="Export"
            @click=${() => this._export.open()}
          ></play-button
          ><play-button
            appearance="bordered"
            size="small"
            title=":play Settings"
            label="Settings"
            @click=${() => this._settings.open()}
          ></play-button
          ><play-button
            appearance="orangered"
            size="small"
            icon="share-new-outline"
            title="Copy URL to Clipboard"
            label="Share"
            @click=${() => this.dispatchEvent(Bubble('share', undefined))}
          ></play-button>
        </div>
      </header>
      <play-export-dialog url=${this.url}></play-export-dialog>
      <play-settings-dialog
        ?allow-storage=${this.allowStorage}
        remote-runtime-origin=${this.remoteRuntimeOrigin}
        ?runtime-debug-logging=${this.runtimeDebugLogging}
        ?sandbox-app=${this.sandboxApp}
        ?use-experimental-blocks=${this.useExperimentalBlocks}
        ?use-ui-request=${this.useUIRequest}
        ?use-local-runtime=${this.useLocalRuntime}
        ?use-remote-runtime=${this.useRemoteRuntime}
      ></play-settings-dialog>
    `;
    }
};
PlayPenHeader.styles = css `
    ${cssReset}

    header {
      padding-top: 16px;
      padding-right: 16px;
      padding-bottom: 16px;
      padding-left: 16px;
      display: flex;
      flex-direction: row;
      column-gap: 32px;
      justify-content: space-between;
      align-items: center;
      background-color: var(--color-background);
    }

    .titling {
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      column-gap: 8px;
      row-gap: 8px;
    }

    play-logo {
      flex-shrink: 0;
    }

    .actions {
      display: flex;
      flex-direction: row;
      column-gap: 8px;
      align-items: center;
    }
  `;
__decorate([
    property({ attribute: 'allow-storage', type: Boolean })
], PlayPenHeader.prototype, "allowStorage", void 0);
__decorate([
    property()
], PlayPenHeader.prototype, "name", void 0);
__decorate([
    property({ attribute: false })
], PlayPenHeader.prototype, "srcByLabel", void 0);
__decorate([
    property({ attribute: 'remote-runtime-origin' })
], PlayPenHeader.prototype, "remoteRuntimeOrigin", void 0);
__decorate([
    property({ attribute: 'runtime-debug-logging', type: Boolean })
], PlayPenHeader.prototype, "runtimeDebugLogging", void 0);
__decorate([
    property({ attribute: 'sandbox-app', type: Boolean })
], PlayPenHeader.prototype, "sandboxApp", void 0);
__decorate([
    property()
], PlayPenHeader.prototype, "url", void 0);
__decorate([
    property({ attribute: 'use-experimental-blocks', type: Boolean })
], PlayPenHeader.prototype, "useExperimentalBlocks", void 0);
__decorate([
    property({ attribute: 'use-ui-request', type: Boolean })
], PlayPenHeader.prototype, "useUIRequest", void 0);
__decorate([
    property({ attribute: 'use-local-runtime', type: Boolean })
], PlayPenHeader.prototype, "useLocalRuntime", void 0);
__decorate([
    property({ attribute: 'use-remote-runtime', type: Boolean })
], PlayPenHeader.prototype, "useRemoteRuntime", void 0);
__decorate([
    query('play-export-dialog')
], PlayPenHeader.prototype, "_export", void 0);
__decorate([
    query('play-settings-dialog')
], PlayPenHeader.prototype, "_settings", void 0);
PlayPenHeader = __decorate([
    customElement('play-pen-header')
], PlayPenHeader);
export { PlayPenHeader };
//# sourceMappingURL=play-pen-header.js.map