import { TouchableOpacity, View, StyleSheet, Text } from "react-native";
import { FontAwesome, Feather } from "@expo/vector-icons";
import Slider from "@react-native-community/slider";
import { millisecondsToHourFormat } from "../utils/time";
import { LIGHT_THEME } from "../const/theme";
import { useAudio } from "../contexts/audio_context";
import { useEffect } from "react";
import { API_URL } from "../const/api";

interface AudioPlayerProps {
  pointId: number;
}

export const AudioPlayer = ({ pointId }: AudioPlayerProps) => {
  const { loadAudio, position, togglePlay, isPlaying, duration, onValueChange } =
    useAudio();

    useEffect(() => {
        loadAudio({ uri: `${API_URL}/point/${pointId}/audio?lang=es`});
    }, []);

  return (
    <View style={styles.container}>
      <View style={styles.sliderContainer}>
        <Text style={styles.hour_text}>
          {millisecondsToHourFormat(position)}
        </Text>
        <Slider
          thumbTintColor="gray"
          minimumTrackTintColor={LIGHT_THEME.color.white}
          minimumValue={0}
          maximumValue={duration}
          value={position}
          onValueChange={onValueChange}
          style={styles.slider}
        />
        <Text style={styles.hour_text}>
          {millisecondsToHourFormat(duration)}
        </Text>
      </View>
      <TouchableOpacity onPress={togglePlay}>
        <Feather
          name={isPlaying ? "pause-circle" : "play-circle"}
          size={54}
          color={LIGHT_THEME.color.white}
        />
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    height: 100,
    width: "100%",
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: LIGHT_THEME.color.primary,
    gap: 10,
  },
  sliderContainer: {
    width: "100%",
    display: "flex",
    flexDirection: "row",
    paddingHorizontal: 20,
  },
  slider: {
    flex: 1,
  },
  hour_text: {
    color: LIGHT_THEME.color.white,
    fontWeight: "bold",
  },
});
