import { html, LitElement } from "lit";
import { customElement, property, state } from "lit/decorators.js";
import { bind } from "@supersoniks/concorde/decorators";
import { DataProviderKey } from "@supersoniks/concorde/core/utils/dataProviderKey";
import { sub } from "@supersoniks/concorde/directives";
import {
  PublisherManager,
  PublisherProxy,
} from "@supersoniks/concorde/core/utils/PublisherProxy";
import { Objects } from "@supersoniks/concorde/utils";
import { tailwind } from "../tailwind";
import "./decorators-demo-init";

@customElement("demo-bind")
export class DemoBind extends LitElement {
  static styles = [tailwind];

  @bind("demoData.firstName")
  @state()
  firstName = "";

  @bind("demoData.lastName")
  @state()
  lastName: string = "";

  @bind("demoData.count")
  @state()
  count: number = 0;

  render() {
    return html`
      <div>
        <sonic-button @click=${this.updateData}>Update Data</sonic-button>
      </div>
      <div class="p-3">
        <p>Title: <strong>${this.firstName || "Not set"}</strong></p>
        <p>User Name: <strong>${this.lastName || "Not set"}</strong></p>
        <p>Number of updates: <strong>${this.count}</strong></p>
      </div>
    `;
  }

  updateData() {
    const demoData = PublisherManager.get("demoData");
    const demoUsers = PublisherManager.get("demoUsers");
    const randomIndex = Math.floor(Math.random() * demoUsers.get().length);
    const randomUser = demoUsers.get()[randomIndex];
    demoData.set({
      firstName: randomUser.firstName,
      lastName: randomUser.lastName,
      count: (demoData.count.get() || 0) + 1,
    });
  }
}

@customElement("demo-bind-reflect")
export class DemoBindReflect extends LitElement {
  static styles = [tailwind];

  @bind("bindReflectDemo.count", { reflect: true })
  @state()
  withReflect: number = 0;

  @bind("bindReflectDemo.count")
  @state()
  withoutReflect: number = 0;

  connectedCallback() {
    super.connectedCallback();
    this.resetData();
  }

  resetData() {
    PublisherManager.get("bindReflectDemo").set({ count: 0 });
  }
  render() {
    return html`
      <div class="mb-3">
        from publisher : ${sub("bindReflectDemo.count")} <br />
        from component with reflect : ${this.withReflect} <br />
        from component without reflect : ${this.withoutReflect}
      </div>
      <sonic-button @click=${() => this.withReflect++}
        >Increment with reflect</sonic-button
      >
      <sonic-button @click=${() => this.withoutReflect++}
        >Increment without reflect</sonic-button
      >
      <sonic-button @click=${this.resetData}>Reset publisher data</sonic-button>
    `;
  }
}

type BindReflectDemoData = { count: number };
const bindReflectDemoKey = new DataProviderKey<BindReflectDemoData>("bindReflectDemo");

@customElement("demo-bind-key")
export class DemoBindKey extends LitElement {
  static styles = [tailwind];

  @bind(bindReflectDemoKey.count, { reflect: true })
  @state()
  count: number = 0;

  connectedCallback() {
    super.connectedCallback();
    PublisherManager.get("bindReflectDemo").set({ count: 0 });
  }

  render() {
    return html`
      <div class="mb-3">
        <p>@bind with DataProviderKey&lt;number&gt; (type-safe): ${this.count}</p>
      </div>
      <sonic-button @click=${() => this.count++}>Increment</sonic-button>
    `;
  }
}

@customElement("demo-bind-dynamic")
export class DemoBindDynamic extends LitElement {
  static styles = [tailwind];

  @property({ type: String })
  dataProvider: "demoUsers" | "demoUsersAlt" = "demoUsers";

  @property({ type: Number })
  userIndex: number = 1;

  @bind("${dataProvider}.${userIndex}")
  @state()
  user: any = {};

  updateUserIndex(e: Event) {
    this.userIndex = parseInt((e.target as HTMLInputElement).value);
  }

  updateDataProvider(e: Event) {
    this.dataProvider = (e.target as HTMLSelectElement).value as
      | "demoUsers"
      | "demoUsersAlt";
  }

  updateCurrentUserData() {
    const usersPublisher = PublisherManager.get(this.dataProvider);
    const userPublisher = Objects.traverse(usersPublisher, [
      String(this.userIndex),
    ]) as PublisherProxy;

    if (userPublisher) {
      const randomNames = [
        { firstName: "Alice", lastName: "Wonder" },
        { firstName: "Bob", lastName: "Builder" },
        { firstName: "Charlie", lastName: "Chaplin" },
        { firstName: "Diana", lastName: "Prince" },
        { firstName: "Eve", lastName: "Adams" },
      ];

      const randomName =
        randomNames[Math.floor(Math.random() * randomNames.length)];
      const randomEmail = `${randomName.firstName.toLowerCase()}.${randomName.lastName.toLowerCase()}@example.com`;

      const currentUser = userPublisher.get() || {};
      userPublisher.set({
        ...currentUser,
        firstName: randomName.firstName,
        lastName: randomName.lastName,
        email: randomEmail,
      });
    }
  }

  render() {
    return html`
      <div class="flex flex-col gap-2">
        <sonic-select
          .value=${this.dataProvider}
          label="Users set"
          @change=${this.updateDataProvider}
        >
          <option value="demoUsers">First set of users</option>
          <option value="demoUsersAlt">Second set of users</option>
        </sonic-select>
        <sonic-input
          type="number"
          .value=${this.userIndex}
          @input=${this.updateUserIndex}
          min="0"
          max="9"
          label="Index"
          class="block"
        >
        </sonic-input>
        <sonic-button @click=${this.updateCurrentUserData}
          >Update current user data</sonic-button
        >
        <div class="flex flex-col gap-2 border p-2">
          <div>
            <sonic-icon name="user" library="heroicons"></sonic-icon>
            ${this.user?.firstName} ${this.user?.lastName}
          </div>
          <div>
            <sonic-icon name="envelope" library="heroicons"></sonic-icon>
            ${this.user?.email}
          </div>
        </div>
      </div>
    `;
  }
}