import {useCallback, useEffect, MutableRefObject} from 'react';
import {NativeScrollEvent, NativeSyntheticEvent, ScrollView} from 'react-native';

interface UseTimelineOffsetProps {
  onChangeOffset?: (offset: number) => void;
  scrollOffset?: number;
  scrollViewRef: MutableRefObject<ScrollView | undefined>;
}

export default (props: UseTimelineOffsetProps) => {
  const {onChangeOffset, scrollOffset, scrollViewRef} = props;

  useEffect(() => {
    // NOTE: The main reason for this feature is to sync the offset
    // between all of the timelines in the TimelineList component
    if (scrollOffset !== undefined) {
      scrollViewRef?.current?.scrollTo({
        y: scrollOffset,
        animated: false
      });
    }
  }, [scrollOffset]);

  const onScrollEndDrag = useCallback((event: NativeSyntheticEvent<NativeScrollEvent>) => {
    const offset = event.nativeEvent.contentOffset.y;
    const velocity = event.nativeEvent.velocity?.y;

    if (velocity === 0) {
      onChangeOffset?.(offset);
    }
  }, []);

  const onMomentumScrollEnd = useCallback((event: NativeSyntheticEvent<NativeScrollEvent>) => {
    onChangeOffset?.(event.nativeEvent.contentOffset.y);
  }, []);

  return {
    scrollEvents: {
      onScrollEndDrag,
      onMomentumScrollEnd
    }
  };
};