import {
  csv,
  select,
  scaleLinear,
  extent,
  axisLeft,
  axisBottom,
} from 'd3';

d3.csv(
  'https://raw.githubusercontent.com/bepnye/CP341/main/world-data-2023.csv',
).then((githubResponse) {
  render(githubResponse)
});

function render(data) {
  console.log(data);
  const x = d3
    .scaleLinear()
    .domain([0, 50])
    .range([margin.left, width - margin.right]);
  svg
    .append('g')
    .attr('transform','translate(0,${height})')
    
  const y = d3
    .scaleLinear()
    .domain([0, 100])
    .range([width, 0]);
  //actually draw the shit, put in the data and it draws circles for me
  //render(data);
};

console.log('I just cant wait for the data');
// const csvUrl = 'https://gist.githubusercontent.com/tejasri280/2487d19ed717c495acccef0d57120af6/raw/62c2b983372eb220d6b31f717e5eb48dda8665b9/PengBird.csv';
const csvUrl =
  'https://raw.githubusercontent.com/bepnye/CP341/main/world-data-2023.csv';
const parseRow = (d) => {
  d.GDP = +d.GDP;
  d.Gasoline_Price = +d.Gasoline_Price;
  return d;
};
console.log(data.GDP);
const xValue = (d) => d.GDP;
const yValue = (d) => d.Gasoline_Price;
const rxValue = 5; //(d) => d.Culmen_Length_mm;
const ryValue = 5; //(d) => d.Culmen_Depth_mm;

// const speciesValue = (d) => d.Species;

const margin = {
  top: 20,
  right: 30,
  bottom: 50,
  left: 80,
};
const radius = 4;

const width = window.innerWidth;
const height = window.innerHeight;
const svg = select('body')
  .append('svg')
  .attr('width', width)
  .attr('height', height);

const tooltip = select('body')
  .append('div')
  .classed('tooltip', true)
  .html('<h1></h1>');

const main = async () => {
  const data = await csv(csvUrl, parseRow);

  const x = d3
    .scaleLinear()
    .domain([0, 50])
    .range([margin.left, width - margin.right]);

  const y = d3
    .scaleLinear()
    .domain([0, 100])
    .range([width, 0]);

  const marker = (d) => {
    switch (d) {
      case 'Adelie Penguin (Pygoscelis adeliae)':
        return '#00FF00';
      case 'Chinstrap penguin (Pygoscelis antarctica)':
        return '#0000FF';
      case 'Gentoo penguin (Pygoscelis papua)':
        return '#808080';
      default:
        return 'Black';
    }
  };

  const marks = data.map((d) => ({
    x: x(xValue(d)),
    y: y(yValue(d)),
  }));

  svg
    .append('g')
    .selectAll('dot')
    .data(data)
    .join('circle')
    .attr('cx', function (d) {
      return x(d['Birth Rate']);
    })
    .attr('cy', function (d) {
      return y(d['Calling Code']);
    })
    .attr('r', (d) => d['Fertility Rate'])
    .style('fill', '#69b3a2');
    .on('mouseenter', (e,d) => {
      console.log(e);
      console.log(d);
    })
  /*
    .selectAll('circle')
    .data(marks)
    .join('circle')
    .attr('cx', (d) => d.x)
    .attr('cy', (d) => d.y)
    .attr('fill', (d) => d.color)
    .attr('rx', (d) => d.rx)
    .attr('ry', (d) => d.ry)
    .attr('r', radius)
    .on('mouseover', function (e, d) {
      console.log(e);
      console.log(d);
    });*/

  svg
    .append('g')
    .attr('transform', `translate(${margin.left},0)`)
    .call(axisLeft(y));
  svg
    .append('g')
    .attr(
      'transform',
      `translate(0,${height - margin.bottom})`,
    )
    .call(axisBottom(x));

  svg
    .append('text')
    .attr('class', 'axis-label')
    .attr('x', innerWidth / 3.0)
    .attr('y', 30)
    .style('font', '45px times')
    .text('Scatter Plot');

  svg
    .append('text')
    .attr('class', 'x-label')
    .attr('x', width - 500)
    .attr('y', height - 10)
    .attr('text-anchor', 'middle')
    .style('font', '20px times')
    .text('Flipper Length(mm)');

  svg
    .append('text')
    .attr('class', 'y-label')
    .attr('y', 25)
    .attr('dy', 'lem')
    .attr('x', 2 - height / 2)
    .attr('transform', 'rotate(-90)')
    .attr('text-anchor', 'middle')
    .style('font', '20px times')
    .text('Body Mass(g)');
};

main();

/*
// set the dimensions and margins of the graph
var margin = { top: 10, right: 30, bottom: 30, left: 60 },
  width = 460 - margin.left - margin.right,
  height = 400 - margin.top - margin.bottom;

// append the svg object to the body of the page
var svg = d3
  .select('#my_dataviz')
  .append('svg')
  .attr('width', width + margin.left + margin.right)
  .attr('height', height + margin.top + margin.bottom)
  .append('g')
  .attr(
    'transform',
    'translate(' + margin.left + ',' + margin.top + ')',
  );

//Read the data
d3.csv(
  'https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/2_TwoNum.csv',
  function (data) {
    // Add X axis
    var x = d3
      .scaleLinear()
      .domain([0, 4000])
      .range([0, width]);
    svg
      .append('g')
      .attr('transform', 'translate(0,' + height + ')')
      .call(d3.axisBottom(x));

    // Add Y axis
    var y = d3
      .scaleLinear()
      .domain([0, 500000])
      .range([height, 0]);
    svg.append('g').call(d3.axisLeft(y));

    // Add dots
    svg
      .append('g')
      .selectAll('dot')
      .data(data)
      .enter()
      .append('circle')
      .attr('cx', function (d) {
        return x(d.GrLivArea);
      })
      .attr('cy', function (d) {
        return y(d.SalePrice);
      })
      .attr('r', 1.5)
      .style('fill', '#69b3a2');
  },
);
*/
