// Variables
var topColor = '#e7e7e7';
var barColor = '#e7e7e7'; //d3d3d3
var bkgColor = '#f6f6f6'; //f2f2f2
var title = 'AIR QUALITY'; 
var width = 500;
var height = 200;
var aqcolor = '#FFB82E';
// rx, ry for bars
var rounded = 7;

var componentHeight = 305;
var componentWidth = 750;

var fake_cat = 'Moderate'; // most recent cat
var fake_aqi = [73, 14, 54, 86, 23, 100, 12, 24, 11, 97, 54, 42]; // max 500 for US

// Top Div
var top = d3.select('#topBar')
  //.append('div')
  .style('height','50px')
  .style('width','100%')
  .style('position','static')
  .style('background-color', topColor)
  .text(title);

// Color Div
var color = d3.select('#colorBar')
  //.append('div')
  .style('height','3px')
  .style('width','500')
  .style('position','static')
  .style('background-color', aqcolor);

// Feel free to change or delete any of the code you see in this editor!
var svg = d3
  .select('body')
  .append('svg')
  .attr('height','305') // (300 - d) from rect y function
  .attr('width','100%')
  .style('background-color', bkgColor);

// Make rectangle bars for BARchart
svg
  .selectAll('rect')
  .data(fake_aqi)
  .enter().append('rect')
  // Height is the actual value of the data
  .attr('height',function(d,i){return d;}) // Actual value of data // Previously d*15
  // Width is width of each bar
  .attr('width','50')
  .attr('fill',barColor)
  // X is where the bar begins horizontally
  .attr('x',function(d,i){return 60*i;}) // d=datapoint, i=index // positions bar horizontally. needs to be fxn.
  // Y is where the height (data) bar begins vertically.
  .attr('y',function(d,i){return 300-(d)}) // invert y position, shift it downwards // Previously d*15
  .attr('rx',rounded)
  .attr('ry',rounded);


// Text rules
var txtX = 710; // align with componentHeight
var txtY = 50;

var numSize = 100;
var txtSize = 20;
var modSize = 50;

// AQI
svg.append('text') // 73
    .attr('x',txtX)
    .attr('y',100)
    .attr('font-size',numSize)
    .attr('text-anchor','start') // Text Horizontal alignment
    .attr('dominant-baseline','middle') // Text Vertical alignment
    .text(fake_aqi[0]) // TODO: REPLACE
    .style('fill', aqcolor)
    .style('text-anchor','end') // anchor to right
    .style('font-weight','bold');
// 'Air Quality Index'
  svg.append('text') // component name
    .attr('x',txtX)
    .attr('y',150)
    .attr('font-size',txtSize)
    .attr('text-anchor','start') // Text Horizontal alignment
    .attr('dominant-baseline','middle') // Text Vertical alignment
    .style('text-anchor','end')
    .text('Air Quality Index'); 
// 'Moderate'
  svg.append('text') // Moderate
    .attr('x',txtX)
    .attr('y',200) // out of 300 height
    .attr('font-size',modSize)
    .attr('text-anchor','start') // Text Horizontal alignment
    .attr('dominant-baseline','middle') // Text Vertical alignment
    .style('text-anchor','end')
    .text(fake_cat)//.text(fake_cat) // TODO: REPLACE
    .style('fill', aqcolor)
    .style('font-weight','bold');



// Cons: const font size, const position
//     svg.append('text').selectAll('tspan')
//         .data(textArray)
//         .enter().append('tspan')
//         .attr('x',50)
//         .attr('y',function(d,i){return 150+(i*30)})
//         .attr('font-size',30)
//         .attr('text-anchor','start') // Text Horizontal alignment
//         .attr('dominant-baseline','middle') // Text Vertical alignment
//         .text(function(d){return d;});

// AQI
//     svg.append('text')
//         .attr('x',50)
//         .attr('y',50)
//         .attr('font-size',50)
//         .attr('text-anchor','start') // Text Horizontal alignment
//         .attr('dominant-baseline','middle') // Text Vertical alignment
//         .text(fake_aqi[0]);	
// 'Air Quality Index'
//       svg.append('text')
//         .attr('x',50)
//         .attr('y',100)
//         .attr('font-size',18)
//         .attr('text-anchor','start') // Text Horizontal alignment
//         .attr('dominant-baseline','middle') // Text Vertical alignment
//         .text('Air Quality Index');	
// 'Moderate'
//       svg.append('text')
//         .attr('x',50)
//         .attr('y',150)
//         .attr('font-size',30)
//         .attr('text-anchor','start') // Text Horizontal alignment
//         .attr('dominant-baseline','middle') // Text Vertical alignment
//         .text(fake_cat);