import { computed, signal } from "@preact/signals-core";
import { type SignalsTemplate, render } from "./signals-template";
import { SignalsWebComponent } from "./signals-web-component";

const tagName = "x-counter";

class Counter extends SignalsWebComponent {
  counter = signal(0);
  counterStr = computed(() => this.counter.value.toString());

  styles = computed(
    () => /* css */ `
    .counter {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        .stepper {
            display: flex;
            flex-direction: row;
            gap: 10px;
        }
    }
    `
  );

  template = signal<SignalsTemplate>({
    tag: "div",
    attributes: {
      class: "counter",
    },
    children: [
      {
        tag: "h1",
        children: [
          "Count: ",
          {
            tag: "span",
            children: [this.counterStr],
          },
        ],
      },
      {
        tag: "input",
        properties: {
          value: this.counterStr,
          readOnly: true,
        },
        attributes: {
          type: "text",
          // value: this.counterStr,
        },
      },
      {
        tag: "div",
        attributes: {
          class: "stepper",
        },
        children: [
          {
            tag: "button",
            events: {
              click: () => {
                this.counter.value--;
                console.log("dec", this.counter.value);
              },
            },
            children: ["-"],
          },
          {
            tag: "button",
            events: {
              click: () => {
                this.counter.value++;
                console.log("inc", this.counter.value);
              },
            },
            children: ["+"],
          },
          {
            tag: "button",
            events: {
              click: () => {
                this.counter.value = 0;
                console.log("reset", this.counter.value);
              },
            },
            children: ["Reset"],
          },
        ],
      },
    ],
  });

  builder = signal(render(this.template.value, this.cleanup));
}

export default Counter;

customElements.define(tagName, Counter);

declare global {
  interface HTMLElementTagNameMap {
    [tagName]: Counter;
  }
}