import { HttpClient } from '@angular/common/http';
import { Component, ElementRef, OnInit, Renderer2, ViewChild } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { ConfigService } from 'src/app/config.service';

@Component({
  selector: 'app-recommendations',
  templateUrl: './recommendations.component.html',
  styleUrls: ['./recommendations.component.css']
})
export class RecommendationsComponent implements OnInit {
  @ViewChild('recmmendList')cl:ElementRef;

  constructor(private http:HttpClient,private renderer: Renderer2, private config:ConfigService,private activatedRoute: ActivatedRoute,) { }

  ngOnInit(): void {
    this.http.get<any>(this.config.hostname + '/videos/recommends').subscribe(data => {
      console.log(data);
      for(let i = 0; i < data.length; i++) {
        if(data[i].vid_id == this.activatedRoute.snapshot.params['watch']) return;
        // Html declratation
        const link:HTMLAnchorElement = this.renderer.createElement('a');
        const img:HTMLImageElement = this.renderer.createElement('img');
        const cardDiv:HTMLDivElement = this.renderer.createElement('div');
        const vidTitle:HTMLTitleElement = this.renderer.createElement('h5');
        const titleText = this.renderer.createText(data[i]['title']);

        // html assemblyline
        link.appendChild(img);
        img.src = "";
        img.classList.add("img-fluid");
        img.classList.add("rounded-start");
        link.appendChild(cardDiv);
        link.href = "/watch/" + data[i]["vid_id"];
        link.classList.add("card");
        link.classList.add("mb-3");
        link.classList.add("col-3");
        cardDiv.appendChild(vidTitle);
        cardDiv.classList.add("card-body");
        vidTitle.appendChild(titleText);


        // appends to recommendation list
        this.cl.nativeElement.prepend(link);
      }
    
    });
  }



}
