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 } from 'lit/decorators.js';
import { Bubble } from '../utils/bubble.js';
import { cssReset } from '../utils/css-reset.js';
import './play-button.js';
import './play-dropdown-menu.js';
import './play-list-item.js';
/* Available preview sizes */
const sizes = [
    [288, '288 - Mobile small'],
    [343, '343 - Mobile'],
    [400, '400 - Mobile large'],
    [512, '512 - Desktop Small'],
    [718, '718 - Desktop Large']
];
let PlayPreviewControls = class PlayPreviewControls extends LitElement {
    constructor() {
        super(...arguments);
        this.previewWidth = 718;
        this.scheme = matchMedia('(prefers-color-scheme: dark)')
            .matches
            ? 'dark'
            : 'light';
    }
    render() {
        return html `
      <play-button
        appearance="plain"
        size="small"
        icon="restart-outline"
        title="Restart the preview"
        label="Restart"
        @click=${() => this.dispatchEvent(Bubble('preview-reset', undefined))}
      ></play-button>

      <play-dropdown-menu direction="up">
        <div slot="trigger">
          <play-button
            appearance="plain"
            size="small"
            icon="resize-horizontal-outline"
            title="Select preview width"
            label=${this.previewWidth}
          ></play-button>
        </div>
        <div slot="menu">
          ${sizes.map(([width, label]) => html `
              <play-list-item
                label=${label}
                @click=${() => this.dispatchEvent(Bubble('preview-width', width))}
              ></play-list-item>
            `)}
        </div>
      </play-dropdown-menu>

      <play-button
        appearance="plain"
        size="small"
        icon=${this.scheme === 'dark' ? 'night-outline' : 'day-outline'}
        title="Toggle the scheme"
        label=${this.scheme === 'dark' ? 'Dark' : 'Light'}
        @click=${() => this.dispatchEvent(Bubble('preview-scheme', this.scheme === 'dark' ? 'light' : 'dark'))}
      ></play-button>
    `;
    }
};
PlayPreviewControls.styles = css `
    ${cssReset}

    :host {
      display: flex;
      flex-direction: row;
      column-gap: 8px;
    }
  `;
__decorate([
    property({ type: Number })
], PlayPreviewControls.prototype, "previewWidth", void 0);
__decorate([
    property()
], PlayPreviewControls.prototype, "scheme", void 0);
PlayPreviewControls = __decorate([
    customElement('play-preview-controls')
], PlayPreviewControls);
export { PlayPreviewControls };
//# sourceMappingURL=play-preview-controls.js.map