import React, { Component } from 'react';
import * as d3 from 'd3';
import { sgg } from 'ml-savitzky-golay-generalized';
import axios from 'axios';
import moment from 'moment';

import './DeviceGraph.css';

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

    drawChart(data2) {
        // if (!data) return;
        // var margin = { top: 20, right: 20, bottom: 30, left: 50 },
        //     width = 960 - margin.left - margin.right,
        //     height = 500 - margin.top - margin.bottom;

        // // set the ranges
        // var x = d3.scaleTime().range([0, width]);
        // var y = d3.scaleLinear().range([height, 0]);

        // // define the line
        // var valueline = d3.line()
        //     .x(function (d) { return x(moment(d.date)); })
        //     .y(function (d) { return y(d.count); });

        // var svg = d3.select("#result-graph").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 + ")");
        // var g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        // // const options = {
        // //     windowSize: 5,
        // //     derivative: 0,
        // //     polynomial: 3,
        // // };
        // // const sggResult = sgg(data.map(x => x.CA), (Math.PI * 2) / data.length, options);

        // // data.forEach(function (d, index) {
        // //     d.NM = d.NM;
        // //     d.CA = sggResult[index];
        // // });
        // // data.forEach(function (d) {
        // //     d.date = d.date;
        // //     d.count = +d.count;
        // // });

        // x.domain(d3.extent(data, function (d) { return moment(d.date); }));
        // y.domain([0, d3.max(data, function (d) { return d.count; })]);

        // svg.append("path")
        //     .data([data])
        //     .attr("class", "line")
        //     .attr("d", valueline);

        // svg.append("g")
        //     .attr("transform", "translate(0," + height + ")")
        //     .call(d3.axisBottom(x))
        //     .append("text")
        //     // .attr("transform", "rotate(-90)")
        //     .attr("x", 400)
        //     .attr("y", 30)
        //     .attr("dx", "0.71em")
        //     .attr("fill", "#000")
        //     .text("Test time");

        // svg.append("g")
        //     .call(d3.axisLeft(y))
        //     .append("text")
        //     .attr("transform", "rotate(-90)")
        //     .attr("x", -160)
        //     .attr("y", -36)
        //     .attr("dy", "0.71em")
        //     .attr("fill", "#000")
        //     .text("Tests Count");



        var data = [2, 4, 8, 10];

        var margin = { top: 50, right: 10, bottom: 15, left: 50 },
            width = 400 - margin.left - margin.right,
            height = 200 - margin.top - margin.bottom;
        var radius = Math.min(width, height) / 2;


        // var svg = d3.select("#result-graph").append("svg"),
        //     width = svg.attr("width"),
        //     height = svg.attr("height"),
        //     radius = Math.min(width, height) / 2,
        //     g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

        var svg = d3.select("#result-graph").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 + ")");
        var g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        var color = d3.scaleOrdinal(['#4daf4a', '#377eb8', '#ff7f00', '#984ea3', '#e41a1c']);

        // Generate the pie
        var pie = d3.pie();

        // Generate the arcs
        var arc = d3.arc()
            .innerRadius(0)
            .outerRadius(radius);

        //Generate groups
        var arcs = g.selectAll("arc")
            .data(pie(data))
            .enter()
            .append("g")
            .attr("class", "arc")

        //Draw arc paths
        arcs.append("path")
            .attr("fill", function (d, i) {
                return color(i);
            })
            .attr("d", arc);
    }

    render() {
        return (
            <div>
                <div className='graph-card'>
                    <div id="result-graph" style={{ margin: '1em' }}>
                    </div>
                    <div className='graph-title'>test counts per day</div>
                </div>
            </div>
        )
    };
}
export default TestAnalyticsPie;