'use strict'


  $(function () {
      $('[data-toggle="popover"]').popover()
  })

  //move to front
  d3.selection.prototype.moveToFront = function() {
  return this.each(function(){
    this.parentNode.appendChild(this);
  });
  };

  d3.selection.prototype.moveToBack = function() {  
        return this.each(function() { 
            var firstChild = this.parentNode.firstChild; 
            if (firstChild) { 
                this.parentNode.insertBefore(this, firstChild); 
            } 
        });
    };

  
  let chargeCalc = function(num){
      console.log(num);

      if(num < 800){
        return -30
      }
      if(num < 1000){
        return -23
      }
      if(num < 2000){
        return -18
      }
      if(num < 3000){
        return - 12
      }
      if(num < 4000){
        return -8
      }
      if(num < 5000){
        return -6
      }
      if(num < 6000){
        return -5
      }
      return -3
}


  //format labels
function labely(i, text){
    var row = 35
    var sq = square 
    if(text){
      sq  = 0
  }
   // var row = 20
    if( i < 4){
      return row - sq
    }
    if( i < 8){
      return row * 2  - sq
    }
    if( i < 12){
      return row * 3 - sq
    }
    if( i < 16){
      return row * 4 - sq
    }
    if( i < 20){
      return row * 5 - sq
    }
  }


function setClass(node, d, i){
 /* d.tweets_in_text.forEach(function(tag){
    node.classed(tag, true)
  })*/
  return true
}


let totalwidth = window.innerWidth
let totalheight = window.innerHeight

  let width = totalwidth * .75,
      height = totalheight * .85,
      radius = 4,
      charge = -20,
      linkDistance = 20,
      textboxwidth = 170,
      barheight = 80

  if (height < 670){
    height = 670
  }

let labelcols = 4

let  labelenclosewidth = width

  let labelwidth = (width)/4 - 10
  let square = 15



