/*

Fact Check Review Beta Column Widget - Vue.js app

Summary:
Loads 3 charts stacked from json cache

Dependencies:
Vue js 2.5.13
jQuery 1.11.3

Browser Requirements:
IE9+

*/
  /////////////////////
 // Chart Component //
/////////////////////

/* Simplified version based on fc-chart from fact_check_app_v#.js */

Vue.component('fc-chart', {
  template: '<div class="fc-chart-wrapper" >'+
  '<div class="visual">'+
    '<h3 ref="h3" v-html="title"></h3>'+
    '<div class="fact-checker-wrapper" >'+
      '<div '+
        ' v-if="data.fact_check_orgs.length > 0" '+
        ' v-for=" (fco, i) in data.fact_check_orgs " '+
        ' class="fact-checker-bar" '+
        ' >'+
            '<div class="fact-checker-icon" >'+
              '<img v-if="get_source_logo(fco.name)" :src="get_source_logo(fco.name)">'+
              '<div class="fact-checker-short-name">'+
                '{{ fco.name }}'+
              '</div>'+
            '</div>'+
            '<div class="fact-checker-the-bar-graph-wrapper" >'+
              '<div class="fact-checker-bar-graph" :style="{ width: bar_width(fco) }" >'+
              '</div>'+
              '<div v-if="!numCompareWithTop" '+
                ' :class="[ in_bar_graph_font_color(get_perc(fco)), in_bar_text_pos(get_perc(fco)) ]" '+
                ' class="in-bar-text" '+
                ' >'+
                '{{fco.result}} of {{fco.out_of}}'+
              '</div>'+
            '</div>'+
            '<div class="fact-checker-percent" >'+
              '<div class="fact-checker-percent-text" '+
                'v-html="!numCompareWithTop ? fco.perc+\'%\' : fco.result" >'+
              '</div>'+
            '</div>'+
          '</div>'+
    '</div>'+
  '</div>'+
'</div>',
  props : ['title', 'data', 'numCompareWithTop'],
  mounted: function(){

    this.$forceUpdate();
  },
  methods: {

    bar_width: function(fco) {

      if(this.numCompareWithTop) {
        return Math.round((fco.result / this.data.fact_check_orgs[0].result) * 100)+'%'
      } else {
        return this.get_perc(fco)+'%'
      }

    },

    get_source_logo: function(source){

      var logo = '';
      var folder = 'publishers/icons/';
      folder = 'https://www.realclearpolitics.com/fact_check_review/'+folder;

      switch(source){
        case 'Five Thirty Eight':
          logo = folder + '538.png';
          break;
        case 'New York Times':
        case 'NYTimes':
          logo = folder + 'new_york_times.png';
          break;
        case 'Huffington Post':
          logo = folder + 'HuffPo.png';
          break;
        case 'Publisher\'s Weekly':
          logo = folder + 'pw.png';
          break;
        case 'Politifact':
          logo = folder + 'icon-politifact-square.png';
          break;
        case 'Washington Post':
        case 'WaPo':
          logo = folder + 'washington_post.png';
          break;
        case 'FactCheck.org':
        case 'FactCheck':
        case 'Factcheck':
          logo = folder + 'icon-factcheck-square.png';
          break;
        case 'Snopes':
          logo = folder + 'icon-snopes-square.png';
          break;
        case 'Weekly Standard':
          logo = folder + 'the-weekly-standard-logo.png';
          break;
        default:
          break;
      }

      return logo;
    },

    in_bar_graph_font_color: function(percent){
      return ( parseInt(percent) >= 62 ) ? 'in-bar-text-color-above' : 'in-bar-text-color-below';
    },

    in_bar_text_pos: function(percent){
      return ( parseInt(percent) >= 55 && parseInt(percent) <= 62 ) ? 'in-bar-text-padding-top-increase' : '';
    },

    get_perc: function(fco) {

      if(typeof fco.perc !== 'undefined') {
        return fco.perc;
      } else {
        return Math.floor((fco.result / fco.out_of) * 100);
      }
    }
        
  },
  computed:{
    high_value: function(){
      var high_val = 0;

      for(var i in this.data.fact_check_orgs){
        this.data.fact_check_orgs[i].result = parseInt(this.data.fact_check_orgs[i].result);
        if(this.data.fact_check_orgs[i].result > high_val){
          high_val = this.data.fact_check_orgs[i].result
        }
      }
      
      return high_val;        
    },
    high_value_string: function(){
      return 'repeat('+this.high_value+', 1fr)';
    },
    bar_graph_comparor:function(){
      return Math.floor((this.high_value/2));
    }

  }
});

  ////////////////////
 // Main Component //
