//resize for mobile
// show all stats on screen
// title left align?


//// CREATE ////

function createProvinceTotals(parent, geoData, region) {
  // Select parent element (div defined in index.html)
  let container = d3.select(parent);

  // Add div for region name
  let regionDiv = d3.select('.totals-region')
  regionDiv.text(region)

  //Add div for total cases (one container, one div for title, one for the number)
  //Repeat for active cases, recovered and deaths
  let statsDiv = container.append('div').attr('class', 'stats-div')

  let data = geoData.data.cases;

  statsDiv.append('div')
    .attr('class', 'totals-cases-number totals-number')
    //.style('color', '#c1392b')
    .style('color', '#333')
    .text(data.length.toLocaleString())
  
  statsDiv.append('div')
    .attr('class', 'totals-label')  
    .text('Total cases')
      
    
  statsDiv.append('div')
    .attr('class', 'active-cases-number totals-number')
    //.style('color', '#16a086')
    .style('color', '#999')
    .text(data.filter(person => person.Outcome1 === 'Not Resolved').length.toLocaleString()) 

  statsDiv.append('div')
    .attr('class', 'totals-label')
    .text('Active')
      
  statsDiv.append('div')
    .attr('class', 'recovered-cases-number totals-number')
    //.style('color', '#305366')
    .style('color', '#999')
    .text(data.filter(person => person.Outcome1 === 'Resolved').length.toLocaleString())  

  statsDiv.append('div')
    .attr('class', 'totals-label')
    .text('Recovered')

  statsDiv.append('div')
    .attr('class', 'deaths-cases-number totals-number')
    //.style('color', '#8f44ab')
    .style('color', '#999')
    .text(data.filter(person => person.Outcome1 === 'Fatal').length.toLocaleString())  

  statsDiv.append('div')
    .attr('class', 'totals-label')
    .text('Deaths')

    
  let genderArray = sortGender(data)

  let genderBar = container.append('div').attr('class', 'gender-bar-div')
  let male = genderArray.find(obj => obj.status === "MALE").cases.length;
  let female = genderArray.find(obj => obj.status === "FEMALE").cases.length;
  let malePct = 100*male/(male+female);
  let femalePct = 100*female/(male+female);

  genderBar.append('div').attr('class', 'gender-female gender-bar')
  .style('width', `${femalePct}%`)

  genderBar.append('div').attr('class', 'gender-male gender-bar')
    .style('width', `${malePct}%`)
  
  let genderText = container.append('div').attr('class', 'gender-text-div')

  genderText.append('div').attr('class', 'gender-female-text')
    .html(`<span class='female-text female-text-number text-bold'>${Math.round(femalePct)}</span><span class='female-text text-bold'>%</span> female`)

   genderText.append('div').attr('class', 'gender-male-text')
    .html(`<span class='male-text male-text-number text-bold'>${Math.round(malePct)}</span><span class='male-text text-bold'>%</span> male`)

}


//// UPDATE ////

function updateProvinceTotals(parent, geoData, region) {
  let container = d3.select(parent);

  let data = geoData.data.cases;

  // In the update function, select the divs instead of creating them, then update the text
  let regionDiv = d3.select('.totals-region')
    regionDiv.text(region)

  let casesDiv = container.select('.totals-cases-number')
  // This numberTween function makes the numbers animate between the old and new number
  numberTween(casesDiv, data.length)

  let activeDiv = container.select('.active-cases-number')  
  numberTween(activeDiv, data.filter(person => person.Outcome1 === 'Not Resolved').length)

  let recoveredDiv = container.select('.recovered-cases-number')
  numberTween(recoveredDiv, data.filter(person => person.Outcome1 === 'Resolved').length)

  let deathsDiv = container.select('.deaths-cases-number')
  numberTween(deathsDiv, data.filter(person => person.Outcome1 === 'Fatal').length)
  
  let genderArray = sortGender(data)

  let genderBar = container.select('.gender-bar-div')
  let male = genderArray.find(obj => obj.status === "MALE").cases.length;
  let female = genderArray.find(obj => obj.status === "FEMALE").cases.length;
  let malePct = 100*male/(male+female);
  let femalePct = 100*female/(male+female);

  genderBar.select('.gender-male')
    .style('width', `${malePct}%`)
  
  genderBar.select('.gender-female')
    .style('width', `${femalePct}%`)

  let genderText = container.select('.gender-text-div')
  numberTween(genderText.select('.female-text-number'), femalePct)
  numberTween(genderText.select('.male-text-number')  , malePct)
  
}


//// RESIZE ////

function resizeProvinceTotals(parent, data) {
  // Will try to resize with CSS only
}



function sortGender(caseData) {
  genderArray = [];

  caseData.forEach(person => {
    let genderObj = genderArray.find(obj => obj.status === person['Client_Gender']);

    if (genderObj) {
      genderObj.cases.push(person)
    }
    else {
      let newGender = {
        status: person['Client_Gender'],
        cases: []
      }
      newGender.cases.push(person);
      genderArray.push(newGender)
    } 
  })
  return genderArray
}


// Transition animation function
function numberTween(selection, targetNumber) {
  selection.transition().duration(1000)
  .tween("text", function(d) {
    let node = this;
    let i = d3.interpolate(strToNum(node.textContent), targetNumber);

    return function(t) {
        node.textContent = Math.round(i(t)).toLocaleString();
    };
  })
}

function strToNum(string) {
  return Number(string.split(',').join(''))
}