import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { csv, scaleBand, scaleLinear, max } from 'd3';

const csvUrl =
  'https://gist.githubusercontent.com/MSushmaReddy/3077915db595f8f913f0f81aa17e01c6/raw/07c2fa426e6a54bbefa8990ee4ea49063f6fb600/Students.csv';
const width = 960;
const height = 500;
const margin = {
  top: 20,
  right: 30,
  bottom: 60,
  left: 100,
};

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

  useEffect(() => {
    const row = (d) => {
      d.population = +d['Height (cm)'];
      return d;
    };
    csv(csvUrl, row).then((data) => {
      setData(data.slice(0, 10)); // Slicing to first 10 students for demonstration
    });
  }, []);

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

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

  const yScale = scaleBand()
    .domain(data.map((d) => d.Name))
    .range([0, innerHeight])
    .padding(0.1);
  const xScale = scaleLinear()
    .domain([0, max(data, (d) => d.population)])
    .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="#ccc" />
            <text style={{ textAnchor: 'middle', fontSize: 12 }} dy=".71em" y={innerHeight + 3}>
              {tickValue}
            </text>
          </g>
        ))}
        {yScale.domain().map((tickValue) => (
          <text
            key={tickValue}
            style={{ textAnchor: 'end', fontSize: 14, fontFamily: 'Arial, sans-serif' }}
            x={-3}
            dy=".32em"
            y={yScale(tickValue) + yScale.bandwidth() / 2}
          >
            {tickValue}
          </text>
        ))}
        {data.map((d) => (
          <rect
            key={d.Name}
            x={0}
            y={yScale(d.Name)}
            width={xScale(d.population)}
            height={yScale.bandwidth()}
            fill="#69b3a2"
          />
        ))}
      </g>
    </svg>
  );
};

const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);