import { initRouter, Route, ViewChild, Component, ComponentInput, ComponentDefinition } from "./node-pwa.js";
import { IntInput } from "./utils.js";

class TestComponent extends Component {
  static get definition() {
    return new ComponentDefinition({
      name: "test-component",
      template: `<div>
        <h1>Test Component</h1>
        <p>This is a test component.</p>
        <button 
          id="test-button" 
          [class.red-button]="count() % 2 === 0" 
          [class.green-button]="count() % 2 !== 0" 
          class="counter-button"
          (click)="incrementCount()"
          >Count: {{count()}}</button>
        <input type="text" [(value)]="name" placeholder="Enter your name" />
        <p>Hello, {{name()}}! Counter is {{count()}}</p>
      </div>`,
      style: `
      .red-button {
        background-color: red;
        color: white;
        border: none;
        padding: 10px 20px;
        font-size: 16px;
        cursor: pointer;
      }

      .green-button {
        background-color: green;
        color: white;
        border: none;
        padding: 10px 20px;
        font-size: 16px;
        cursor: pointer;
      }

      .counter-button {
        border-radius: 10px;
        margin: 15px 30px;
        font-size: 18px;
        transition: opacity 0.3s ease;
      }

      .counter-button:hover {
        opacity: 0.8;
      }
      `
    });
  }

  count = new ComponentInput(0, IntInput);
  name = new ComponentInput("World");

  incrementCount() {
    const currentCount = this.count();
    this.count.set(currentCount + 1);
  }
}

const route1 = new Route("/counter", TestComponent);
const route2 = new Route("/counter/:count", TestComponent);
initRouter("routerOutlet", [route1, route2]);