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";

@customElement("ef-toggle-loop")
export class EFToggleLoop extends LitElement {
  static styles = [
    css`
      :host {}
    `,
  ];

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

  render() {
    return html`
      <slot @click=${() => {
        if (this.context) {
          this.context.loop = !this.context.loop;
        }
      }}></slot>
    `;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    "ef-toggle-loop": EFToggleLoop;
  }
}
