import {
  Component, ChangeDetectionStrategy, input, inject, computed,
  DestroyRef,
} from '@angular/core';
import { ReducedMotionService } from '../../services/reduced-motion.service';

@Component({
  selector: 'fl-frequency-rings',
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <svg class="fl-frequency-rings__svg" viewBox="0 0 200 200">
      @for (ring of ringData(); track ring.index) {
        <circle
          cx="100"
          cy="100"
          [attr.r]="ring.radius"
          fill="none"
          [attr.stroke]="color()"
          [attr.stroke-width]="ring.strokeWidth"
          [attr.opacity]="ring.opacity"
          [style.animation-duration.s]="ring.duration"
          [style.animation-delay.s]="ring.delay"
        />
      }
    </svg>
  `,
  styleUrl: './fl-frequency-rings.component.scss',
  host: {
    'class': 'fl-frequency-rings',
    '[class.fl-frequency-rings--reduced-motion]': 'reducedMotion.reduced()',
  },
})
export class FlFrequencyRingsComponent {
  private reducedMotion = inject(ReducedMotionService);
  private destroyRef = inject(DestroyRef);

  // Inputs
  readonly rings = input(5);
  readonly color = input('#3b82f6');
  readonly speed = input(1);
  readonly baseRadius = input(20);

  // Computed
  readonly ringData = computed(() => {
    const count = this.rings();
    const base = this.baseRadius();
    const spd = this.speed();

    return Array.from({ length: count }, (_, i) => {
      const radius = base + i * 15;
      const opacity = 1 - (i / count) * 0.7;
      const strokeWidth = 2 - (i / count) * 1;
      const duration = (2 + i * 0.3) / spd;
      const delay = -i * 0.2;

      return { index: i, radius, opacity, strokeWidth, duration, delay };
    });
  });
}