import {AfterViewChecked, AfterViewInit, Component, ElementRef, inject, input, ViewChild} from '@angular/core';

@Component({
  selector: 'masonry',
  imports: [],
  templateUrl: './masonry.html',
  styleUrl: './masonry.scss',
})
export class Masonry implements AfterViewInit {
  host = inject(ElementRef)

  maxColSize = input<number>(4)

  ngAfterViewInit() {
    const elements = this.host.nativeElement.children.length
    switch (elements) {
      case 1:
        this.host.nativeElement.style.gridTemplateColumns = "1fr";
        break
      case 3:
        this.host.nativeElement.style.gridTemplateColumns = "repeat(2, 1fr)";
        this.host.nativeElement.children[2].style.gridColumn = "1 / -1";
        break
      default:
        this.host.nativeElement.style.gridTemplateColumns = `repeat(${this.maxColSize()}, 1fr)`;
    }
  }
}
