import * as d3 from 'd3/build/d3';
import xAxis from './xAxis';
import labels from './drawer/labels';
import {boolOrReturnValue} from  './drawer/xAxis'
import debounce from 'debounce'

export default (container, dimensions, scales, configuration, data, callback) => {
    const onZoom = (data,index,element) => {
            const scalingFunction = d3.event.transform.rescaleX(scales.x);
            
            if(boolOrReturnValue(configuration.hasTopAxis, data)){
                const selector = container.selectAll('.x-axis.top')
                    .call(d3.axisTop().scale(scalingFunction));
            }  
            
            if(boolOrReturnValue(configuration.hasBottomAxis, data)){
                const selector = container.selectAll('.x-axis.bottom')
                    .call(d3.axisBottom().scale(scalingFunction));    
            }

            const debouncedLabels = debounce(labels(container.select('.labels'),{ x : scalingFunction},configuration),100);
            
            requestAnimationFrame(() =>{
                
                const drops = container.selectAll('.drop-line')
                    .selectAll('.drop')
                    .attr('cx',(d,i) => {
                        return scalingFunction(new Date(d.date))
                })

                debouncedLabels(data);    

                if(callback){
                    callback(data);
                }
                
                
                (data);
            
            });

            
    };

    const zoom = d3.zoom()
        .scaleExtent([configuration.minScale, configuration.maxScale])
        .on('zoom', onZoom)
        .on('end', configuration.zoomend);
    
   container.call(zoom);
    return zoom;
};

@@ -867,31 +867,28 @@
   const 
-debouncedLabels
+sumDataCount
  = debou
@@ -1292,23 +1292,20 @@
     
-debouncedLabels
+sumDataCount
 (dat
@@ -1401,79 +1401,8 @@
   %7D%0A
-                %0A                %0A                (data);%0A            %0A
     

change the labels debounced function name