import { Component, OnInit } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { UserService } from "../../shared/user.service";
import { Router } from "@angular/router";
import { User } from "../../shared/user.model";
import { jsonpCallbackContext } from "@angular/common/http/src/module";

// import * as Highlight from './articleinfo';

@Component({
  selector: "app-display-article",
  templateUrl: "./display-article.component.html",
  styleUrls: ["./display-article.component.css"]
})

export class DisplayArticleComponent implements OnInit {
  response: any;
  article_id: any;
  article_info: any;
  article_title: any;
  article_url: any;

  concepts: any;
  authors: any;
  article: any;
  year: any;
  url: any;
  abstract: any;
  userDetails;
  query: string = window.location.search.substring(1).split("=")[1];
  selectedUser: User = {
    fullName: "",
    email: "",
    password: "",
    accountType:"",
    articles: [],
    search: [],
    click: [],
    feedback: []
  };
  constructor(
    private http: HttpClient,
    private userService: UserService,
    private router: Router,
  ) {}

  //This function gets called when the page opens
  //It will return the article information for the query thats in the URL
  //and assign the variables with their corresponding attributes
  ngOnInit() {
    var objParams = {article_id : this.query}
    this.userService.getArticle(objParams).subscribe(response => {
        //Set this.response to the JSON file
        this.response = response;
        //Set this.article_info to the JSON file to be sent to another component through the ArticleInformationService
        this.article = this.response;
        this.article_title = this.article._source.title;
        this.article_id = this.article._source.article_id;
        this.authors = this.article._source.authors;
        this.year = this.article._source.cover_date;
        this.url = this.article._source.url;
        this.abstract = this.article._source.abstract;
        this.concepts = this.article._source.keywords;
      });
  }

  //This function is called when the user clicks the Save link
  //It will get the article information and put it into an object to
  //then send over through the addArticle() function
  saveArticle(
    article_id: number,
    title: string,
    authors: Array<string>,
    year: string,
    abstract: string,
    article_url: string
  ) {
    var articleInfo = {
      articles: {article_id, title, authors, year, abstract,article_url }
    };
    this.userService.getUserProfile().subscribe(
      res => {
        this.userDetails = res["user"];
        this.userService.addArticle(articleInfo).subscribe();
        document.getElementById(title).innerHTML = "Saved!";
      },
      err => {}
    );
  }

 //Opens Save popup
  save_success(id) {
    var e = document.getElementById(id);
    if (e.style.display == "block") {
      e.style.display = "none";
    } else {
      e.style.display = "block";
    }
  }

  //Opens Cite popup (currently hard coded text since the JSON file
  //does not have citation information)
  toggle_cite(id) {
    var e = document.getElementById(id);
    if (e.style.display == "block") {
      e.style.display = "none";
    } else {
      e.style.display = "block";
    }
  }

  //Opens the Share popup
  share(id) {
    var e = document.getElementById(id);
    if (e.style.display == "block") {
      e.style.display = "none";
    } else {
      e.style.display = "block";
    }
  }

  //============FEEDBACK============//
  feedback() {
    var question1 = prompt("How do you like the website?", "I love it!");
    var question2 = prompt("Rate your experience: 1-10", "10");
    /*if (!this.userService.isLoggedIn()) {
      this.router.navigateByUrl("/login");
    };*/
    var answer1 = {
      question: { question1, question2 }
    };

    this.userService.question(answer1).subscribe();
  }

  //============HIGHLIGHT TEXT============//
  highlight_text(abstract, text, id) {
    var e = document.getElementById(id);

    // Some abstracts do not have a period in the last sentence, so this was added to check for the period.
    // When there is no period, the regex does not identify it as a sentence.
    var last_char =  abstract[abstract.length-1];
    if(last_char != '.') {
      abstract = abstract + '.';
    }

    for(var key in text) {
      var concept = text[key].toString();
    }
    var sentences = abstract.match(/\(?[^\.\?\!]+[\.!\?]\)?/g);
    var i;
    for (i=0; i<sentences.length; i++) {
      if (sentences[i].toLowerCase().indexOf(concept) > -1) {
        sentences[i] = '<span style=\"background-color: yellow;\">'+sentences[i]+'</span>';
      }
    }
    var new_abstract = sentences.join(' ');
    e.innerHTML = new_abstract.toString();
  }

}
