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"
        i18n-aria-label="@@spinner.aria"
        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);
  }
}