// store data in variable
const dataURI = 'https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/cyclist-data.json'

// set up svg
const w = 1120
const h = 500
const padding = 60
const svg = d3.select('body')
              .append('svg')
              .attr('width', w)
              .attr('height', h)

// set up chart title
svg.append('text')
   .attr('transform', `translate(${w/2}, ${padding - 60})`)
   .attr('class', 'title')
   .attr('id', 'title')
   .style('text-anchor', 'middle')
   .text('Doping in Professional Bicycle Racing')

// set up chart subtitle
svg.append('text')
   .attr('transform', `translate(${w/2}, ${padding - 30})`)
   .attr('class', 'subtitle')
   .attr('id', 'subtitle')
   .style('text-anchor', 'middle')
   .text('35 Fastest times up Alpe d\'Huez')

// read in data
d3.json(dataURI, {crossOrigin: "anonymous"}).then(data => {
  
  // set up min and max for data points
  const minSeconds = d3.min(data, d => d.Seconds - 10)
  const maxSeconds = d3.max(data, d => d.Seconds + 5)
  const minYears = d3.min(data, d => d.Year - 1)
  const maxYears = d3.max(data, d => d.Year + 1)
  
  // set up time format function
  const formatSeconds = seconds => {
    let duration = moment.duration(seconds, 'seconds')
    return moment(duration.asMilliseconds()).format('mm:ss')
  }
  
  // set up date object for test requirement
  const secondsToDate = seconds => {
    let t = new Date(1970, 0, 1)
    t.setSeconds(seconds)
    return t
  }
  
  // set up x scale
  const xScale = d3.scaleLinear()
                   .domain([minYears, maxYears])
                   .range([padding, w - padding])
  
  // set up y scale
  const yScale = d3.scaleLinear()
                   .domain([minSeconds, maxSeconds])
                   .range([padding, h - padding])
  
  // set up color scale
  const colorScale = d3.scaleOrdinal(d3.schemeAccent)
  
  // append div for use as tooltip
  const tooltip = d3.select('body')
                    .append('div')
                    .attr('class', 'tooltip')
                    .attr('id', 'tooltip')
                    .style('opacity', 0)
  
  // set up scatter plot
  const dot = svg.selectAll('circle')
                 .data(data)
                 .enter()
                 .append('circle')
                 .attr('cx', d => xScale(d.Year))
                 .attr('cy', d => yScale(d.Seconds))
                 .attr('r', d => 8)
                 .attr('class', 'dot')
                 .attr('data-xvalue', d => d.Year)
                 .attr('data-yvalue', d => secondsToDate(d.Seconds))
                 .style('fill', d => colorScale(d.Doping !== ''))
                 // set up mouseover to modify tooltip div
                 .on('mouseover', (d, i) => {
                   tooltip.transition()
                          .duration(200)
                          .style('opacity', 0.9)
                   tooltip.html(`
                            ${d.Name}
                            <br />
                            <br />
                            Year: ${d.Year}, Time: ${d.Time}
                            ${d.Doping 
                                  ? `
                                    <br />
                                    <br />
                                    ${d.Doping}`
                                  : ''
                            }
                          `)
                          .attr('data-year', d.Year)
                          .style('left', (d3.event.pageX) + 20 + 'px')
                          .style('top', (d3.event.pageY) + 'px')
                 })
                 // set up mouseout to modify tooltip div
                 .on('mouseout', d => {
                   tooltip.transition()
                          .duration(200)
                          .style('opacity', 0)
                 })
  
  // set up x axis
  const xAxis = d3.axisBottom()
                  .scale(xScale)
                  .tickFormat(d3.format('d'))
  
  // use call to create x axis
  svg.append('g')
     .attr('transform', `translate(0, ${h - padding})`)
     .attr('id', 'x-axis')
     .call(xAxis)
  
  // set up x axis label
  svg.append('text')
   .attr('transform', `translate(${w/2}, ${h - 10})`)
   .style('text-anchor', 'middle')
   .text('Years')
  
  // set up y axis
  const yAxis = d3.axisLeft(yScale).tickFormat(formatSeconds)
  
  // use call to create y axis
  svg.append('g')
     .attr('transform', `translate(${padding}, 0)`)
     .attr('id', 'y-axis')
     .call(yAxis)
  
  // set up y axis label
  svg.append('text')
     .attr('transform', `translate(10, ${h/2})rotate(-90)`)
     .style('text-anchor', 'middle')
     .text('Time in Minutes')
  
  // set up legend
  const legend = svg.selectAll('.legend')
                    .data(colorScale.domain())
                    .enter()
                    .append('g')
                    .attr('class', 'legend')
                    .attr('id', 'legend')
                    .attr('transform', (d, i) => `translate(0, ${h/2 - i * 25})`)
  
  // add proper text to legend
  legend.append('text')
        .attr('x', w - 70)
        .attr('y', 15)
        .style('text-anchor', 'end')
        .text(d => {
          if (d) {
            return "Riders with doping allegations"
          } else {
            return "No doping allegations"
          }
        })
  
  // add color keys to legend
  legend.append('rect')
        .attr('x', w - padding)
        .attr('width', 20)
        .attr('height', 20)
        .style('fill', colorScale)
  
})