import { css, html, LitElement, nothing } from "lit";
import { customElement, property } from "lit/decorators.js";
import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
import Fetcher from "@supersoniks/concorde/core/mixins/Fetcher";
import { LoaderMode } from "../../ui/loader/loader";
import { TemplatesContainer } from "@supersoniks/concorde/mixins";
import { templateContent } from "lit/directives/template-content.js";
import { DirectiveResult } from "lit/async-directive.js";
const tagName = "sonic-fetch"; // For Astro.build
/**
 * ###Fetch charge un contenu via un appel d'api web.
 * Extends mixins : Fetcher, [Subscriber](./?path=/docs/miscallenous-🔔-subscriber--page)
 * 
 * #### Configuration via les attributs
 * 
 * | nom          | sur quelle balise | Description | Exemple de valeur | défaut / requis |
 * | -------------------------------------------------------------------------------------- |
 * | serviceURL   |Fetcher ou un de ses parents | URL de base des services. | http://la-billetterie.net/api/v2 | domain du site |
 * | endpoint   |Fetcher | point d'accès d'un service | user/2 | valeur de l'attribut dataProvider |
 * | dataProvider  |Fetcher ou un de ses parents | Identifiant d'un publisher qui stock les données, voir [subscriber](./?path=/docs/miscallenous-🔔-subscriber--page). | billetterie/user/2 | *REQUIS* |
 * | headersDataProvider  |Fetcher ou un de ses parents | Identifiant d'un publisher qui stock les données destinées à être envoyées en entêtes de la requetes | MyCoockieHEaders | null |
 * | key  |Fetcher  | extrait une sous propriété de la donnée chargée avant de l'assignée à son publisher | ma.data | null |
 * 
 * *Si la données est `{ma:{data:{a:1,b:2}}}` et `key="ma.data"`, la données disponible dans le composant sera `{a:1, b:2}`*
 
 #### Intégration auto de basic auth (pour tester une api qui nécessite une authentification) 
 
 * Fetch utilise le service pour générer le token et l'ajoute au header de l'appel qui récupère les données.

 * | nom           | sur quelle balise | Description | Exemple de valeur | défaut / requis |
 * | -------------------------------------------------------------------------------------- |
 * | userName      | Fetcher ou un de ses parents | Nom de l'utilisateur | DjuDju | null |
 * | password      | Fetcher ou un de ses parents | mot de passe | pom_549 | null |
 * | tokenProvider | Fetcher ou un de ses parents | point d'accès du service fournissant le token | auth | null |
 * | token | Fetcher ou un de ses parents | A fournir à la place des autres attributs si on le possède | q<d34gb | null |
 
 #### Autres choses utiles
 * * On peut appeler la methode invalidate() sur le publisher associé au  composant pour declencher le rechargement des données.
 * * endPoint est une propriété réctive, par conséquent, sa modification, manuelle via template ou data binbding provoque la mise à jour du contenu.
 */

@customElement(tagName)
export class Fetch extends Fetcher(Subscriber(TemplatesContainer(LitElement))) {
  static styles = [
    css`
      :host {
        display: contents;
      }
    `,
  ];
  @property() loader?: LoaderMode | true | "";

  renderLoader() {
    if (!(this.isLoading && this.loader !== undefined)) return nothing;
    const loader =
      this.loader === true || this.loader === "" ? "fixed" : this.loader;
    return html`<sonic-loader mode=${loader}></sonic-loader>`;
  }
  renderSkeleton() {
    const template = this.templateParts["skeleton"];
    if (!(this.isLoading && template)) return nothing;
    return templateContent(template) as DirectiveResult;
  }

  render() {
    return html`
      ${this.renderSkeleton()} ${this.renderLoader()}
      ${!this.isLoading ? html`<slot></slot>` : nothing}
    `;
  }
}