import React, { Component } from 'react';
import * as d3 from 'd3';
import { FaInfoCircle } from "react-icons/fa";

import './ScatterPlot.css';
import constants from '../configs/constants';

class ScatterPlot extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: this.props.data,
            show: this.props.show,
            showCardInfo: false
        };
    }
    componentDidMount() {
        this.drawChart(this.state.data);
    }

    drawChart(data) {
        if (!data) return;

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

        // append the svg object to the body of the page
        var svg = d3.select("#resultratio-diagram")
            .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 + ")");

        // Add X axis
        var x = d3.scaleLinear()
            .domain([0, 50])
            .range([0, width]);
        svg.append("g")
            .attr("transform", "translate(0," + height + ")")
            .call(d3.axisBottom(x));

        // Add Y axis
        var y = d3.scaleLinear()
            .domain([0, 1.2])
            .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, i) { return x(2023 - d.birthYear); })
            .attr("cy", function (d) { return y(d.resultRatio || d.calculatedRatio); })
            .attr("r", 1.5)
            .style("fill", "#69b3a2")
    }

    drawChart2(data2) {
        // 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 = 260 - margin.top - margin.bottom;

        // append the svg object to the body of the page
        var svg = d3.select("#resultratio-diagram")
            .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("data.csv", function (data) {
        fetch('/data.csv')
            .then(response => response.text())
            .then((data) => {
                //   console.log(data);
                // var datacsv = require("./data.csv");
                data = d3.csvParse(data);
                console.log(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")
            });
    }

    render() {
        return (
            <div>
                <div className='resultratio-graph-card'>
                    <div className='resultratio-card-title'>Result ratio<span className='resultratio-info-icon' onClick={() => !this.setState({ showCardInfo: !this.state.showCardInfo })}><FaInfoCircle /></span>
                        {this.state.showCardInfo && <div className='resultratio-info-card'>Based on all tests data the ratio of results are shown corresponding to ages</div>}
                    </div>
                    <div id="resultratio-diagram" style={{ margin: '1em' }}>
                    </div>
                </div>
            </div >
        )
    };
}
export default ScatterPlot;