import react, { useState } from 'react';
import { useDispatch } from 'react-redux';

import _ from 'lodash';
import { mapActions } from '../../store/map';


interface WheelHandlerProps {
  children: any;
}

const WheelHandler: react.FC<WheelHandlerProps> = (
  props: WheelHandlerProps
) => {
  const dispatch = useDispatch();

  interface WheelState {
    timestamp: number;
  }

  const initialWheelState = {
    timestamp: 0,
  };

  const [wheelState, setWheelState] = useState(initialWheelState);

  console.log('WheelHandler, wheelState: ' + JSON.stringify(wheelState));

  const genericHandler = (event: any) => {
    console.log(`Log - Event:  ${event.type}`);
    if (event.deltaY !== undefined) {
      console.log(`Wheel : ${event.deltaY}, ${event.deltaMode}`);
      console.log(
        `wheelState: ' ${JSON.stringify(wheelState)} (+${
          Date.now() - wheelState.timestamp
        }ms) `
      );
      return;
    }
  };

  const wheelEventHandler = (event: any) => {
    genericHandler(event);
    if (
      event.deltaMode === WheelEvent.DOM_DELTA_PIXEL &&
      Date.now() - wheelState.timestamp > 100
    ) {
      dispatch(
        mapActions.scale({
          factor: event.deltaY > 0 ? 2 : 0.5,
          center: { x: event.pageX, y: event.pageY },
        })
      );
      setWheelState({
        timestamp: Date.now(),
      });
    }
  };

  return (
    <div className='viewport wheel-handler' onWheel={wheelEventHandler}>
      {props.children}
    </div>
  );
};

export default WheelHandler;