import { expect} from "vitest";
import TestUtils from "@supersoniks/concorde/test-utils/TestUtils";
import { html } from "lit";
import "./states";
import { dp } from "@supersoniks/concorde/directives";

function create(template = "", addToDocument = true) {
  dp<{state: string}>("state-dataprovider-test").set({state: ""});
  return TestUtils.bootstrap(
    `
    <sonic-states dataProvider="state-dataprovider-test" data-path="status">
      ${template}
    </sonic-states>
  `,
    addToDocument
  )[0];
}

describe("SonicStates", () => {
  it("devrait afficher le template correspondant à la valeur d'état", async () => {
    const elt: any = create(`
      <template data-value="active">
        <div>État Actif</div>
      </template>
      <template data-value="inactive">
        <div>État Inactif</div>
      </template>
    `);    

    dp<{state: string}>("state-dataprovider-test").set({state: "active"});
    await elt.updated();
    expect(elt.textContent.trim()).toBe("État Actif");
  });

  it("devrait supporter les expressions régulières pour les valeurs", async () => {
    const elt: any = create(`
      <template data-value="\\d+">
        <div>Nombre</div>
      </template>
    `);
    dp<{state: string}>("state-dataprovider-test").set({state: "123"});
    await elt.updated();
    expect(elt.textContent.trim()).toBe("Nombre");
  });

  it("devrait supporter url-pattern pour les valeurs", async () => {
    const elt: any = create(`
      <template data-value="user/:id">
        <div>Utilisateur</div>
      </template>
    `);
    dp<{state: string}>("state-dataprovider-test").set({state: "user/123"});
    await elt.updated();
    expect(elt.textContent.trim()).toBe("Utilisateur");
  });

  it("devrait gérer le dataProviderExpression avec regexp", async () => {
    const elt: any = create(`
      <template data-value="user/(\\d+)" dataProviderExpression="/api/user/$1">
        <div>Utilisateur</div>
      </template>
    `);
    dp<{state: string}>("state-dataprovider-test").set({state: "user/123"});
    await elt.updated();
    const divWrapper = elt.querySelector("div[dataProvider]");
    expect(divWrapper.getAttribute("dataProvider")).toBe("/api/user/123");
  });

  it("devrait gérer le dataProviderExpression avec url-pattern", async () => {
    const elt: any = create(`
      <template data-value="user/:id" dataProviderExpression="/api/user/:id">
        <div>Utilisateur</div>
      </template>
    `);
    dp<{state: string}>("state-dataprovider-test").set({state: "user/123"});
    await elt.updated();
    const divWrapper = elt.querySelector("div[dataProvider]");
    expect(divWrapper.getAttribute("dataProvider")).toBe("/api/user/123");
  });

  it("devrait afficher l'état programmatique correspondant", async () => {
    const elt: any = create();
    elt.states = {
      active: () => html`<div>État Actif Programmatique</div>`,
    };
    dp<{state: string}>("state-dataprovider-test").set({state: "active"});
    await elt.updated();
    expect(elt.textContent.trim()).toBe("État Actif Programmatique");
  });

  it("devrait supporter les expressions régulières dans les états programmatiques", async () => {
    const elt: any = create();
    elt.states = {
      "(\\d+)": (status: string) => html`<div>Nombre: ${status}</div>`,
    };
    dp<{state: string}>("state-dataprovider-test").set({state: "123"});
    await elt.updated();
    expect(elt.textContent.trim()).toBe("Nombre: 123");
  });

  it("devrait supporter url-pattern dans les états programmatiques", async () => {
    const elt: any = create();
    elt.states = {
      "user/:id/:slug": ({ id, slug }: { id: number; slug: string }) => {
        return html`<div>Utilisateur ${id} ${slug}</div>`;
      },
    };
    dp<{state: string}>("state-dataprovider-test").set({state: "user/123/mySlug"});
    await elt.updated();
    expect(elt.textContent.trim()).toBe("Utilisateur 123 mySlug");
  });

  it("devrait utiliser l'état par défaut programmatique si aucun état ne correspond", async () => {
    const elt: any = create();
    elt.states = {
      active: () => html`<div>État Actif</div>`,
      fallback: () => html`<div>État Par Défaut</div>`,
    };
    dp<{state: string}>("state-dataprovider-test").set({state: "unknown"});
    await elt.updated();
    expect(elt.textContent.trim()).toBe("État Par Défaut");
  });

  it("devrait supporter la combinaison des templates HTML et programmatiques", async () => {
    const elt: any = create(`
      <template data-value="html">
        <div>Template HTML</div>
      </template>
    `);
    elt.states = {
      prog: () => html`<div>Template Programmatique</div>`,
    };

    dp<{state: string}>("state-dataprovider-test").set({state: "html"});
    await elt.updated();
    expect(elt.textContent.trim()).toBe("Template HTML");

    dp<{state: string}>("state-dataprovider-test").set({state: "prog"});
    await elt.updated();
    expect(elt.textContent.trim()).toBe("Template Programmatique");
  });
});