const log = console.log;

var dataTable = dc.dataTable("#dc-table-graph");
var pieChart = dc.pieChart("#pie-chart");


var dim = {},     // Stores all crossfilter dimensions
groups = {},  // Stores all crossfilter groups
cf;

d3.csv("info.csv").then(function(data) {
        // console.log("data:",data);

        data.forEach(d => {
            // var parts = d.Created.split('/');
//           console.log("----------------:",new Date(d.date));
            d.date = new Date(d.date);
        });

        create_graph(data);
});

function create_graph(data)
{


    // Programmatically insert header labels for table
    var tableHeader = d3.select(".table-header")
      .selectAll("th");

    // Bind data to tableHeader selection.

    tableHeader = tableHeader.data(
      [
        {label: "pid", field_name: "pid", sort_state: "ascending"},
        {label: "cid", field_name: "cid", sort_state: "ascending"},
        {label: "date", field_name: "date", sort_state: "ascending"},
        {label: "type", field_name: "type", sort_state: "ascending"},
        {label: "probability", field_name: "probability", sort_state: "descending"} // Note Max Conf row starts off as descending
      ]
    );

    // enter() into virtual selection and create new <th> header elements for each table column
    tableHeader = tableHeader.enter()
      .append("th")
        .text(function (d) { 
      console.log("lab::::")
      return d.label; }) // Accessor function for header titles
        .on("click", tableHeaderCallback);

    function tableHeaderCallback(d) {
      // Highlight column header being sorted and show bootstrap glyphicon
      var activeClass = "info";

      d3.selectAll("#dc-table-graph th") // Disable all highlighting and icons
          .classed(activeClass, false)
        .selectAll("span")
          .style("visibility", "hidden") // Hide glyphicon

      var activeSpan = d3.select(this) // Enable active highlight and icon for active column for sorting
          .classed(activeClass, true)  // Set bootstrap "info" class on active header for highlight
        .select("span")
          .style("visibility", "visible");

      // Toggle sort order state to user desired state
      d.sort_state = d.sort_state === "ascending" ? "descending" : "ascending";

      var isAscendingOrder = d.sort_state === "ascending";
      dataTable
        .order(isAscendingOrder ? d3.ascending : d3.descending)
        .sortBy(function(datum) { return datum[d.field_name]; });

      // Reset glyph icon for all other headers and update this headers icon
      activeSpan.node().className = ''; // Remove all glyphicon classes

      // Toggle glyphicon based on ascending/descending sort_state
      activeSpan.classed(
        isAscendingOrder ? "glyphicon glyphicon-sort-by-attributes" :
          "glyphicon glyphicon-sort-by-attributes-alt", true);

      updateTable();
      dataTable.redraw();
    }
    // Initialize sort state and sort icon on one of the header columns
    // Highlight "Max Conf" cell on page load
    // This can be done programmatically for user specified column
    tableHeader.filter(function(d) { return d.label === "Max Conf"; })
        .classed("info", true);

    var tableSpans = tableHeader
      .append("span") // For Sort glyphicon on active table headers
        .classed("glyphicon glyphicon-sort-by-attributes-alt", true)
        .style("visibility", "hidden")
      .filter(function(d) { return d.label === "Max Conf"; })
        .style("visibility", "visible");

    cf = crossfilter(data); // Main crossfilter objects

  
         let pieTypeDimension = cf.dimension(function(d) { return d.pid});

        let pieTypeGroup = pieTypeDimension.group();

        var reducer_prob = reductio().max(function(d) { 
            // console.log("max:",d.Time_estimate);
            return parseFloat(d.probability)
        });
        var pred_prob_max_pie = reducer_prob(pieTypeGroup).top(Infinity);
        console.log('==XX>', pred_prob_max_pie);


        pieChart
            .height(400)
            // .useViewBoxResizing(true)
            .dimension(pieTypeDimension)
            .group(pieTypeGroup)
            .valueAccessor(function(p) { 

                return parseFloat(p.value.max) || 0; 
            })
          // this doesn't work because d is not a number; even d.value.max can be undefined
          // which coerces to NaN
          //   .data(function (d) {
          //       return d.order(function (d) {
          //           console.log('d is', d);
          //           return +d;
          //       }).top(10)
          //   })
          .ordering(d => -(d.value.max || 0))
          .othersGrouper(null)
          .slicesCap(4)
          .innerRadius(100)
          .externalLabels(30)
          .externalRadiusPadding(50)
          .drawPaths(true)
          // .dimension(runDimension)
          // .group(speedSumGroup)
          .legend(dc.legend());

      // example of formatting the legend via svg
      // http://stackoverflow.com/questions/38430632/how-can-we-add-legends-value-beside-of-legend-with-proper-alignment
      pieChart.on('pretransition', function(chart) {
          chart.selectAll('.dc-legend-item text')
              .text('')
            .append('tspan')
              .text(function(d) { return d.name; })
            .append('tspan')
              .attr('x', 100)
              .attr('text-anchor', 'end')
              .text(function(d) { 
                return d.data.max; });
      });


  

    // Setup different dimensions for plots
    dim.tableMaxConfidence = cf.dimension(function (d) {
      return d.pid;
    });

    // ##############################
    // Generate the dc.js dataTable
    // ##############################
    // Create generating functions for each columns

    var columnFunctions = [
      function(d) { return d.pid; },
      function(d) { return d.cid; },
      function(d) { return d.date; },
      function(d) { return d.types; },
      function(d) { return d.probability; },
    ];

   // extra dimensions for filtering
   const cidDimension = cf.dimension(d => d.cid),
      dateDimension = cf.dimension(d => d.date);

var color = d3.scaleSequential() //d3.scaleLinear()
  .domain([0, 0.9])
  .interpolator(d3.interpolateBlues);  
  
    // Pagination implementation inspired by:
    // https://github.com/dc-js/dc.js/blob/master/web/examples/table-pagination.html
    dataTable.width(960).height(800)
      .dimension(dim.tableMaxConfidence)
      .group(function(d) { return "Dummy"}) // Must pass in. Ignored since .showGroups(false)
      .size(Infinity)
      .columns(columnFunctions)
      .showGroups(false)
      .sortBy(function(d){ return d.max_conf; }) // Initially sort by max_conf column
      .order(d3.descending)
    
    

.on('pretransition', function (table) {
     table.selectAll('td.dc-table-column._0')
          .on('click',function(d){
                console.log(d);
                table.filter(d.pid)
                dc.redrawAll();
           })
     table.selectAll('td.dc-table-column._1')
          .on('click',function(d){
                console.log("select:",d);
            cidDimension.filter(d.cid)
            dc.redrawAll();
           })
     table.selectAll('td.dc-table-column._2')
          .on('click',function(d){
            dateDimension.filter(d.date)
            dc.redrawAll();
           })
      table.selectAll('td.dc-table-column._4')
         .style("background-color", function(d){ 
          return color(d.probability)});
  });  
  
  
    // log('!!!!!!!!!!:',dataTable.selectAll('td').style('visibility', "hidden"));

    updateTable();
    dc.renderAll();
    dataTable.redraw();

}
// ##################################################333


  // Data Table Pagination
  var tableOffset = 0, tablePageSize = 10;

  // updateTable calculates correct start and end indices for current page view
  // it slices and pulls appropriate date for current page from dataTable object
  // Finally, it updates the pagination button states depending on if more records
  // are available
  function updateTable() {

                // Visually encode the table as per rate value
                d3.selectAll('td.dc-table-column _4').style("background-color", function(d, i){
                    return colorScale(i);
                });

                function colorScale(i){
                    var color = d3.scaleLinear()
                      .domain([0, 10])
                      .interpolate(d3.interpolateRgb)
                      .range(["orangered", "silver"]);

                    return color(i);
                }


    // Ensure Prev/Next bounds are correct, especially after filters applied to dc charts
    var totFilteredRecs = cf.groupAll().value();
    // Adjust values of start and end record numbers for edge cases
    var end = tableOffset + tablePageSize > totFilteredRecs ? totFilteredRecs : tableOffset + tablePageSize;
    tableOffset = tableOffset >= totFilteredRecs ? Math.floor((totFilteredRecs - 1) / tablePageSize) * tablePageSize : tableOffset;
    tableOffset = tableOffset < 0 ? 0 : tableOffset; // In case of zero entries

    // Grab data for current page from the dataTable object
    dataTable.beginSlice(tableOffset);
    dataTable.endSlice(tableOffset + tablePageSize);

    // Update Table paging buttons and footer text
    d3.select('span#begin')
        .text(end === 0 ? tableOffset : tableOffset + 1); // Correct for "Showing 1 of 0" bug
    d3.select('span#end')
        .text(end);
    d3.select('#Prev.btn')
        .attr('disabled', tableOffset - tablePageSize < 0 ? 'true' : null);
    d3.select('#Next.btn')
        .attr('disabled', tableOffset + tablePageSize >= totFilteredRecs ? 'true' : null);
    d3.select('span#size').text(totFilteredRecs);

    dataTable.redraw();
  }

  // Callback function for clicking "Next" page button
  function nextPage() {
      tableOffset += tablePageSize;
      updateTable();
  }
  // Callback function for clicking "Prev" page button
  function prevPage() {
      tableOffset -= tablePageSize;
      updateTable();
  }