import { Component, ElementRef, NgZone, OnDestroy, OnInit } from '@angular/core';

import {VisualizationService} from "./visualization.service";
import {ResultService} from "../result/result.service";

import {
    D3Service,
    D3,
    Axis,
    BrushBehavior,
    BrushSelection,
    D3BrushEvent,
    ScaleLinear,
    ScaleOrdinal,
    Selection,
    Transition
} from 'd3-ng2-service';


@Component({
    selector: 'app-d3graph',
    templateUrl: './visualization.barchart.component.html',
    styleUrls: ['./visualization.barchart.component.css']
})
export class VisualizationComponent implements OnInit {
    private d3: D3;
    private parentNativeElement: any;
    private d3Svg: Selection<SVGSVGElement, any, null, undefined>;
    title: string;
    which: number;
    dataLength:number;
    private data;

    wrap(text, width) {
        text.each(function() {
            let text = this.d3.select(this),
                words = text.text().split(/\s+/).reverse(),
                word,
                line = [],
                lineNumber = 0,
                lineHeight = 1.1, // ems
                y = text.attr("y"),
                dy = parseFloat(text.attr("dy")),
                tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy + "em");
            while (word = words.pop()) {
                line.push(word);
                tspan.text(line.join(" "));
                if (tspan.node().getComputedTextLength() > width) {
                    line.pop();
                    tspan.text(line.join(" "));
                    line = [word];
                    tspan = text.append("tspan").attr("x", 0).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word);
                }
            }
        });
    }


    constructor(element: ElementRef, private ngZone: NgZone, d3Service: D3Service,
                private visualizationService: VisualizationService, private resultService: ResultService) {
        this.d3 = d3Service.getD3();
        this.parentNativeElement = element.nativeElement;

        const callback = (list) => {
            // console.log(list.json().obj);
            this.data = this.visualizationService.genFrequencyMap(list.json().obj);
            this.which = 0;
            this.dataLength = this.data.length;
            this.drawChart(0);
        };
        this.resultService.getChartData(callback);

    }


    drawChart(which: number) {

        let self = this;
        let d3 = this.d3;
        let d3ParentElement: any;
        let svg: any;
        let name: string;
        let yVal: number;
        let colors: any = [];
        let padding: number = 50;
        let data = this.data[which];
        this.title = data.question;
        let chart_width: number = 1200;
        let chart_height: number = 400;
        let x_scale: any;
        let y_scale: any;
        let xColor: any;
        let xAxis: any;
        let yAxis: any;

        if (this.parentNativeElement !== null) {

            svg = d3.select(this.parentNativeElement)
                .select('#chart')
                .append('svg')        // create an <svg> element
                .attr('width', 1200) // set its dimensions
                .attr('height', chart_height);

// Create Scales
            let maxY = Math.max.apply(Math,data.data.map(function(o){return o.qty;}));

            x_scale = d3.scaleBand()
                .domain(d3.range(data.data.length))
                .rangeRound([padding, chart_width - padding])
                .paddingInner(0.05);
            y_scale = d3.scaleLinear()
                .domain([
                    0, maxY
                ])
                .range([0, chart_height- padding]);

// Bind Data and create bars
            svg.selectAll('rect')
                .data(data.data)
                .enter()
                .append('rect')
                .attr('x', function (d, i) {
                    return x_scale(i);
                })
                .attr('y', function (d) {
                    return chart_height - y_scale(d.qty);
                })
                .attr('width', x_scale.bandwidth())
                .attr('height', function (d) {
                    return y_scale(d.qty);
                })
                .attr('fill', '#7ED26D');

            // Create Labels
            svg.selectAll('text')
                .data(data.data)
                .enter()
                .append('text')
                .html(function (d,i) {
                    return ("<tspan dy='0em'>"+d.answer+"</tspan>"+"<tspan dy='1em'>"+"Qty:"+d.qty+"</tspan>");
                })
                .attr('x', function (d, i) {
                    return x_scale(i) + x_scale.bandwidth() / 2;
                })
                .attr('y', function (d) {
                    return chart_height - y_scale(d.qty) + 15;
                })
                .attr('font-size', 10)
                    .attr('font-weight', 'bold')
                .attr('fill', '#000000')
                .attr('text-anchor', 'middle');
        }
    }



    updateChart(which: number) {

        // this.visualizationService.doSomething();



        let self = this;
        let d3 = this.d3;
        let d3ParentElement: any;
        let svg: any;
        let name: string;
        let yVal: number;
        let colors: any = [];
        let padding: number = 50;
        let data = this.data[which];
        this.title = data.question;
        let chart_width: number = 1200;
        let chart_height: number = 400;
        let x_scale: any;
        let y_scale: any;
        let xColor: any;
        let xAxis: any;
        let yAxis: any;

        let key = function(d){
            return d.answer;
        };

        if (this.parentNativeElement !== null) {

            svg = d3.select(this.parentNativeElement)
                .select('#chart')
                .select('svg')        // create an <svg> element
                .attr('width', 1200) // set its dimensions
                .attr('height', chart_height);

// Create Scales
            let maxY = Math.max.apply(Math,data.data.map(function(o){return o.qty;}));

            x_scale = d3.scaleBand()
                .domain(d3.range(data.data.length))
                .rangeRound([padding, chart_width - padding])
                .paddingInner(0.05);
            y_scale = d3.scaleLinear()
                .domain([
                    0, maxY
                ])
                .range([0, chart_height- padding]);

// Bind Data and create bars
            svg.selectAll('rect')
                .data(data.data)
                .enter()
                .append('rect')
                .attr('x', function (d, i) {
                    return x_scale(i);
                })
                .attr('y', function (d) {
                    return chart_height - y_scale(d.qty);
                })
                .attr('width', x_scale.bandwidth())
                .attr('height', function (d) {
                    return y_scale(d.qty);
                })
                .attr('fill', '#7ED26D');


            // Create Labels
            svg.selectAll('text')
                .data(data.data)
                .enter()
                .append('text')
                .html(function (d,i) {
                    return ("<tspan dy='0em'>"+d.answer+"</tspan>"
                           +"<tspan dy='1em'>"+"Qty:"+d.qty+"</tspan>");
                })
                .attr('x', function (d, i) {
                    return x_scale(i) + x_scale.bandwidth() / 2;
                })
                .attr('y', function (d) {
                    return chart_height - y_scale(d.qty) + 15;
                })
                .attr('font-size', 10)
                .attr('fill', '#000000')
                .attr('font-weight', 'bold')
                .attr('text-anchor', 'middle');
        }
    }

    clearChart() {
        let d3 = this.d3;
        let svg = d3.select("svg");
        svg.selectAll("*")
            .remove();}


    ngOnInit(){
        // this.data = this.visualizationService.getChart(null);
    }

    switchQuestion(){
        if(this.which < (this.dataLength - 1)){
            this.clearChart();
            this.which += 1;
            this.updateChart(this.which);
        }else{
            this.clearChart();
            this.which = 0;
            this.updateChart(this.which);
        }

    }
}