import { html, LitElement } from "lit";
import { customElement, property, state } from "lit/decorators.js";
import { Endpoint } from "@supersoniks/concorde/utils";
import { DataProviderKey } from "@supersoniks/concorde/core/utils/dataProviderKey";
import {
  get,
  publish,
  subscribe,
  ApiGetResult,
} from "@supersoniks/concorde/decorators";

/** Same API as the queue demo: https://geo.api.gouv.fr/ */
type City = { nom: string; code: string };

const endpoint = new Endpoint<City[], { limit: number }>(
  "communes?limit=$limit&fields=nom,code",
);

/** Même path que l’endpoint ; type = charge utile `@get` pour `@publish`. */
const dpKey = new DataProviderKey<ApiGetResult<City[]>>(endpoint.path);

const tagName = "sonic-example"; // For Astro.build
@customElement(tagName)
export class SonicComponent extends LitElement {
  @property({ type: Number })
  limit = 5;

  @get(endpoint)
  @publish(dpKey)
  geoCommunesPayload?: ApiGetResult<City[]>;

  @state()
  @subscribe(dpKey.result)
  geoCommunesResult?: City[];

  render() {
    return html` <span part="api-get-demo">
      · get: ${JSON.stringify(this.geoCommunesPayload?.result ?? null)} · HTTP
      ${this.geoCommunesPayload?.response?.status ?? "—"} · subscribe:
      ${JSON.stringify(this.geoCommunesResult ?? null)}</span
    >`;
  }
}