import { LitElement } from "lit";
import { html } from "lit";
import { customElement, state } from "lit/decorators.js";
import { dp } from "@supersoniks/concorde/directives";
import "./states";
import { tailwind } from "../../../../docs/tailwind";

@customElement("sonic-states-demo")
export class SonicStatesDemo extends LitElement {
  static styles = [tailwind];

  constructor() {
    super();
    // Initialisation du dataProvider
    dp("states-demo-provider").set({});
  }

  @state()
  private states = {
    pending: () => html`
      <div class="p-4 border border-gray-200 rounded-md">
        <h1 class="text-xl font-medium mb-2">En attente</h1>
        <p class="text-gray-600">Veuillez patienter...</p>
      </div>
    `,

    "user/:id/:status": ({
      id,
      status,
    }: {
      id: string;
      status: string;
    }) => html`
      <div class="p-4 border border-gray-200 rounded-md">
        <h1 class="text-xl font-medium mb-2">Utilisateur ${id}</h1>
        <p class="text-gray-600">Statut: ${status}</p>
      </div>
    `,

    "error_(\\d+)": ([code]: [string]) => html`
      <div class="p-4 border border-red-200 bg-red-50 rounded-md">
        <h1 class="text-xl font-medium text-red-800 mb-2">Erreur ${code}</h1>
        <p class="text-red-600">Une erreur s'est produite</p>
      </div>
    `,

    fallback: () => html`
      <div class="p-4 border border-gray-200 rounded-md">
        <h1 class="text-xl font-medium mb-2">État Inconnu</h1>
        <p class="text-gray-600">L'état demandé n'existe pas</p>
      </div>
    `,
  };

  render() {
    return html`
      <div class="p-4">
        <h2 class="text-2xl font-medium mb-6">Démo des états</h2>

        <div class="flex gap-4 mb-6" formDataProvider="states-demo-provider">
          <sonic-button radio name="status" checked value="pending">
            En attente
          </sonic-button>
          <sonic-button radio name="status" value="user/123/active">
            Utilisateur Actif
          </sonic-button>
          <sonic-button radio name="status" value="error_404">
            Erreur 404
          </sonic-button>
          <sonic-button radio name="status" value="invalid">
            État Invalide
          </sonic-button>
        </div>

        <sonic-states
          dataProvider="states-demo-provider"
          data-path="status"
          .states=${this.states}
        ></sonic-states>
      </div>
    `;
  }
}