import { useCallback, useContext, useEffect, useRef } from 'react';
import { debounce } from 'lodash';
import { TimelineContext } from '../context';
import { TIMELINE_ACTIONS } from '../context/types';
import { TIMELINE_ROW_HEADER_WIDTH } from '../constants';
export function useTimelineWidth(hasSide, isFullWidth) {
  var timelineRef = useRef(null);
  var _useContext = useContext(TimelineContext),
    dispatch = _useContext.dispatch;
  var getWidth = useCallback(function () {
    if (!timelineRef.current) {
      return null;
    }
    var timelineWidth = timelineRef.current.getBoundingClientRect().width;
    var sideWidth = hasSide ? TIMELINE_ROW_HEADER_WIDTH : 0;
    return timelineWidth - 1 - sideWidth;
  }, [hasSide]);
  var dispatchWidthChange = useCallback(function () {
    var type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : TIMELINE_ACTIONS.CHANGE_WIDTH;
    dispatch({
      type: type,
      width: isFullWidth ? getWidth() : null
    });
  }, [dispatch, getWidth, isFullWidth]);

  /* eslint-disable consistent-return */
  useEffect(function () {
    dispatchWidthChange(TIMELINE_ACTIONS.INITIALISE);
    if (isFullWidth) {
      var onDocumentResize = debounce(function () {
        return dispatchWidthChange();
      }, 250);
      window.addEventListener('resize', onDocumentResize);
      return function () {
        window.removeEventListener('resize', onDocumentResize);
      };
    }
  }, [dispatchWidthChange, isFullWidth]);
  return {
    timelineRef: timelineRef
  };
}