export function lazyLoadDirective($timeout) {
  'ngInject';
  const directive = {
    restrict: 'A',
    scope: true,
    link: linkFunc
  };

  return directive;

  function linkFunc(scope, element, attr) {
    function waitForImage(url) {
      var tempImg = new Image();
      tempImg.onload = function () {
        $timeout(() => {
          element.attr('src', url);
        });
      };
      tempImg.src = url;
    }
    attr.$observe('lazyLoad', (newValue) => {
      if (newValue) {
        waitForImage(newValue);
      }
    });
    // const obs = new IntersectionObserver(entries => {
    //   entries.forEach((entry: any) => {
    //     if (entry.intersectionRatio > 0 && entry.intersectionRatio <= 1) {
    //       entry.target.src = 'assets/images/lazyload/lazyload-252x267.png';
    //       obs.unobserve(img);
    //     }

    //   })
    // })
    // obs.observe(img);
    // observer.observe(img)
    // function loadImg(changes: any[]) {
    //   changes.forEach(change => {
    //     if (change.intersectionRatio > 0) {
    //       change.target.src = 'assets/images/lazyload/lazyload-252x267.png';
    //       observer.unobserve(img);
    //     }
    //   })
    // }
  }
}