var parseDate = d3.timeParse('%a %b %d %X +0000 %Y')
  var origin = 220
  var slide_h = 150
  

  var twitterTopics = angular.module('twitterstuff', [], function($locationProvider) {
    $locationProvider.html5Mode(true);
  });

  twitterTopics.controller('twitterselect',['$scope', function($scope){

  let supp_path = window.location.search.replace('?', "")

  supp_path = supp_path.split("&")[1]
  //supp_path = ""
  let files = [ "debatessearch.json", "leftseeds.json", "rightseeds.json", "leftlevel1.json", "rightlevel1.json", "debatessearch.json", "fullleft.json", "fullright.json", "alldebatehashatagsweek.json", "18_28left.json", "18_28right.json", "18-28botsr.json", "18-28botsl.json", "18_28botslevel1.json", "18_28botslevel1l.json","bernietest.json", "bernietestLevel1.json", "formatted_data_blm/a10aug.json", "formatted_data_blm/a11aug.json", "formatted_data_blm/a12aug.json", "formatted_data_blm/a13aug.json", "formatted_data_blm/a14aug.json", "formatted_data_blm/a15aug.json", "formatted_data_blm/a16aug.json", "formatted_data_blm/a17aug.json", "formatted_data_blm/a18aug.json", "formatted_data_blm/a19aug.json", "formatted_data_blm/a20aug.json", "formatted_data_blm/a21aug.json", "formatted_data_blm/a22aug.json", "formatted_data_blm/a23aug.json","formatted_data_blm/a22nov.json", "formatted_data_blm/a23nov.json","formatted_data_blm/a24nov.json","formatted_data_blm/a25nov.json","formatted_data_blm/a26nov.json","formatted_data_blm/a27nov.json","formatted_data_blm/a28nov.json","formatted_data_blm/a29nov.json","formatted_data_blm/a30nov.json", "formatted_data_blm/a1dec.json","formatted_data_blm/a2dec.json","formatted_data_blm/a3dec.json","formatted_data_blm/a4dec.json","formatted_data_blm/a5dec.json","formatted_data_blm/a6dec.json","formatted_data_blm/a7dec.json","formatted_data_blm/a8dec.json",]
  let file = ""
  console.log(supp_path)
  if(supp_path == undefined){
    file = files[0];
  }
  else {
    file = "2020_data/" + supp_path + ".json"
  }
  console.log(file)
  
  let selectThing = d3.select("#file_select").on("change", function(d){

   file = document.getElementById("file_select").value;
   $scope.viz()
  })

  selectThing.selectAll("option").data(files).enter().append("option").attr("value", function(d){
    return d
  })
  .text(function(d){
    return d
  })



  $scope.nodeToggle = 1

  let hashcolor = d3.scaleOrdinal(d3.schemeCategory10);
  let color = d3.scaleOrdinal(d3.schemeSet2)


  
 /* $scope.days=[]
  for(let i = 25; i < 26; i++){
    $scope.days.push(i)
  }
  $scope.day = 25*/





  $scope.viz = async function(){
  console.log()
   d3.select('#svg_network').remove()
   d3.select('#labelgraph').remove()
   d3.select("#svgbar").remove()
   d3.select("#graph_metrics_table").remove()


let barChart = d3.select("#barchart")
      .append("svg")
      .attr("width", width)
      .attr("height", barheight)
      .attr("id", "svgbar")

var barg = barChart.append("g")
    .attr("transform", "translate(" + 50 + "," + 5 + ")");
  console.log(file)
  let graph = await d3.json(filepath + file)

  console.log(graph)
  let bots = await d3.csv(filepath + 'bots.csv')
  let news = await d3.csv(filepath + 'customnews.csv')



 // console.log(graph.terms)

 let terms = graph.terms.sort(function(a,b){
  return b.score - a.score
 });
 terms = terms.slice(0, 20)

 console.log(terms)
let x = d3.scaleBand().rangeRound([0, width - 45]).padding(0.1)
    x.domain(terms.map(function(d){
      return d.h
    }))
let  y = d3.scaleLinear().rangeRound([barheight - 35, 0]);
    y.domain([0, d3.max(terms, function(d){
      return d.score;
    })])

let rad = d3.scaleLinear()
 rad.domain(d3.extent(graph.nodes, function(d){
  return d.score;
 }))
 rad.range([2, 30])

barg.append("text").attr("class", "label_text")
  .attr("x", (width - 45)/2)
  .attr("y", 10)
  .text("Top hashtags used in Network")

barg.append("g")
      .attr("class", "axis axis--x")
      .attr("transform", "translate(0," +(barheight - 35 )+ ")")
      .call(d3.axisBottom(x));

barChart.append("g")
  .attr("transform", "translate(45, 5)")
   .attr("class", 'y-axis')
    .call(d3.axisLeft(y).ticks(4));



let thebars = barg.selectAll(".bar")
    .data(terms)
    .enter().append("rect")
      .classed("bar", true)
      .attr("x", function(d) { return x(d.h); })
      .attr("y", function(d) { return y(d.score); })
      .style("fill", function(d, i){
        if (i < 9){
          return hashcolor(i) 
        }
        {
          return hashcolor(8)
        }

      })
      .attr("width", x.bandwidth())
      .attr("height", function(d) { return (barheight  - 35)- y(d.score); })
      .on("click", function(d, i){
        d3.select(this).classed('bar-select', function(d){

        let se = d3.select(this).classed('bar-select')
        console.log(se)
        let barcolor = hashcolor(8)
        if (i < 9){
          barcolor = hashcolor(i) 
        }
        d3.selectAll('.' + d.h).style("fill", function(d){
          if(se){
           
             d3.select(this).select("circle").style("fill", "lightgrey")
          }
          else{
             console.log(d3.select(this).select("circle").style("fill"))
               d3.select(this).select("circle").style("fill", barcolor)
          }
        })
        .classed("hashcolored"+ i, !se)
        d3.selectAll('.' + d.h + "row").style("background-color", function(d){
          if(se){
             return "lightgrey";
          }
          else{
               return barcolor
          }
        })
        .classed("hashcolored"+ i, !se)


          return !d3.select(this).classed('bar-select');
        })
       // console.log(d3.selectAll('.' + d.h))

      });

thebars.append("svg:title").text(function(d){
    return "click to highlight users who used this hashtag: #" + d.h + " time used: " + d.score
  })

barg.selectAll("text").attr("text-anchor", "middle").attr("transform", "rotate(10)").style("font-family", 'monospace')

barg.select(".label_text").attr("transform", "rotate(0)")


  let table = d3.select("#graph-table")
                .append("table")
                .attr("id", "graph_metrics_table")

  let tablehead = table.append("thead")

  let tablebody = table.append("tbody")
 let headData =  ["handle", "betweenness", "degree"]

  tablehead.append("tr")
        .selectAll("th")
        .data(headData)
        .enter()
        .append("th")
          .attr("id", function(d){
            return d + "-td"
          })
          .text(function(d){
            return d;
          })

          .on("click", function(d, i){
             rows.sort(function(a, b) { 
              return b.graph_score[d] - a.graph_score[d];
               });
          })
          .style("cursor", "pointer")



let rows = tablebody.selectAll("tr")
                .data(graph.nodes.filter(function(d){
                  if(d.graph_score.betweenness < 0.0001 && d.graph_score.degree < 0.0005){
                    return false
                  }
                  return true
                }))
                .enter()
                .append("tr")
                .style("background-color", function(d){
               //   console.log(d.grou)
                  return "lightgrey"
                })
                .attr("class", function(d){
                  let class_string = ""
                  d.hashtags.forEach(function(h){
                    class_string = class_string + " " + h + "row"
                  })

                  class_string = class_string + " name" + d.name
                  return class_string
                })
                .on("click", function(d){
                  d3.select("#" + d.name).moveToFront()
                  d3.select("#" + d.name).attr("durr", enlargeNode)
                })
                .on("mouseover", function(d){
                  d3.select(this).classed('rowmouseover', true)
                  d3.select('#n' + d.name).dispatch("mouseover")
                })
                .on("mouseout", function(d){
                  d3.select(this).classed('rowmouseover', false)
                  d3.select('#n' + d.name).dispatch("mouseout")
                })
                .style("cursor", "pointer")

rows.sort(function(a, b) { 
              return b.graph_score['betweenness'] - a.graph_score['betweenness'];
               });
let f = d3.format("<.4f")
let cells = rows.selectAll("td")
              .data(function(row) {
                return headData.map(function (column2) {
                  //console.log(column)]
                  return { column: column2, value: row.graph_score[column2]}
                });
              })
              .enter()
              .append('td')
                .text(function(d){
                  if (d.column != "handle"){
                     return f(d.value)
                  }
                 return d.value
                })



  let newLinks = graph.links


   console.log(graph)
   console.log(bots)



   let botsdict = {}
    bots.forEach(function(d){
      botsdict[d.name] = 1;
    })
  let newsdict = {}
    news.forEach(function(d){
      newsdict[d.name] = 1;
    })


  let cScale = d3.scaleLinear().domain([0, graph.terms.length]).range([0, 2 * Math.PI]);


  let charge = chargeCalc(graph.nodes.length)

  let simulation = d3.forceSimulation()
    .force("charge", d3.forceManyBody().strength(charge))
    .force("collision", d3.forceCollide().radius(function(d){
      return 0
    }))
    .force("center", d3.forceCenter(width / 2, height / 2))
    .force("link", d3.forceLink().iterations(2).id(function(d) { return d.id; }))
    .force("x", d3.forceX())
    .force("y", d3.forceY())
    .on("tick", ticked);


  let svg = d3.select("#network").append("svg").attr("id", "svg_network")
    .attr("height", height)
    .attr("width", width)




  function showName(el){
    d3.select(".name" + el.name).classed("rowmouseover", true)
    d3.selectAll(".c" + el.id).classed("redhighlight", true).style("fill", function(d){
      if(d.target.name == el.name){
        d3.select("#n" + d.source.name).select("circle").style("stroke","darkred").style("opacity", 1)
      }
      else{
        d3.select("#n" + d.target.name).select("circle").style("stroke","darkred").style("opacity", 1)
      }
      
      return "none"
    })
    let selnode = d3.select(this)
    selnode.select("circle").classed("node-select", true)
    selnode.moveToFront();
    selnode.select("rect").moveToFront()
    selnode.select("text").moveToFront()
    selnode.style("opacity", 1)
    selnode.style('stroke-opacity', 1)

          
    selnode.select('.nametext').classed('hide', true)
    selnode.select('rect').classed('hide', true)
  }

    function selectHashtag(d,i){

    let box = d3.select(this)
    if (box.attr('class') == 'unselected'){
      box.attr('class', 'selected')
      box.select('#select' + d).transition()
          .duration(250)
          .style('opacity', .5)
          
       d3.selectAll('.' + d)
      .classed('hide', true)
    }
    else{
      box.attr('class', 'unselected')
      box.select('#select' + d).transition()
          .duration(250)
          .style('opacity', .1)
         d3.selectAll('.' + d)
      .classed('hide', false)
    }


    return 1
  }

function enlargeNode(){

  let selnode = d3.select(this)
 
  let selcircle = selnode.select("circle")
  if (selnode.classed("small")){
    selnode.classed("big", true)
    selnode.classed("small", false)
    selcircle.transition().duration(250)
          .attr("r", 30)
  }
  else {
    selnode.classed("big", false)
    selnode.classed("small", true)
    selcircle.transition().duration(250)
          .attr("r", function(d){
            if ($scope.nodeToggle == 1){
              return rad(d.score)
             }
             else{
              return Math.sqrt(d.retweet_count/Math.PI) 
             }
           
          //  return 7 *  Math.sqrt(d.score/Math.PI);
          })
  }
      if (selnode.classed("big")){


    let fo = selnode.append("foreignObject")
    .attr("width", textboxwidth)
    .attr("class", "textbox")
    .attr("height",  function(d){
               let len = 0
              d.text.forEach(function(tweet){
                len = len + tweet.length
              })
            return   (len/20 + 2) * 13
              })
    .attr("x", function(d){
      let selX = selnode.attr("transform").slice(10, 16) 
      if (selX > (width/2)){
        return -textboxwidth
      }
      return 0
    })
    .attr("y", function(d){
      let selY = selnode.attr("transform").slice(selnode.attr("transform").indexOf(",") + 1, selnode.attr("transform").indexOf(",") + 7)
      if (selY > height/2){
        return  - (d.text.length * 50)
      }

      return 0

    })

     let div = fo.append("xhtml:div").append("div")
      .style('color', "black")
      .style('background-color', function(d){
        return "lightgrey";
       //return "lightgrey";
       })
      .style("border-radius", "0px 0px")
      .style("stroke", "grey")
      .style("box-shadow", '5px 10px')
    div.append("p").html(function(d){
       let text = d.name + ':'
        d.text.forEach(function(entry){
          text = text + '<br>____<br>' + entry
        })
        return text
    });
  }
  else{
    selnode.select(".textbox").remove()
  }

    return
  }


function hideName(el){
  d3.select(".name" + el.name).classed("rowmouseover", false)


  d3.selectAll(".c" + el.id).classed("redhighlight", false).style("fill", function(d){
      if(d.target.name == el.name){
        d3.select("#n" + d.source.name).select("circle").style("stroke","grey").style("opacity", .6)
      }
      else{
        d3.select("#n" + d.target.name).select("circle").style("stroke","grey").style("opacity", .6)
      }
      
      return "none"
    })
    let selnode = d3.select(this)
    selnode.select('circle').classed('node-select', false)
    if (!d3.select(this).classed("big")){
      selnode.moveToBack()
      link.moveToBack()
      //link2.moveToBack()
    }

    selnode.select('.nametext').classed('hide', true)
    selnode.select('rect').classed('hide', true)
  }


    let linkbox = svg.append("g")
                .attr("class", "links")


 let link  = linkbox.selectAll(".line")


  let node = svg.append("g")
      .attr("class", "nodes")
    .selectAll("g")
let restarted = true;
function restart(){


  link = link.data(newLinks, function(d){
    return d.source.name + "_" + d.target.name;
  })
  link.exit().remove()

  

  link = link.enter().append("line")
      .attr("stroke", "grey")
      .attr("stroke-opacity", .3)
      .attr("stroke-width", function(d){ 
        if (files.indexOf(file) < 5){
           return d.value / 3;
        }
        return (1/d.value) / 3; })
      .style("fill", "none")
      .attr("class", function(d){
        return "c" + d.source + " " + "c" + d.target
      })
      .on("click", function(d){
        console.log(d)
      }).merge(link);

    if(restarted){
   
    node = node.data(graph.nodes, function(d){
      return d.id
    })

    node.exit().remove()

    node = node.enter().append("g")
      .attr("id", function(d){
        return "n" + d.name
      })
      .attr('hashtags', function(d){
        let hclass = ""
      let theNode =   d3.select(this)
      d.hashtags.forEach(function(h){
       theNode.classed(h, true)
      });
      //console.log(hclass)
       return hclass;
      })
      .classed('small', function(d, i){
        //add tweet classes for quick selection/removal
        var thing = setClass(d3.select(this), d, i)
        return thing
      })
      .classed("bots", function(d){

        if (d.name in botsdict){
          return true;
        }
        else{
          return false
        }
      })
      .classed("news", function(d){
        if (d.name in newsdict){
          return true;
        }
        else{
          return false
        }
      })/*.call(d3.drag()
          .on("start", dragstarted)
          .on("drag", dragged)
          .on("end", dragended)).merge(node);*/




  let circle = node.append("circle")
      .attr("r", function(d){
        return rad(d.score)//7 * Math.sqrt((d.score/Math.PI))
      })
     .classed("node-norm", true)
      .style("stroke-width", 1)


  node.on('click', enlargeNode)
    /*.on("dblclick", function(d){
      d3.select(this).classed("no_display", true)
      filter(d);
    })*/
    .on('mouseover', showName)
    .on('mouseout',hideName)
    let labelrects = node.append('rect')
            .attr("x", -5)
            .attr("y", -15)
            .attr('rx', 5)
            .attr('ry', 5)
            .attr("height", '20px')
            .attr('width', function(d){
                return  d.name.length * 10
            })
            .style("stroke", "darkred")
            .classed('hide', true)
    .style("fill", "lightgrey")
    let text = node.append('text')
            .attr('x', 0)
            .attr('y', 0)
            .attr('class', 'nametext')
             .style('font-family', 'monospace')
             .style('fill', 'black')
             .style('stroke', function(d){return "lightgrey"})
             .style('stroke-width', .1)
             .style('background-color', 'black')
            .style('font-size', '14px')
            .text(function(d){return d.name;})
            .classed('hide', true);

  simulation.nodes(graph.nodes).on("tick", ticked);
}
  simulation.force("link").links(newLinks);
  simulation.alpha(.1).restart();
  restarted = false
  };//restart
   
restart()
let restoreButton = d3.select('#restoreButton').on("click", restoreLinks)

function restoreLinks(){
  d3.selectAll(".no_display").classed("no_display", false)
  newLinks = graph.links;
  restart()
}


d3.select("#searchName").on("keydown", function(){
    if (d3.event.keyCode==13){

      let handle = document.getElementById("searchName").value
    //  console.log(document.getElementById("searchName").value)
      d3.select('#' + handle).attr("nada", enlargeNode)
    }
  })


let removeHandleButton = d3.select('#nameButton').on("click", function(d){
    let handle = document.getElementById("searchName").value
          d3.select('#' + handle).attr("id", function(d){
         d3.select(this).classed("no_display", true)
         filter(d);
         return  d3.select(this).attr('id')
      })
  })

  let botsButton = d3.select("#botsButton").on("click", function(d){
    let botsNodes = d3.selectAll('.bots')
    botsNodes.attr('id', function(d){
      //console.log(d)
      d3.select(this).classed("no_display", true)
      filter(d)
      return d3.select(this).attr('id');
    })

  })

  let newsButton = d3.select("#newsButton").on("click", function(d){
    let newsNodes = d3.selectAll('.news')

    console.log(newsNodes)
    newsNodes.attr('id', function(d){
      console.log(d)
      d3.select(this).classed("no_display", true)
      filter(d)
      return d3.select(this).attr('id');
    })

  })





node.attr("id", function(d){
    if(d.retweets == 0 && d.links == 0){
       d3.select(this).attr("display", "none")
    }
   
    return d3.select(this).attr("id");
  })



  function filter(d){
    //simulation.stop()
    newLinks = newLinks.filter(function(link){
      if (link.target == d || link.source == d){
        return false
      }
      return true
    })

    restart()


  }


let count = 0


function ticked() {
    count++;
    link
        .attr("x1", function(d) { return d.source.x; })
        .attr("y1", function(d) { return d.source.y; })
        .attr("x2", function(d) { return d.target.x; })
        .attr("y2", function(d) { return d.target.y; });

   

        node
        .attr("transform", function(d){
           let xtrans = Math.max(radius, Math.min(width - d.score, d.x))
           let ytrans = Math.max(radius, Math.min(height -d.score, d.y))
          return "translate(" + xtrans + "," + ytrans + ")";  })
  if(count > 10){
    simulation.stop()
  }


  //  simulation.stop()
  }


function dragstarted(d) {
 if (!d3.event.active) simulation.alphaTarget(0.1).restart();

  d.fx = d.x;
  d.fy = d.y;
}

function dragged(d) {
  d.fx = d3.event.x;
  d.fy = d3.event.y;
}

function dragended(d) {
  if (!d3.event.active) simulation.alphaTarget(0);
  d.fx = null;
  d.fy = null;
}


$scope.toggleButton = function(nodesize){
  $scope.nodeToggle = nodesize
  var circles = d3.selectAll('circle').transition()
  if($scope.nodeToggle == 2){
      circles
     .duration(250)
     .attr("r", function(d){
      return Math.sqrt(d.retweet_count/Math.PI) 
     });
  }
  else{
      circles
     .duration(250)
     .attr("r", function(d){
       return rad(d.score)//7 *  Math.sqrt(d.score/Math.PI); 
     });

  } 
}
let tags = []
if(supp_path == undefined){
    tags = [['realDonaldTrump'], ['HillaryClinton'], ['DanScavino'], ['bfraser747'], ['TeamTrump'], ['USA4TRUMP'], ['ABC'], ['CNN'], ['MSNBC']]
  }

else {
  tags = [['_alz6410'], ['patel4witham']]
}

let tagIndex = 90
let prevTag = undefined
d3.select("#next-handle").on("click", function(d){
  var selbut = d3.select(this)
  selbut.style("outline", '0px')
  selbut.style("stroke", "darkred").style("background-color", "lightgrey")
  if (prevTag){
    prevTag.forEach(function(t){
      d3.select('#n' + t).dispatch("mouseout")
    })
    
  }
  let tag = tags[tagIndex % tags.length]
  prevTag = tag
  tag.forEach(function(t){
    d3.select('#n' + t).dispatch("mouseover")
  })
  
  tagIndex++
  setTimeout(function(){
    $('#next-handle').blur()
    selbut
    .style("stroke", "black")
    .style("background-color", "")
  }, 1200)
})

d3.select("#prev-handle").on("click", function(d){
  var selbut = d3.select(this)
  selbut.style("outline", '0px')
  selbut.style("stroke", "darkred").style("background-color", "lightgrey")
  if (prevTag){
    prevTag.forEach(function(t){
      d3.select('#n' + t).dispatch("mouseout")
    })
    
  }
  console.log(tags[tagIndex % tags.length])
  let tag = tags[tagIndex % tags.length]
  prevTag = tag
  tag.forEach(function(t){
    d3.select('#n' + t).dispatch("mouseover")
  })
  
  tagIndex--
setTimeout(function(){
    $('#prev-handle').blur()
    selbut
    .style("stroke", "black")
    .style("background-color", "")
  }, 1200)
  
})


let pauseOrPlay = 'play_circle_filled'

var animateInterval = setInterval(function(){
  d3.select('#next-handle').dispatch("click")
}, 4000)


d3.select("#pauseplay").on("click", function(d){
  let pp =  d3.select(this).select("span").text()

  if(pp == 'pause_circle_filled'){
     clearInterval(animateInterval);
  }
  else{
    console.log("here")
    animateInterval = setInterval(function(){
      d3.select('#next-handle').dispatch("click")
    }, 4000)
  }
  d3.select(this).select("span").text(pauseOrPlay)
  pauseOrPlay = pp
  setTimeout(function(){
    $('#pauseplay').blur()
    }, 1200)
})


  }
  //location.pathname = location.pathname
  console.log(location.pathname)

  $scope.viz();
  d3.select("#graph-table").style("height", height)

  }]);