import type { TemplateResult } from "lit";
import { css, html, LitElement } from "lit";
import { customElement, property } from "lit/decorators";
import { stringCompare } from "../../../../common/string/compare";
import { fireEvent } from "../../../../common/dom/fire_event";
import type { HomeAssistant } from "../../../../types";

interface EventListenerCount {
  event: string;
  listener_count: number;
}

@customElement("events-list")
class EventsList extends LitElement {
  @property({ attribute: false }) public hass!: HomeAssistant;

  @property({ attribute: false }) public events: EventListenerCount[] = [];

  protected render(): TemplateResult {
    return html`
      <ul>
        ${this.events.map(
          (event) => html`
            <li>
              <a href="#" @click=${this._eventSelected} .event=${event.event}
                >${event.event}</a
              >
              <span>
                ${this.hass.localize(
                  "ui.panel.config.tools.tabs.events.count_listeners",
                  {
                    count: event.listener_count,
                  }
                )}</span
              >
            </li>
          `
        )}
      </ul>
    `;
  }

  protected async firstUpdated() {
    const events = await this.hass.callApi<EventListenerCount[]>(
      "GET",
      "events"
    );
    this.events = events.sort((e1, e2) =>
      stringCompare(e1.event, e2.event, this.hass.locale.language)
    );
  }

  private _eventSelected(ev: Event) {
    ev.preventDefault();
    const event: string = (ev.currentTarget! as any).event;
    fireEvent(this, "event-selected", { eventType: event });
  }

  static styles = css`
    ul {
      margin: 0;
      padding: 0;
    }

    li {
      list-style: none;
      line-height: var(--ha-line-height-expanded);
    }

    a {
      color: var(--primary-color);
    }
  `;
}

declare global {
  interface HTMLElementTagNameMap {
    "events-list": EventsList;
  }
  interface HASSDomEvents {
    "event-selected": { eventType: string };
  }
}
