import {
  Component,
  ElementRef,
  ViewChild,
  AfterViewInit,
  HostListener
} from '@angular/core';
import { CarouselItem } from '../carousel/carousel-item';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements AfterViewInit {
  @ViewChild('stickyMenu') public menuElement?: ElementRef;
  public sticky = false;

  public carouselItems: CarouselItem[] = [
    {
      src: '/assets/img/portfolio/img1.jpeg',
      description: 'Pads unfolded.'
    },
    {
      src: '/assets/img/portfolio/img2.jpeg',
      description: "It's a fun activity you can do with your friends!"
    },
    {
      src: '/assets/img/portfolio/img4.jpeg',
      description: 'Training with 4 pads to enhance my responsiveness!'
    }
  ];

  private menuPosition = 0;

  constructor() {}

  @HostListener('window:scroll', ['$event'])
  public handleScroll() {
    const windowScroll = window.pageYOffset;
    this.sticky = windowScroll >= this.menuPosition ? true : false;
  }

  public ngAfterViewInit() {
    this.menuPosition = this.menuElement?.nativeElement.offsetTop;
  }
}
