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 __metadata = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
import { html, css, property, } from 'lit-element';
import { classMap } from 'lit-html/directives/class-map';
import WebComponent from '../../helpers/WebComponent';
export default class ArenaEmbedYoutube extends WebComponent {
    handleToggle(e) {
        const event = e;
        if (event.path[0]) {
            const customEvent = new CustomEvent('toggle', {
                detail: event.path[0].checked,
            });
            this.dispatchEvent(customEvent);
        }
    }
    // Render element DOM by returning a `lit-html` template.
    render() {
        if (this.href) {
            return html `<div class=${classMap({ 'embed-youtube': true, 'embed-youtube_border': !!this.border })}>
        <div class="embed-youtube__toggle">
          Border: <input type="checkbox" @change="${this.handleToggle}" ?checked="${this.border}" />
        </div>
        <iframe
          class="embed-youtube-iframe"
          src="${this.href}"
          frameborder="0"
          allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
          width="560"
          height="315"
          allowfullscreen=""
        ></iframe>
      </div>`;
        }
        return undefined;
    }
}
ArenaEmbedYoutube.styles = css `
    :host {
      user-select: none;
    }
    .embed-youtube {
      width: 100%;
      padding-bottom: 56.25%;
      position: relative;
      margin: 0 0 1em;
      background: #ccc;
      overflow: hidden;
    }
    .embed-youtube_border {
      border: 1px solid #ccc;
      border-radius: 0.5rem;
    }
    .embed-youtube-iframe {
      width: 100%;
      height: 100%;
      margin: 0;
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      border: none;
      min-width: 100%;
      width: 0;
      max-width: 100%;
      min-height: 100%;
      height: 0;
      max-height: 100%;
    }

    .embed-youtube__toggle {
      position: absolute;
      z-index: 1;
      background: white;
      border: 1px solid #ccc;
      border-radius: 1rem;
      padding: 0.2rem 1rem;
      left: 1rem;
      top: 1rem;
    }
  `;
__decorate([
    property({
        type: String,
        reflect: true,
    }),
    __metadata("design:type", Object)
], ArenaEmbedYoutube.prototype, "href", void 0);
__decorate([
    property({
        type: Boolean,
    }),
    __metadata("design:type", Object)
], ArenaEmbedYoutube.prototype, "border", void 0);
//# sourceMappingURL=ArenaEmbedYoutube.js.map