import { Component, OnDestroy, OnInit, input, signal } from '@angular/core';

/** Atom: spinner that only appears after `delay` ms — fast responses never
    flash a spinner, slow ones get feedback. */
@Component({
  selector: 'app-spinner',
  styles: [`
    :host{display:block}
    .sp{inline-size:var(--rhc-space-max-3xl);block-size:var(--rhc-space-max-3xl);border-radius:var(--rhc-border-radius-round);
        border:var(--rhc-space-max-xs) solid var(--rhc-color-cool-grey-300);
        border-block-start-color:var(--rhc-color-lintblauw-700);
        animation:sp 0.8s linear infinite;margin:var(--rhc-space-max-2xl) auto}
    @keyframes sp{to{transform:rotate(360deg)}}
  `],
  template: `
    @if (visible()) {
      <div class="sp" role="status" aria-label="Bezig met laden"></div>
    }
  `,
})
export class SpinnerComponent implements OnInit, OnDestroy {
  delay = input(250);
  protected visible = signal(false);
  private timer?: ReturnType<typeof setTimeout>;

  ngOnInit() { this.timer = setTimeout(() => this.visible.set(true), this.delay()); }
  ngOnDestroy() { clearTimeout(this.timer); }
}