import { Image, Text, View, StyleSheet } from "react-native";
import { FullPageLoader } from "../../components/full_page_loader/full_page_loader";
import { ApiRequestStatus } from "../../constants/api_request_states";
import { useGetActivityPoint } from "../../hooks/useGetActivityPoint";
import { ScrollView } from "react-native-gesture-handler";
import { AudioPlayer } from "../../components/audio_player/audio_player";

interface ActivityPointScreenProps {
  stateId: number;
  townId: number;
  activityId: number;
  id: number;
}

export const ActivityPointScreen = ({
  stateId,
  townId,
  activityId,
  id,
}: ActivityPointScreenProps) => {
  const { data, requestStatus } = useGetActivityPoint({
    activityId,
    townId,
    stateId,
    placeNumber: id,
  });

  if (requestStatus === ApiRequestStatus.LOADING) {
    return <FullPageLoader />;
  }

  if (requestStatus === ApiRequestStatus.ERROR || !data) {
    return null;
  }
  return (
    <View style={styles.container}>
      <View style={styles.placeContainer}>
        <Text style={styles.title}>{data.name}</Text>
        <View style={{ height: 30 }} />
        <Image
          source={{ uri: data.imageUrl }}
          style={styles.image}
          resizeMode="contain"
        />
        <ScrollView>
          <Text style={styles.contentText} >{data.content.content}</Text>
        </ScrollView>
      </View>
      <AudioPlayer
        audioUrl={data.content.speakUrl}
        title={data.name}
        description={data.content.content}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    gap: 15,
    justifyContent: "space-between",
  },
  placeContainer: {
    flex: 1,
    gap: 20,
    padding: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: "bold",
    textAlign: "center",
  },
  contentText: {
    fontSize: 16,
  },
  image: {
    height: 300,
    width: "100%",
  },
});
