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

@Component({
  selector: 'home-body',
  templateUrl: './body.component.html',
  styleUrls: ['./body.component.scss']
})
export class BodyComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

  onIntersection($event: { target: HTMLElement, visible: boolean }): void {
    // animate__animated animate__fadeInLeft animate__delay-1s
    let htmlElement = $event.target as HTMLElement;
    if ($event.visible && !htmlElement.classList.contains('u-in-viewport')) {
      var animationName = $event.target.getAttribute('data-animation');
      var animationDuration = $event.target.getAttribute('data-animation-duration');
      var animationDelay = $event.target.getAttribute('data-animation-delay');
      htmlElement.classList.add("u-in-viewport");
      htmlElement.classList.add("animate__animated");

      if (animationDuration) {

        htmlElement.style.setProperty('--animate-duration', `${Number.parseInt(animationDuration) / 1000}s`);
      }
      if (animationDelay) {

        htmlElement.style.setProperty('--animate-delay', `${Number.parseInt(animationDelay) / 1000}s`);
      }

      // console.log($event);
      // console.log(htmlElement);

      htmlElement.classList.add(`animate__${animationName}`);
    }
  }

  onParallaxer(target: HTMLElement, visible: boolean) {
    if (visible) {
      target.style.transform = 'translate3d(0px, -70.4277px, 0px);'
      console.log(target);

    }
    //transform: translate3d(0px, -70.4277px, 0px);
  }

}
