import React, { useState, useCallback, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { select, axisLeft, axisBottom, csv, arc, pie, scaleBand, scaleLinear, max, format} from 'd3';

// loading data using url
const csvUrl =https://gist.githubusercontent.com/Nikitha123171/8c9e355889a5f05b184c3de4cbbb4d60/raw/4402291031a78d14b94c9f54f3cea332b066f9d9/ICE%25206%2520Dataset.csv
  
const width = 960;
const height = 500;
const margin = { top: 20, right: 20, bottom: 50, left: 200 };

const App = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    const row = d => {
      d.Meta_score = +d['Meta_score'];
      return d;
    };
    csv(csvUrl, row).then(data => {
      setData(data.slice(0, 15));
    });
  }, []);

  if (!data) {
    return <pre>Loading...</pre>;
  }

  const innerHeight = height - margin.top - margin.bottom -100;
  const innerWidth = width - margin.left - margin.right - 50;

  const yScale = scaleBand()
    .domain(data.map(d => d.Series_Title))
    .range([0, innerHeight]);

  const xScale = scaleLinear()
    .domain([0, max(data, d => d.Meta_score)])
    .range([0, innerWidth]);

  return (
    <svg width={width} height={height}>
      <g transform={`translate(${margin.left},${margin.top})`}>
        {xScale.ticks().map(tickValue => (
          <g key={tickValue} transform={`translate(${xScale(tickValue)},0)`}>
            <line y2={innerHeight} stroke="black" />
            <text
              style={{ textAnchor: 'middle' }}
              dy=".70em"
              y={innerHeight + 3}
            >
              {tickValue}
            </text>
          </g>
        ))}
        {yScale.domain().map(tickValue => (
          <text
            key={tickValue}
            style={{ textAnchor: 'end' }}
            x={-3}
            dy=".32em"
            y={yScale(tickValue) + yScale.bandwidth() / 2}
          >
            {tickValue}
          </text>
        ))}
        {data.map(d => (
          <rect
            key={d.Series_Title}
            x={0}
            y={yScale(d.Series_Title)}
            width={xScale(d.Meta_score)}
            height={yScale.bandwidth()}
          />
        ))}
      </g>
    </svg>
  );
};
const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);