import React, {Component} from 'react';
import * as d3 from "d3";




let clock = ["", "", "00:00", "", "", "", "", "", "06:00", "", "", "", "", "", "12:00", "", "", "", "", "", "18:00", "", "", "", "", "23:00"];

// let legend = [{txt:"0-50", limit:50}, {txt:"51-100", limit:100}, {txt:"101-150", limit:150}, {txt:"151+", limit:200}];

class AQI extends Component{


    constructor(props) {
        super(props);
        this.state = {width:0};
        this.wrapper = {};
    }



    componentDidUpdate(prevProps,prevState) {

        if (prevState.width!=this.wrapper.offsetWidth) {
            this.setState({
                width:this.wrapper.offsetWidth
            });
            this.drawChart()
        }

    }

    componentDidMount() {

        this.setState({
            width:this.wrapper.offsetWidth
        });

    }


    drawChart(){
        d3.select("svg").remove();
        const aqi24 = ["", ""].concat(this.props.aqi24).concat([""]);
        const w = this.state.width;
        const h = this.props.height;
        const brickWidth = w/27;
        const coeff = h/200;


        const svg = d3.select("#aqiChartFrame").append("svg").attr("id", "aqiChart").style("margin", "5px").style("background", "aliceblue")
            .attr("width", this.props.width)
            .attr("height", h);

        svg.selectAll("rect")
            .data(aqi24)
            .enter()
            .append("rect")
            .attr("x", (d, i) => i * brickWidth)
            .attr("y", (d)=>{return (d>155) ? h-155*coeff-50 : h-d*coeff-50;})
            .attr("height", (d)=>{return (d>155) ? 155*coeff : d*coeff})
            .attr("width", brickWidth)
            .attr("fill", (d)=>{
                if(d>0 && d<=15)
                    return "#28a745";
                else if(d>15 && d<=30)
                    return "#8cc440";
                else if(d>30 && d<=50)
                    return "#cbe942";
                else if(d>50 && d<=65)
                    return "#f1c40f";
                else if(d>65 && d<=80)
                    return "#fdd038";
                else if(d>81 && d<=100)
                    return "#fda930";
                else if(d>100 && d<=150)
                    return "#fd7e14";
                else if(d>150 && d<=175)
                    return "#e64f3d";
                else if(d>175 && d<=200)
                    return "#dc3545";
                else if(d>200 && d<=300)
                    return "#6f42c1";
                else return "#6610f2";

            })
            .attr("rx", "20")
            .attr("ry", "10")
            .attr("opacity", "0.85")
            .on("mouseover", function(d){
                    d3.select(this).style("stroke", "white").style("stroke-width", "0.2em").attr("opacity","1");
                })
            .on("mouseout", function(d){
                d3.select(this).style("stroke", "none").attr("opacity","0.85");
            });


        svg.selectAll("text")
            .data(aqi24)
            .enter()
            .append("text")
            .text((d) => d)
            .attr("x", (d, i) => i * brickWidth + brickWidth/8)
            .attr("y", (d)=>{return (d>155) ? h-155*coeff-55 : h-d*coeff-55;})
            .style("font-size", "0.7em");

        const svgClock = d3.select("#aqiChart").append("svg").attr("width", w)
            .attr("height", 50).attr("y", h-50)
            .selectAll("text")
            .data(clock)
            .enter()
            .append("text")
            .text((d) => d)
            .attr("x", (d, i) => i * brickWidth + brickWidth/8)
            .attr("y", (d, i) => 20)
            .style("font-size", "0.7em");

        const svg2 = d3.select("#aqiChart").append("svg").attr("width", w)
            .attr("height", 50).attr("y", h-50);
        svg2.selectAll("line")
            .data(aqi24)
            .enter()
            .append("line")
            .attr("x1", (d, i) => i * brickWidth)
            .attr("y1", (d, i) => 30)
            .attr("x2", (d, i) => i * brickWidth + brickWidth)
            .attr("y2", (d, i) => 30)
            .style("stroke","black")
            .style("stroke-width", "1px");

        const svg3 = d3.select("#aqiChart").append("svg").attr("width", w)
            .attr("height", 50).attr("y", h-50);
        svg3.selectAll("line")
            .data(aqi24)
            .enter()
            .append("line")
            .attr("x1", (d, i) => i * brickWidth + brickWidth/2)
            .attr("y1", (d, i) => 25)
            .attr("x2", (d, i) => i * brickWidth + brickWidth/2)
            .attr("y2", (d, i) => 35)
            .style("stroke","black")
            .style("stroke-width", "1px");


        // const svgLegend = d3.select("#aqiChart").append("svg").attr("width", 2* brickWidth)
        //     .attr("height", 50)
        //     .selectAll("text")
        //     .data(legend)
        //     .enter()
        //     .append("text")
        //     .text((d) => d.txt)
        //     .attr("x", brickWidth/4)
        //     .attr("y", (d)=>{return h - d.limit*coeff + 50});


    }





    render(){
        return (
            <div ref={(c)=> {this.wrapper=c}} id={"aqiChartFrame"}></div>
        );
    }
}

export default AQI;