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

@Component({
  selector: 'fl-grid-matrix',
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div
      class="fl-grid-matrix__grid"
      [style.grid-template-columns]="'repeat(' + cols() + ', 1fr)'"
      [style.grid-template-rows]="'repeat(' + rows() + ', 1fr)'"
    >
      @for (dot of dots(); track dot.index) {
        <div
          class="fl-grid-matrix__dot"
          [class.fl-grid-matrix__dot--animated]="animated()"
          [style.width.px]="dotSize()"
          [style.height.px]="dotSize()"
          [style.background-color]="color()"
          [style.animation-delay.s]="dot.delay"
        ></div>
      }
    </div>
  `,
  styleUrl: './fl-grid-matrix.component.scss',
  host: {
    'class': 'fl-grid-matrix',
    '[class.fl-grid-matrix--reduced-motion]': 'reducedMotion.reduced()',
  },
})
export class FlGridMatrixComponent {
  private reducedMotion = inject(ReducedMotionService);
  private destroyRef = inject(DestroyRef);

  // Inputs
  readonly rows = input(10);
  readonly cols = input(10);
  readonly dotSize = input(4);
  readonly color = input('#3b82f6');
  readonly animated = input(true);

  // Computed
  readonly dots = computed(() => {
    const r = this.rows();
    const c = this.cols();
    const total = r * c;

    return Array.from({ length: total }, (_, i) => {
      const row = Math.floor(i / c);
      const col = i % c;
      const distanceFromCenter = Math.sqrt(
        Math.pow(row - r / 2, 2) + Math.pow(col - c / 2, 2)
      );
      const delay = distanceFromCenter * 0.05;

      return { index: i, delay };
    });
  });
}