import { usePlayer } from "./usePlayer";
import * as React from "react";

export const useChapterMarkerOverlay = (): ChapterMarkerEvent => {
  const player = usePlayer();
  const [event, setEvent] = React.useState<ChapterMarkerEvent>(null);

  React.useEffect(() => {
    if (player) {
      const obeserver = player.getOverlayObservable();

      if (obeserver) {
        const subscription = obeserver
          .getChapterMarkerObservable()
          ?.subscribe((event) => {
            setEvent(event);
          });

        return () => {
          if (subscription) {
            subscription.unsubscribe();
          }
        };
      }
    }
  }, [player]);

  return event;
};