import { useState, useEffect, useCallback } from "react";
import { Player } from "../player";
import { usePlayer } from "../usePlayer";
import { useThrottle } from "../../../functionUtils";

/**
 *
 * @param listenerId - A unique identifier for the listener.
 * @param playerId - (Optional) The ID of the player to observe.
 * @returns The current playback time in seconds.
 */
export const usePlayerCurrentTime = (
  listenerId: string,
  playerId?: string
): number | null => {
  const [currentTime, setCurrentTime] = useState<number | null>(null);
  const player: Player = usePlayer(playerId);

  const updateCurrentTime = useCallback(() => {
    if (player) {
      const newCurrentTime = player.getContentPosition();

      setCurrentTime((prevTime) =>
        prevTime !== newCurrentTime ? newCurrentTime : prevTime
      );
    }
  }, [player]);

  const { throttledFunction: throttledUpdate, cancel } = useThrottle(
    updateCurrentTime,
    1000
  );

  useEffect(() => {
    if (player) {
      throttledUpdate();

      const listeners = {
        onVideoProgress: throttledUpdate,
      };

      const id = `${listenerId}_player_current_time`;

      player.addListener({
        id: id,
        listener: listeners,
      });

      return () => {
        player.removeListener(id);
        cancel();
      };
    }
  }, [player, listenerId, throttledUpdate, cancel]);

  return currentTime;
};