import { Component } from '@angular/core';

@Component({
  selector: 'app-gallery',
  templateUrl: './gallery.component.html',
  styleUrls: ['./gallery.component.css']
})
export class GalleryComponent {
  fullImgSrc?: string;

  openFullImg(pic: string) {
    this.fullImgSrc = pic;
    const fullImgBox = document.getElementById('fullImgBox') as HTMLElement;
    fullImgBox.style.display = 'flex';
  }

  closeFullImg() {
    const fullImgBox = document.getElementById('fullImgBox') as HTMLElement;
    fullImgBox.style.display = 'none';
  }

  ngOnInit() {
    const imgElements = document.querySelectorAll('.img-gallery img');

    imgElements.forEach(imgElement => {
      const src = imgElement.getAttribute('src');
      if (src) {
        imgElement.addEventListener('click', () => {
          this.openFullImg(src);
        });
      }
    });

    const closeBtn = document.querySelector('.full-img span');
    if (closeBtn) {
      closeBtn.addEventListener('click', () => {
        this.closeFullImg();
      });
    }
  }
}