import { r, t, g as s, x, p as weStyles, i } from "./shared-styles-3f37ac87.js";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __decorateClass = (decorators, target, key, kind) => {
  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
  for (var i2 = decorators.length - 1, decorator; i2 >= 0; i2--)
    if (decorator = decorators[i2])
      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
  if (kind && result)
    __defProp(target, key, result);
  return result;
};
let SelectMediaSource = class extends s {
  constructor() {
    super(...arguments);
    this._allSources = [];
  }
  async firstUpdated() {
    this._allSources = await window.electronAPI.getMediaSources();
    console.log("Got media sources: ", this._allSources);
  }
  async sourceSelected(id) {
    console.log("Selected source: ", id);
    await window.electronAPI.sourceSelected(id);
  }
  render() {
    return x`
      <div class="column" style="align-items: center;">
        <h1>Entire Screen</h1>
        <div class="row" style="flex-wrap: wrap; justify-content: center; margin-bottom: 20px;">
          ${this._allSources.filter((source) => source.id.startsWith("screen")).map((source) => {
      return x`
                <div class="column" style="align-items: center;">
                  <div style="font-weight: bold; font-size: 20px; margin-bottom: 5px;">
                    ${source.name}
                  </div>
                  <img
                    class="thumbnail"
                    tabindex="0"
                    @click=${async () => this.sourceSelected(source.id)}
                    @keypress=${async (e) => {
        if (e.key === "Enter") {
          this.sourceSelected(source.id);
        }
      }}
                    src=${source.thumbnail}
                    style="aspec-ratio: ${source.aspectRatio}; height: 200px; margin: 0 10px;"
                  />
                </div>
              `;
    })}
        </div>
        <h1>Window</h1>
        <div class="row" style="flex-wrap: wrap; justify-content: center;">
          ${this._allSources.filter(
      (source) => source.id.startsWith("window") && source.name !== "Select Screen or Window"
    ).map((source) => {
      return x`
                <div class="column" style="align-items: center; height: 300px;">
                  <img
                    class="thumbnail"
                    tabindex="0"
                    @click=${async () => this.sourceSelected(source.id)}
                    @keypress=${async (e) => {
        if (e.key === "Enter") {
          this.sourceSelected(source.id);
        }
      }}
                    src=${source.thumbnail}
                    style="aspec-ratio: ${source.aspectRatio}; height: 200px; margin: 0 10px;"
                  />
                  <div
                    style="font-weight: bold; font-size: 20px; margin-bottom: 5px; max-width: 360px;"
                  >
                    ${source.name}
                  </div>
                </div>
              `;
    })}
        </div>
      </div>
    `;
  }
  static get styles() {
    return [
      weStyles,
      i`
        .thumbnail {
          border-radius: 5px;
          border: 2px solid black;
          cursor: pointer;
        }

        .thumbnail:hover {
          outline: 6px solid #1cb4ef;
        }

        .thumbnail:focus {
          outline: 6px solid #1cb4ef;
        }
      `
    ];
  }
};
__decorateClass([
  r()
], SelectMediaSource.prototype, "_allSources", 2);
SelectMediaSource = __decorateClass([
  t("select-media-source")
], SelectMediaSource);
