import {Component, Input, OnInit} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {TokenStorageService} from '../../_services/jwt-service/token-storage.service';
import {UserService} from '../../_services/user-service/user.service';
import {Article} from '../../models/models';
import {ArticlesService} from '../../_services/article-service/articles.service';
import {Location, LocationStrategy, PathLocationStrategy} from '@angular/common';
import {MessageService} from 'primeng/api';
import {delay, map} from 'rxjs/operators';
import {FileUploadService} from '../../_services/firebase-service/file-upload.service';

@Component({
  selector: 'app-article-details',
  templateUrl: './article-details.component.html',
  styleUrls: ['./article-details.component.scss'],
  providers: [Location, {provide: LocationStrategy, useClass: PathLocationStrategy}]
})
export class ArticleDetailsComponent implements OnInit {
  article?: Article;
  message: string;
  isOwner: boolean = false;
  imageUrl: string;
  imagesForArticle?: any[];
  messagesForArticle?: any[];
  articleId: number;
  constructor(private articleService: ArticlesService,
              private userService: UserService,
              private route: ActivatedRoute,
              private router: Router,
              private location: Location,
              private messageService: MessageService,
              private uploadService: FileUploadService) { }

  ngOnInit(): void {
    if ( this.route.snapshot.params['owner'] === 'true') this.isOwner = true;
    console.log("isowner",this.isOwner);
    this.articleId = this.route.snapshot.params['articleId'];
    this.articleService.getArticleById(this.articleId).subscribe(
      value => {
        this.article = value;
      },
      error => {
        console.log(error);
      }
    );
    console.log(this.articleId);
    // console.log(this.article);
    this.fetchUrlForArticle(this.articleId);
     // console.log(this.imagesForArticle);
    this.getMessagesForArticle();
  }

  getArticleTitle() {
    return this.article?.title ?? "--Lipsa titlu--";
  }

  fetchUrlForArticle(articleId: number) {
    this.uploadService.getFiles(100).snapshotChanges().pipe(
      map(changes =>
        // store the key
        changes.map(c => ({key: c.payload.key, ...c.payload.val()})).filter( img => img.articleId == articleId)
      )
    ).subscribe(fileUploads => {
      this.imagesForArticle = fileUploads;
    });
  }

  goBack() {
    this.location.back();
  }

  sendMessage(articleId: number) {
      this.userService.sendMessageForArticle(this.message, articleId).subscribe(value => {
        console.log(value);
      });
      this.showSuccess();
  }

  showSuccess() {
    this.messageService.add({severity:'success', summary: 'Success', detail: 'Mesaj trimis'});
    // this.messageService.add({severity:'error', summary: 'Fail', detail: 'Mesaj trimis'});
  }

  fetch() {
    console.log(this.article);
    console.log(this.imagesForArticle);
    return this.imagesForArticle[0]?.url ?? "assets/images/image-placeholder.png";
  }

  getMessagesForArticle() {
    this.articleService.getMessagesForArticle(this.articleId).subscribe(value => {
      this.messagesForArticle = value;
    })
  }
}