import { View, type StyleProp, type ViewStyle } from 'react-native';
import { useVolume } from '../../hooks';
import { useVideo } from '../../providers';
import { useSharedValue, useDerivedValue } from 'react-native-reanimated';
import { Slider } from 'react-native-awesome-slider';

export interface VolumeControlProps {
  orientation?: 'horizontal' | 'vertical';
  width?: number;
  height?: number;
  thumbWidth?: number;
  trackColor?: string;
  progressColor?: string;
  style?: StyleProp<ViewStyle>;
  /** Callback fired when the volume changes. */
  onVolumeChange?: (volume: number) => void;
}

/**
 * `VolumeControl` is a slider component that allows users to adjust the video's volume.
 * It provides a visual representation of the current volume level and allows for interactive changes.
 * It uses `react-native-awesome-slider` for the slider functionality and integrates with the video player's volume state.
 *
 * @param {VolumeControlProps} props - The props for the VolumeControl component.
 * @returns {React.ReactElement} A slider component for volume control.
 */
export const VolumeControl = ({
  orientation = 'horizontal',
  width = 100,
  height = 4,
  thumbWidth = 12,
  style,
  onVolumeChange,
}: VolumeControlProps): React.ReactElement => {
  const { volume, setVolume } = useVolume();
  const {
    state: { theme },
  } = useVideo();

  const updateVolume = (newVolume: number) => {
    setVolume(newVolume);
    onVolumeChange?.(newVolume);
  };

  // Shared values for the slider (0-1 scale to match volume state)
  const progress = useDerivedValue(() => volume);
  const min = useSharedValue(0);
  const max = useSharedValue(1);

  return (
    <View style={style}>
      <Slider
        progress={progress}
        minimumValue={min}
        maximumValue={max}
        onValueChange={updateVolume}
        theme={{
          minimumTrackTintColor: theme.colors.sliderTrackActive,
          maximumTrackTintColor: theme.colors.sliderTrackInactive,
        }}
        renderBubble={() => null}
        thumbWidth={thumbWidth}
        containerStyle={{
          height,
          width,
          borderRadius: height / 2,
        }}
      />
    </View>
  );
};