import React from 'react'
import { calculateTimeSeriesTicks, resolveAxis } from '../utils/helpers';
import { ZoomInIcon } from '../Icons';

export const ZoomIn = (props: any) => {
    const {
        yAxisDomainMap, 
        xAxisDomainMap,
        setXAxisDomainMap, 
        yAxisMap, 
        xAxisMap, 
        setYAxisDomainMap, 
        setTicks
    } = props;
   
    const zoomFunction = (e: any) => {
        setYAxisDomainMap(
            Object.keys(yAxisDomainMap).reduce((aggregate: any, key: string) => {
                const yAxis = yAxisMap[key];
    
                const domain = resolveAxis(props, yAxisDomainMap[key], null, yAxis.yAxisId, 'yAxis');
                const diff = domain[1]-domain[0];
                const mult = 0.5;
                const sub = (diff-(diff*mult))*mult;

                return {
                    ...aggregate,
                    [yAxis.yAxisId]:  [domain[0]+sub, domain[1]-sub]
                };
            }, {})
        );

        setXAxisDomainMap(
            Object.keys(xAxisDomainMap).reduce((aggregate: any, key: string) => {
                const xAxis = xAxisMap[key];
    
                const domain = resolveAxis(props, xAxisDomainMap[key], null, xAxis.xAxisId, 'xAxis');
                const diff = domain[1]-domain[0];
                const mult = 0.5;
                const sub = (diff-(diff*mult))*mult;
                const zoomedDomain = [domain[0]+sub, domain[1]-sub];
                calculateTimeSeriesTicks(5, xAxisDomainMap[key], zoomedDomain, setTicks);

                return {
                    ...aggregate,
                    [xAxis.xAxisId]:  zoomedDomain
                };
            }, {})
        );
    };

    return <ZoomInIcon onClick={zoomFunction} />;
}