import { consume } from "@lit/context";
import { LitElement, css, html } from "lit";
import { customElement } from "lit/decorators.js";

import type { ContextMixinInterface } from "./ContextMixin.js";
import { efContext } from "./efContext.js";
import { playingContext } from "./playingContext.js";

@customElement("ef-toggle-play")
export class EFTogglePlay extends LitElement {
  static styles = [
    css`
      :host {}
      div {
        all: inherit;
      }
    `,
  ];

  @consume({ context: efContext, subscribe: true })
  context?: ContextMixinInterface | null;

  @consume({ context: playingContext, subscribe: true })
  playing = false;

  render() {
    return html`
      <div
        @click=${() => {
          if (this.context) {
            if (this.playing) {
              this.context.pause();
            } else {
              this.context.play();
            }
          }
        }}
      >
        ${
          this.playing
            ? html`<slot name="pause"></slot>`
            : html`<slot name="play"></slot>`
        }
      </div>
    `;
  }

  togglePlay() {
    if (this.context) {
      if (this.playing) {
        this.context.pause();
      } else {
        this.context.play();
      }
    }
  }
}

declare global {
  interface HTMLElementTagNameMap {
    "ef-toggle-play": EFTogglePlay;
  }
}
