package example

import d3v4._
//import org.w3c.dom.events.EventTarget
//
import scala.scalajs.js
import scala.scalajs.js.annotation.{JSExport, JSExportTopLevel}
import scala.scalajs.js.Dynamic.global
import d3selection._

object ScalaJSExample {
  /********************************************
    ************* Def new traits **************
    *******************************************/
  @js.native trait ChordGroupJson extends js.Object {
    val index:Int= js.native
    val startAngle: Double = js.native
    val endAngle: Double= js.native
    val value:Int = js.native
  }
  @JSExportTopLevel("myproject")
  protected def getInstance(): this.type = this

  /********************************************
    ************* Def Groups ******************
    *******************************************/
  def groupTicks(d: ChordGroup, step: Double): js.Array[js.Dictionary[Double]] = {
    val k: Double = (d.endAngle - d.startAngle) / d.value
    d3.range(0, d.value, step).map((v: Double) => js.Dictionary("value" -> v, "angle" -> (v * k + d.startAngle)))
  }
  def groupLabelData(d:ChordGroup): js.Array[js.Dictionary[Double]] = {
    val angleMean = (d.endAngle - d.startAngle) / 2
    js.Array(js.Dictionary("index" -> d.index.toDouble, "angle" -> (d.startAngle + angleMean)))
  }

  /********************************************
    ************ Extra Functions **************
    *******************************************/
  def mouseover(d:js.Any) = {
//    global.console.log(d.asInstanceOf[ChordGroupJson])
    // Change opacity chords
    d3selection.select("svg").selectAll("path.chord").style("opacity", "0.1")

    val id = d.asInstanceOf[ChordGroupJson].index
      d3selection.select("svg").selectAll("g").select("#chordgroup"+ id).style("opacity", "1")

    //Change opacity ribbons
    d3selection.select("svg").selectAll("g.ribbons").selectAll("path").style("opacity", "0.1")


    //d3selection.select("#ribbonID"=).style("opacity", "0.1")
    //d3selection.select("svg").selectAll("g.ribbons").selectAll("path.ribbons").style("opacity", "0.1")
    //d3selection.select("")
  }

  def mouseout(d:js.Any, opacityDefault: Double) = {
    d3selection.select("svg").selectAll("g").selectAll("path.ribbons").selectAll("path").style("opacity", opacityDefault.toString)
    d3selection.select("svg").selectAll("g").selectAll("path.chord").style("opacity", opacityDefault.toString)
    d3selection.select("svg").selectAll("g.ribbons").selectAll("path").style("opacity", opacityDefault.toString)
  }

  @JSExport
  def main(args: Array[String]): Unit = {
    /*******************************************
     ************* Global Var ******************
      *******************************************/
    val w = 980
    val h = 800
    val r1 = h/2
    val r0 = r1 - 100
    val innerRadius = r0
    val outerRadius = r0+20
    val formatValue = d3.formatPrefix(",.0", 1e3)
    val opacityDefault = 0.8


    val matrix = js.Array[js.Array[Double]](
      js.Array(11975,  5871, 8916, 2868),
      js.Array(1951, 10048, 2060, 6171),
      js.Array(8010, 16145, 8090, 8045),
      js.Array(1013,   990,  940, 6907)
    )

    val color = d3.scaleOrdinal[Int, String]().domain(d3.range(4)).
      range(js.Array("#c7b570","#c6cdc7","#335c64","#768935","#507282","#5c4a56","#aa7455","#574109","#837722","#73342d","#0a5564","#9c8f57","#7895a4","#4a5456","#b0a690","#0a3542"))

    var fill = d3.scaleOrdinal()
      .domain(d3.range(4))
      .range(js.Array("#000000", "#FFDD89", "#957244", "#F26223"))

    /*******************************************
      ******* Create ribons-svg-chord-arcs *****
      *******************************************/
    val ribbon = d3.ribbon().radius(innerRadius)

    val chord = d3.chord().padAngle(.02).sortSubgroups(d3.descending)

    var arc = d3.arc()
      .innerRadius(innerRadius)
      .outerRadius(outerRadius)

    var svg = d3.select("svg")
      .attr("width", w)
      .attr("height", h)
      .append("svg:g")
      .attr("id", "circle")
      .style("fill","None")
      .attr("transform", "translate(" + w / 2 + "," + h / 2 + ")")
      .datum(chord(matrix))

    svg.append("circle")
      .attr("r", r0 + 20)

    var g = svg
      .attr("class", "groups")
      .selectAll("g")
      .data((c: ChordArray) => c.groups)
      .on("mouseout", (d:js.Any) => {mouseover(d); if(false) return })
      .enter().append("g")

    g.append("svg:path")
      .style("stroke", "black")
      .style("opacity",opacityDefault.toString)
      .style("fill", (d: ChordGroup) => color(d.index))
      .attr("id",(d:ChordGroup) => "chordgroup" + d.index)
      .attr("d", (x: ChordGroup) => arc(x))

    /*******************************************
      ********** Draw cords & ribbons **********
      *******************************************/
    var chordPaths = svg.selectAll("path.chord") //outerArcs
      .data((c: ChordArray) => c.groups)
      .enter().append("svg:path")
      .attr("class", "chord")
      .style("stroke", (d: ChordGroup) => d3.rgb(color(d.index)).darker())
      .style("fill", (d: ChordGroup) => color(d.index))
      .style("opacity", (d:ChordGroup)  => opacityDefault)
      .attr("id",(d:ChordGroup) => "chordgroup" + d.index)
      .attr("d", (x: ChordGroup) => arc(x))
      .on("mouseover", (d: js.Any) => {mouseover(d); if(false) {return}})
      .on("mouseout", (d:js.Any) => {mouseout(d,opacityDefault) ; if(false) {return}})

    var ribbons = svg.append("g").attr("class", "ribbons").selectAll("path")
      .data((c: ChordArray) => c) //ribbons
      .enter().append("svg:path")
      .attr("d", (d: Chord) => ribbon(d))
      .style("fill", (d: Chord) => color(d.target.index))
      .attr("id",(d:Chord) => "ribbonID" + d.source.index+d.target.index)
      .style("opacity", (d:Chord)  => opacityDefault)
      .style("stroke", (d: Chord) => d3.rgb(color(d.target.index)).darker())
//      .on("mouseover", (d: js.Any) => {mouseover(d); if(false) {return}})
//      .on("mouseout", (d:js.Any) => {mouseout(d, opacityDefault); if(false) {return}})


    /*******************************************
      ************** Draw Ticks ****************
      *******************************************/
    var groupTick = g.selectAll(".group-tick").data((d: ChordGroup) => groupTicks(d, 1e3))
      .enter().append("g").attr("class", "group-tick")
      .attr("transform", (d: js.Dictionary[Double]) =>  "rotate(" + (d("angle") * 180 / Math.PI - 90) + ") translate(" + outerRadius + ",0)")

    groupTick.append("line").attr("x2", 6)

    groupTick.filter((d: js.Dictionary[Double]) => d("value") % 5e3 == 0).append("text")
      .attr("x", 8)
      .attr("dy", ".35em")
      .attr("transform", (d: js.Dictionary[Double]) => if(d("angle") > Math.PI) "rotate(180) translate(-16)" else null)
      .style("text-anchor", (d: js.Dictionary[Double]) => if(d("angle") > Math.PI) "end" else null)
      .text((d: js.Dictionary[Double]) => formatValue(d("value")))

  }
}