// Angular Core
import { Component, OnInit, Input, OnDestroy } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser'
import { HttpErrorResponse } from '@angular/common/http';

// RxJs
import { Subscription, throwError } from 'rxjs';
import { catchError } from "rxjs/operators";

// Interfaces
import { UserAdInterface } from 'src/app/interfaces/user-ad-interface';

// Services
import { ContentService } from 'src/app/services/content/content.service';
import { DataTransmitterService } from 'src/app/services/dataTransmitter/data-transmitter.service';
import { lane4AdDataInterface } from 'src/app/interfaces/common-interfaces';


@Component({
  standalone: false,
  selector: 'app-banner',
  templateUrl: './banner.component.html',
  styleUrls: ['./banner.component.scss']
})
export class BannerComponent implements OnInit, OnDestroy {

  @Input() adsectionid: number = 1;
  @Input() adlimit: number = 4;
  lane4AdDataListener!: Subscription;

  constructor(private contentService: ContentService, private sanitized: DomSanitizer, private dataTransmitter: DataTransmitterService) { }

  ngOnInit(): void {
    this.lane4AdDataListener = this.dataTransmitter.lane4AdData.subscribe((data: lane4AdDataInterface) => {
      this.getBannerAds(data);
    });
  }

  /**
   * Method to Unescape HTML entities
   */
  htmlDecode(input: string) {
    var doc = new DOMParser().parseFromString(input, "text/html");

    return doc.documentElement.textContent;
  };

  bannerAds = {
    html: ''
  };

  banners!: UserAdInterface['data']['ads'];

  totalItems: number = 0;

  slides: any = [];

  active: any;

  bannerAdSubscribe!:Subscription;
  /**
   * Gets Banner Ads based on sectionId and adLimit sent
   */
  getBannerAds(lane4AdData: lane4AdDataInterface) {

    this.bannerAdSubscribe = this.contentService.bannerAd(this.adsectionid, this.adlimit, lane4AdData.ndc, lane4AdData.pageName)
      .pipe(
        catchError(() => {
          return throwError(() => new Error('ups sommething happend'));
        })
      )
      .subscribe({
        next: (res: UserAdInterface) => {
          this.active = 0
          if (res.data.ads !== undefined) {
            this.banners = res.data.ads;
            this.totalItems = this.banners.length;
            this.slides = this.banners.map( (item:UserAdInterface['data']['ads'][0], index) => {
              var htmlContent = new DOMParser().parseFromString(item.advertContent, 'text/html').documentElement.textContent || '';              
              return {
                htmlContent: this.sanitized.bypassSecurityTrustHtml(htmlContent),
                advertId: item.advertId,
                id: index
              };
            });
          }
        },
        error: (err: HttpErrorResponse) => {
          this.contentService.errorCallBack(err);
        },
        complete: () => { }
      });
  }

  /**
   * Method to track clicks on banner ads
   */
  onBannerClick(value: number) {
    this.contentService.bannerAdClick(value);
  };

  ngOnDestroy(){
    this.bannerAdSubscribe?.unsubscribe();
  }

}