import { property } from "lit/decorators.js";
import { LitElement } from "lit";
import { MixinArgsType } from "../_types/types";
type Constructor<T> = new (...args: MixinArgsType[]) => T;

export declare class TemplatesContainerInterface extends LitElement {
  connectedCallback(): void;
  templateParts: Record<string, HTMLTemplateElement>;
  templatePartsList: HTMLTemplateElement[];
  templates: HTMLTemplateElement[];
  templateList: HTMLTemplateElement[];
  templateValueAttribute: string;
}
const TemplatesContainer = <T extends Constructor<LitElement>>(
  superClass: T
) => {
  /**
   * Mixin pour mutualiser la gestion des templates dans différents composants (list, router, date, states...)
   * Les templates sont soit dans aus sein du composant dans la déclaration html, soit renseignés via l'attribut "templates"
   */
  class TemplatesContainerElement extends superClass {
    /**
     * On peut passer directement un tableu de template au composant via sont attribut.
     * Voir utilisation dans le composant queue qui permet de ne pas doubler les balises templates à la déclaration.
     */
    @property({ type: Array }) templates: Array<HTMLTemplateElement> | null =
      null;
    /**
     * C'est le nom de l'attribut qui permet de regrouper les templates possédant cet attributs dans templateParts et templatePartsList.
     * Ceux qui n'ont pas cet attribut sont stockés dans templateList
     */
    templateValueAttribute = "data-value";
    /**
     * Tableau contenant tous les templates qui n'on pas d'attribut templateValueAttribute
     */
    templateList: HTMLTemplateElement[] = [];

    /**
     * Objet contenant tous les templates qui ont un attribut templateValueAttribute.
     * Les clefs sont la valeur de l'attribut du template dont le nom est la valeur de templateValueAttribute.
     */
    templateParts: Record<string, HTMLTemplateElement> = {};
    /**
     * Comme template parts mais sous forme de tableau, sans les clefs.
     */
    templatePartsList: HTMLTemplateElement[] = [];
    connectedCallback() {
      const templates =
        this.templates ||
        ([...this.querySelectorAll("template")] as HTMLTemplateElement[]);
      for (const t of templates) {
        if (t.hasAttribute(this.templateValueAttribute)) {
          this.templateParts[
            t.getAttribute(this.templateValueAttribute) as string
          ] = t;
          this.templatePartsList.push(t);
        }
        if (t.hasAttribute("skeleton")) {
          this.templateParts["skeleton"] = t;
        }
        if (t.hasAttribute("no-result")) {
          this.templateParts["no-result"] = t;
        }

        if (t.hasAttribute("no-item")) {
          this.templateParts["no-item"] = t;
        }
      }
      this.templateList = templates.filter(
        (t) => !t.getAttribute("data-value")
      );
      if (this.templateList.length == 0) this.templateList = templates;
      super.connectedCallback();
    }
  }
  return TemplatesContainerElement as Constructor<TemplatesContainerInterface> &
    T;
};
export default TemplatesContainer;