import { Component, OnInit, Input,ViewEncapsulation, ViewChild, ElementRef, Renderer2, AfterViewInit, ViewChildren, QueryList, ChangeDetectionStrategy, OnChanges, SimpleChanges} from '@angular/core';
import { Subscription } from 'rxjs';
import { PostService } from 'src/app/services/post.service';
import { Post } from 'src/app/models/post.model';
import { PostsGroup } from 'src/app/models/postsGroup.model';
import { Thread } from 'src/app/models/thread.model';
import { LocalStorage } from 'src/app/appSettings';
import { ThreadService } from 'src/app/services/thread.service';
import { LocalStorageThread } from 'src/app/models/LocalStorageThread.model';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-thread',
  templateUrl: './thread.component.html',
  styleUrls: ['./thread.component.sass'],
  encapsulation: ViewEncapsulation.None
})
export class ThreadComponent implements OnInit,AfterViewInit, OnChanges  {
  @Input() thread_id: number ;
  @Input() post_id: number ;
  @Input() showUnfollowedThread: boolean ;

  @ViewChildren('postsView') postsView: QueryList<any>;
  postGroup : PostsGroup;
  postSubscription: Subscription;
  private sub: any;

  constructor(private PostService: PostService,
              private ThreadService: ThreadService,
              private renderer: Renderer2,
              private route: ActivatedRoute) { }

  ngOnInit() {
    // this.sub = this.route.params.subscribe(params => {
    //   this.thread_id = +params['id']; // (+) converts string 'id' to a number

    //     // In a real app: dispatch action to load the details here.
    // });

    this.postGroup = new PostsGroup(this.thread_id,null,[]);
    this.postSubscription = this.PostService.postsSubject.subscribe(
      (groupsPost: PostsGroup[]) => {
        this.postGroup = groupsPost[this.thread_id];//this.findPost(this.thread_id, groupsPost);
        // this.posts = posts;

      }
    );
    this.PostService.emitPostsSubject();
    this.onFetch();
  }
  ngAfterViewInit() {
    this.postsView.changes.subscribe(t => {
      this.ngForRendred();
    })
  }
  ngOnChanges(changes: SimpleChanges) {
    // this will be called each time userInput changes
    this.ngOnInit();
  }

  ngForRendred() {
    this.autoScroll();
  }
  findPost(thread_id: number, postGroup: PostsGroup[]): PostsGroup {
    for (let index = 0; index < postGroup.length; index++) {
      let pg : PostsGroup = postGroup[index];
      if(pg.thread_id == thread_id)
        return pg;
    }
    return null;


  }
  onFetch() {
    this.PostService.getPageOfPostById(this.thread_id,this.post_id);
  }

  autoScroll() : void{
    let currentPosts = this.postGroup.posts[this.postGroup.posts.length -1];
    const fragment = "post-" + currentPosts.post_id;
    const element = this.renderer.selectRootElement(`#${fragment}`, true);
    element.scrollIntoView({ behavior: 'smooth', block: "start"  });
  }
  checkPostsGroup() : boolean{
    if(this.postGroup != null && this.postGroup.posts!=null && this.postGroup.posts.length > 0)
      return true;
    return false;
  }
  checkForPreviousPost() : boolean{
    if(this.postGroup != null && this.postGroup.last_page_id_loaded != null && this.postGroup.last_page_id_loaded >= 2)
      return false;
    return true;

  }
  onLoadPreviousPosts(){
    if(this.postGroup.last_page_id_loaded == null || this.postGroup.last_page_id_loaded < 1)
      return;
    this.postGroup.last_page_id_loaded--;
    this.PostService.getPageByNumber(this.thread_id,this.postGroup.last_page_id_loaded);
  }
  onRead(){
    let threadsViewed = <LocalStorageThread[]>JSON.parse(localStorage.getItem(LocalStorage.THREADS)) || [];
    let i = this.findThreadViewed(threadsViewed,this.thread_id);
    if(i == null)
      threadsViewed.push(new LocalStorageThread(this.thread_id,this.postGroup.posts[this.postGroup.posts.length - 1].post_id, false));
    else
      threadsViewed[i] = new LocalStorageThread(this.thread_id,this.postGroup.posts[this.postGroup.posts.length - 1].post_id, false);

    localStorage.setItem(LocalStorage.THREADS, JSON.stringify( threadsViewed));
    this.ThreadService.deleteThreadById(this.thread_id);
    // <number[]>JSON.parse(localStorage.getItem('forum'))
  }
  onUnfollow(){
    let threadsUnfollowed = <LocalStorageThread[]>JSON.parse(localStorage.getItem(LocalStorage.THREADS)) || [];
    let i : number =  this.findThreadViewed(threadsUnfollowed,this.thread_id);
    if(i == null)
      threadsUnfollowed.push(new LocalStorageThread(this.thread_id,this.postGroup.posts[this.postGroup.posts.length - 1].post_id, true));
    else
      threadsUnfollowed[i] = new LocalStorageThread(this.thread_id,this.postGroup.posts[this.postGroup.posts.length - 1].post_id, true);



    localStorage.setItem(LocalStorage.THREADS, JSON.stringify( threadsUnfollowed));
    this.ThreadService.deleteThreadById(this.thread_id);
    // console.log(JSON.parse(localStorage.getItem(LocalStorage.THREADS)));
  }
  onfollow(){
    let threadsfollowed = <LocalStorageThread[]>JSON.parse(localStorage.getItem(LocalStorage.THREADS)) || [];
    let i : number =  this.findThreadViewed(threadsfollowed,this.thread_id);
    if(i == null)
      threadsfollowed.push(new LocalStorageThread(this.thread_id,this.postGroup.posts[this.postGroup.posts.length - 1].post_id, false));
    else
      threadsfollowed[i] = new LocalStorageThread(this.thread_id,this.postGroup.posts[this.postGroup.posts.length - 1].post_id, false);



    localStorage.setItem(LocalStorage.THREADS, JSON.stringify( threadsfollowed));
    this.ThreadService.deleteThreadById(this.thread_id);
    console.log(JSON.parse(localStorage.getItem(LocalStorage.THREADS)));
  }

  findThreadViewed(array : LocalStorageThread[], findId) : number{
    for (let index = 0; index < array.length; index++) {
      const element = array[index];
      if(element.thread_id == findId)
        return index;

    }
    return null;
  }
}