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

const csvUrl =
  'https://gist.githubusercontent.com/chaturyaakhilapallem/c398182c49c4e2e841a2133a9b5161a1/raw/b287287225553c952f5986e89f10bb50e40d423f/BMI.csv';
const width = 960;
const height = 500;
const margin = { top: 50, right: 50, bottom: 80, left: 80 };
const barColor = '#69b3a2';
const scatterColor = '#ff00ff';

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

  useEffect(() => {
    const row = (d) => {
      d.BMI = +d.BMI;
      d.Height = +d['Height (cm)'];
      d.Weight = +d['Weight (kg)'];
      return d;
    };

    csv(csvUrl, row).then((data) => {
      setData(data);
    });
  }, []);

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

  const halfWidth = width / 2 - margin.left - margin.right;

  const xScale = scaleBand()
    .domain(data.map((d) => d.Name))
    .range([margin.left, halfWidth])
    .padding(0.4); // Increased padding between bars

  const yScaleBMI = scaleLinear()
    .domain([0, max(data, (d) => d.BMI)])
    .nice()
    .range([height - margin.bottom, margin.top]);

  const yScaleHeightWeight = scaleLinear()
    .domain([
      0,
      max(data, (d) => Math.max(d.Height, d.Weight)),
    ])
    .nice()
    .range([height - margin.bottom, margin.top]);

  return (
    <svg width={width} height={height}>
      <g>
        {data.map((d) => (
          <rect
            key={d.Name}
            x={xScale(d.Name)}
            y={yScaleBMI(d.BMI)}
            width={xScale.bandwidth()}
            height={
              height - margin.bottom - yScaleBMI(d.BMI)
            }
            fill={barColor}
            rx={5} // Rounded corners
          />
        ))}
        <g
          transform={`translate(0,${height - margin.bottom})`}
          ref={(node) => {
            const xAxis = scaleBand()
              .domain(data.map((d) => d.Name))
              .range([margin.left, halfWidth])
              .padding(0.3); // Increased padding between bars
            const xAxisGroup = d3.select(node);
            xAxisGroup
              .call(axisBottom(xAxis))
              .selectAll('text')
              .attr('transform', 'rotate(-45)')
              .attr('x', -10)
              .attr('y', 10)
              .style('font-size', '14px')
              .style('fill', '#666')
              .style('text-anchor', 'end');
            xAxisGroup
              .append('text')
              .attr('x', halfWidth / 2)
              .attr('y', 30) // Adjusted y position
              .attr('fill', '#444')
              .attr('text-anchor', 'middle')
              .style('font-size', '20px')
              .style('font-weight', 'bold')
              .style('text-transform', 'uppercase')
              .text('Name');
          }}
        />
        <g
          transform={`translate(${margin.left},0)`}
          ref={(node) => {
            const yAxis = scaleLinear()
              .domain([0, max(data, (d) => d.BMI)])
              .nice()
              .range([height - margin.bottom, margin.top]);
            const yAxisGroup = d3.select(node);
            yAxisGroup.call(axisLeft(yAxis));
            yAxisGroup
              .append('text')
              .attr('transform', 'rotate(-90)')
              .attr('y', -margin.left + 20)
              .attr('x', -halfWidth / 2)
              .attr('dy', '1em')
              .attr('fill', '#444')
              .attr('text-anchor', 'middle')
              .style('font-size', '20px')
              .style('font-weight', 'bold')
              .style('text-transform', 'uppercase')
              .text('BMI');
          }}
        />
      </g>
      {/* Second graph */}
      <g transform={`translate(${width / 2}, 0)`}>
        {data.map((d) => (
          <>
            <rect
              key={d.Name + 'Height'}
              x={xScale(d.Name)}
              y={yScaleHeightWeight(d.Height)}
              width={xScale.bandwidth() / 2}
              height={
                height -
                margin.bottom -
                yScaleHeightWeight(d.Height)
              }
              fill={'#ff7f0e'}
              rx={5} // Rounded corners
            />
            <rect
              key={d.Name + 'Weight'}
              x={xScale(d.Name) + xScale.bandwidth() / 2}
              y={yScaleHeightWeight(d.Weight)}
              width={xScale.bandwidth() / 2}
              height={
                height -
                margin.bottom -
                yScaleHeightWeight(d.Weight)
              }
              fill={'#1f77b4'}
              rx={5} // Rounded corners
            />
          </>
        ))}
        <g
          transform={`translate(0,${height - margin.bottom})`}
          ref={(node) => {
            const xAxis = scaleBand()
              .domain(data.map((d) => d.Name))
              .range([0, halfWidth])
              .padding(0.3); // Increased padding between bars
            const xAxisGroup = d3.select(node);
            xAxisGroup
              .call(axisBottom(xAxis))
              .selectAll('text')
              .attr('transform', 'rotate(-45)')
              .attr('x', -10)
              .attr('y', 10)
              .style('font-size', '14px')
              .style('fill', '#666')
              .style('text-anchor', 'end');
            xAxisGroup
              .append('text')
              .attr('x', halfWidth / 2)
              .attr('y', 30) // Adjusted y position
              .attr('fill', '#444')
              .attr('text-anchor', 'middle')
              .style('font-size', '20px')
              .style('font-weight', 'bold')
              .style('text-transform', 'uppercase')
              .text('Name');
          }}
        />
        <g
          transform={`translate(${margin.left},0)`}
          ref={(node) => {
            const yAxis = scaleLinear()
              .domain([
                0,
                max(data, (d) =>
                  Math.max(d.Height, d.Weight),
                ),
              ])
              .nice()
              .range([height - margin.bottom, margin.top]);
            const yAxisGroup = d3.select(node);
            yAxisGroup.call(axisLeft(yAxis));
            yAxisGroup
              .append('text')
              .attr('transform', 'rotate(-90)')
              .attr('y', -margin.left + 20)
              .attr('x', -halfWidth / 2)
              .attr('dy', '1em')
              .attr('fill', '#444')
              .attr('text-anchor', 'middle')
              .style('font-size', '20px')
              .style('font-weight', 'bold')
              .style('text-transform', 'uppercase')
              .text('Height & Weight');
          }}
        />
      </g>
      {/* Divider line */}
      <line
        x1={width / 2}
        y1={0}
        x2={width / 2}
        y2={height}
        stroke="#999"
        strokeWidth="1"
        strokeDasharray="5"
      />
      {/* Scatter plot */}
      <g>
        {data.map((d) => (
          <circle
            key={d.Name}
            cx={xScale(d.Name) + xScale.bandwidth() / 2}
            cy={yScaleHeightWeight(d.Height)}
            r={5} // Radius of the circle
            fill={scatterColor}
          />
        ))}
      </g>
    </svg>
  );
};

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