import { CommonModule } from "@angular/common";
import { Component, input, type OnInit, signal } from "@angular/core";

import AstroLogo from "../../images/astro.png?url";
import OutSystemsLogo from "../../images/outsystems.png?url";
import { Operation, setCounterCount } from "../../lib/setCounterCount";

@Component({
  imports: [CommonModule],
  selector: "app-counter",
  standalone: true,
  template: `
    <div class="counter-title" slot="header">Angular Demo Component</div>
    <div class="card-grid">
      <div class="card">
        <strong>Angular counter component</strong>
        <div class="card-content">
          Internal counter controls. It keeps state within the component.
          <div class="counter-controls">
            <button (click)="subtract()">-</button>
            <pre>{{ count() }}</pre>
            <button (click)="add()">+</button>
          </div>
        </div>
        The button sends the current count value to a function in the parent
        component.
        <div class="card-content">
          <div>
            <button class="card-btn" (click)="showParentMessage()">
              Send value
            </button>
          </div>
        </div>
      </div>
      <div class="card unused">
        <strong>Nano Stores (not supported)</strong>
        <div class="card-content"></div>
      </div>
      <div class="card unused">
        <strong>Slot content (not supported)</strong>
        <div class="card-content"></div>
      </div>
    </div>
    <div class="counter-logos">
      <img [src]="outSystemsLogo" alt="OutSystems logo" />
      <img [src]="astroLogo" alt="Astro logo" />
    </div>
  `,
})
export default class DemoComponent implements OnInit {
  astroLogo = AstroLogo;
  count = signal(0);

  initialCount = input<number>(0, { alias: "initialCount" });

  messageFunctionName = input<string>("", { alias: "showMessage" });
  outSystemsLogo = OutSystemsLogo;

  add() {
    this.count.update((i) => setCounterCount(i, Operation.Add));
  }

  ngOnInit() {
    this.count.set(this.initialCount());
  }

  showParentMessage() {
    const fnName = this.messageFunctionName();

    // Safety check to ensure the function exists on window.
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    if (typeof (window as any)[fnName] === "function") {
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      (window as any)[fnName](this.count());
    }
  }

  subtract() {
    this.count.update((i) => setCounterCount(i, Operation.Subtract));
  }
}