"use client";

import { useState, useEffect, useCallback, useRef, RefObject } from "react";
import { Volume1, Volume2, VolumeX } from "lucide-react";

export function useVolume(
  videoRef: RefObject<HTMLVideoElement | null>,
  isCasting: boolean,
) {
  const [volume, setVolume] = useState(1);
  const [isMuted, setIsMuted] = useState(false);
  const [showSlider, setShowSlider] = useState(false);

  // Sync to video element
  useEffect(() => {
    if (!videoRef.current) return;
    videoRef.current.muted = isMuted;
    videoRef.current.volume = volume;
  }, [isMuted, volume, videoRef]);

  // Auto-mute when casting, restore on cast end
  const prevMutedRef = useRef(false);
  useEffect(() => {
    if (isCasting) {
      prevMutedRef.current = isMuted;
      setIsMuted(true);
    } else {
      setIsMuted(prevMutedRef.current);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isCasting]);

  const toggleMute = useCallback(() => setIsMuted((m) => !m), []);

  const VolumeIcon =
    isMuted || volume === 0 ? VolumeX : volume < 0.5 ? Volume1 : Volume2;

  return { volume, setVolume, isMuted, setIsMuted, toggleMute, VolumeIcon, showSlider, setShowSlider };
}