import {APIResponse} from './../models/models';
import {UserService} from '../_services/user-service/user.service';
import {HttpClient, HttpHeaders} from '@angular/common/http';
import {Component, OnInit} from '@angular/core';
import {Article} from '../models/models';
import {TokenStorageService} from '../_services/jwt-service/token-storage.service';
import {Subscription} from 'rxjs';
import {Router} from '@angular/router';
import {MessageService} from 'primeng/api';
import {FileUploadService} from '../_services/firebase-service/file-upload.service';
import {map} from 'rxjs/operators';

const API_BASE_URL = 'http://localhost:8081/api/v1/';

const httpOptions = {
  headers: new HttpHeaders({'Content-Type': 'application/json'}),
};

@Component({
  selector: 'app-articles',
  templateUrl: './articles.component.html',
  styleUrls: ['./articles.component.scss'],
})
export class ArticlesComponent implements OnInit {
  userId: number;
  pendingArticles?: Array<Article>;
  acceptedArticles?: Array<Article>;
  favoriteArticles?: Array<Article>;
  acceptedArticlesSub: Subscription;
  pendingArticlesSub: Subscription;
  favoriteArticlesSub: Subscription;
  urlsByArticleID = new Map<number, string>();
  db?: Array<any>;

  constructor(
    private http: HttpClient,
    private userService: UserService,
    private router: Router,
    private messageService: MessageService,
    private uploadService: FileUploadService
  ) {
  }

  ngOnInit(): void {
    this.getUserAcceptedArticles();
    this.getUserPendingArticles();
    this.getUserFavoriteArticles();
    this.initializeFirebaseData();
  }

   initializeFirebaseData() {
     this.uploadService.getFiles(100).valueChanges()
      .subscribe(value => {
        value.map(value2 => {
          this.urlsByArticleID.set(value2.articleId, value2.url);
        });
      });
  }

  getUrl(articleId: number): string {
    return this.urlsByArticleID.get(articleId) ?? 'assets/images/image-placeholder.png';
  }

  getUserAcceptedArticles() {
    this.acceptedArticlesSub = this.userService
      .getUserAcceptedArticles()
      .subscribe((articleList: APIResponse<Article>) => {
        this.acceptedArticles = articleList.results;
        console.log('ACC articles => ', this.acceptedArticles);
      });
  }

  getUserPendingArticles() {
    this.pendingArticlesSub = this.userService
      .getUserPendingArticles()
      .subscribe((articleList: APIResponse<Article>) => {
        this.pendingArticles = articleList.results;
        console.log('PENDarticles => ', this.pendingArticles);
      });
  }

  getUserFavoriteArticles() {
    this.favoriteArticlesSub = this.userService
      .getUserFavoriteArticles()
      .subscribe((articleList: Array<Article>) => {
        this.favoriteArticles = articleList;
      });
    console.log('Fav Articles => ', this.favoriteArticles);
  }

  haveArticle() {
    return this.favoriteArticles?.length || this.acceptedArticles?.length || this.pendingArticles?.length;
  }

  newArticle() {
    this.router.navigate(['create-article']);
  }

  articleDetails(id, owner: string) {
    // const owner = 'true';
    this.router.navigate(['article-details', id, owner]);
  }

  addToFav(id) {
    this.userService.addArticleToFav(id);
    this.showSuccess();
  }

  showSuccess() {
    this.messageService.add({severity: 'success', summary: 'Success', detail: 'Message Content'});
  }
}