////////////////////

Vue.component('rc-container', {
  template: ''+
    '<div class="app_container">'+
      '<div class="header">'+
        '<a class="title" href="/fact_check_review"><span class="letter">F</span>act <span class="letter">C</span>heck <span class="letter">R</span>eview</a>'+
        '<div class="summary">'+
          'Each week, we review fact-checking outlets that Facebook uses for guidance. '+
        '</div>'+
      '</div>'+
      '<div class="charts">'+
        '<fc-chart '+
          'title="Fact vs. Opinion Checks" '+
          ':data="chart_data_fact_vs_opinion" '+
        '></fc-chart>'+
        '<fc-chart '+
          'title="Media Sourcing Itself" '+
          ':data="chart_data_sourcing_media" '+
        '></fc-chart>'+
        '<fc-chart '+
          'title="Fact Checking Marketplace" '+
          ':data="chart_data_fact_checkers" '+
          'num-compare-with-top="true" '+
        '></fc-chart>'+
      '</div>'+
      '<div class="view_more">'+
        '<a href="https://www.realclearpolitics.com/fact_check_review/">View Full Review</a>'+
      '</div>'+
    '</div>',
  data : function() {
    return {
      chart_data_fact_vs_opinion : { "fact_check_orgs" : [] },
      chart_data_sourcing_media : { "fact_check_orgs" : [] },
      chart_data_fact_checkers : { "fact_check_orgs" : [] }
    }
  },
  created : function() {
    this.load_content();
  },
  methods : {
    plug_in_query_data : function(data) {

      // Clear existing data first
      this.chart_data_fact_checkers.fact_check_orgs = [];
      this.chart_data_sourcing_media.fact_check_orgs = [];
      this.chart_data_fact_vs_opinion.fact_check_orgs = [];

      console.log(data);

      for(var i = 0; i < data.fact_checking_marketplace.length; i++) {

        var fco = data.fact_checking_marketplace[i];
        var new_fco = {
          name : fco.name,
          result : fco.fact_checkers_count,
          out_of : fco.fact_checkers_total
        }
        this.chart_data_fact_checkers.fact_check_orgs.push(new_fco);
      }

      for(var i = 0; i < data.media_sourcing_itself.length; i++) {

        var fco = data.media_sourcing_itself[i];
        var new_fco = {
          name : fco.name,
          perc : Math.round(fco.percent),
          result : fco.media_count,
          out_of : fco.media_count_total
        }
        this.chart_data_sourcing_media.fact_check_orgs.push(new_fco);
      }

      for(var i = 0; i < data.fact_vs_opinion.length; i++) {

        var fco = data.fact_vs_opinion[i];
        var new_fco = {
          name : fco.name,
          perc : Math.round(fco.percent),
          result : fco.factual_claims,
          out_of : fco.total_claims
        }
        this.chart_data_fact_vs_opinion.fact_check_orgs.push(new_fco);
      }
    },
    cache_buster: function(){

      return Math.floor(Date.now() / 300000);
    },
    load_content : function() {

      $.ajax({
        method: 'get',
        dataType : 'jsonp',
        url: window.location.protocol+'//www.realclearpolitics.com/json/recent_query_livev2.jsonp?nocache='+this.cache_buster(),
        jsonpCallback: "jsonCallback",
        success: function(res){

          if( typeof res == 'object'){

            this.plug_in_query_data(res);

          }else{
            console.log("data not an object");
          }

        }.bind(this)
      });
    }
  }
});

// Start App
new Vue({
  el: '#fcr_alpha_widget'
});