import { Image, Text, View, StyleSheet, BackHandler } from "react-native";
import { FullPageLoader } from "../../common/components/full_page_loader";
import { ApiRequestStatus } from "../../common/const/api_request_states";
import { ScrollView } from "react-native-gesture-handler";
import { AudioPlayer } from "../../common/components/audio_player";
import { TouchableOpacity } from "@gorhom/bottom-sheet";
import { LIGHT_THEME } from "../../common/const/theme";
import { router } from "expo-router";
import { useAudio } from "../../common/contexts/audio_context";
import { memo, useEffect, useState } from "react";
import { StarRatingForm } from "../../common/components/rating_page/star_rating_form";
import { FullPageRating } from "../../common/components/rating_page/full_page_rating";
import { useRankActivity } from "../hooks/useRankActivity";
import { useGetActivityPoint } from "../hooks/useGetActivityPoint";

const touristGuide = require("../../../assets/guide.gif");

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

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

    const { onUnmount } = useAudio();
    const { openRatingModal, closeRatingModal, ratingModal, rankActivity } =
      useRankActivity(activityId);

    useEffect(() => {
      onUnmount();
      const backAction = () => {
        onUnmount();
        router.back();
        return true;
      };

      const backHandler = BackHandler.addEventListener(
        "hardwareBackPress",
        backAction
      );

      return () => backHandler.remove();
    }, []);

    const doNextActivity = () => {
      router.replace("/scan");
    };

    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={styles.imageContainer}>
            <Image
              source={{ uri: data.imageUrl }}
              style={styles.image}
              resizeMode="contain"
            />
            <Image
              source={touristGuide}
              style={styles.touristGuide}
              resizeMode="contain"
            />
          </View>
          <ScrollView
            contentContainerStyle={{
              alignItems: "center",
              paddingVertical: 20,
            }}
          >
            <Text style={styles.contentText}>{data.content.content}</Text>
            <View style={{ height: 30 }} />
            {data.directions && (
              <>
                <Text style={styles.title}>Directions</Text>
                <Text style={styles.contentText}>
                  {data.directions.content}
                </Text>
                <View style={{ height: 30 }} />
                <TouchableOpacity style={styles.endActivityButton}>
                  <Text
                    style={styles.endActivityButtonText}
                    onPress={doNextActivity}
                  >
                    Next Activity
                  </Text>
                </TouchableOpacity>
              </>
            )}
            {!data.directions && (
              <TouchableOpacity style={styles.endActivityButton}>
                <Text
                  style={styles.endActivityButtonText}
                  onPress={openRatingModal}
                >
                  End Activity
                </Text>
              </TouchableOpacity>
            )}
          </ScrollView>
        </View>
        <AudioPlayer pointId={data.idPlaceActivity} />
        {!data.directions && ratingModal && (
          <FullPageRating
            onClose={closeRatingModal}
            onSubmitted={rankActivity}
          />
        )}
      </View>
    );
  }
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    gap: 15,
    justifyContent: "space-between",
  },
  placeContainer: {
    flex: 1,
    gap: 20,
    padding: 20,
    alignItems: "center",
  },
  title: {
    fontSize: 24,
    fontWeight: "400",
    textAlign: "center",
  },
  contentText: {
    fontSize: 18,
    lineHeight: 30,
    textAlign: "justify",
  },
  imageContainer: {
    width: "100%",
    height: 300,
    backgroundColor: "white",
    padding: 10,
    borderRadius: 10,
    overflow: "hidden",
    borderWidth: 2,
  },
  image: {
    height: "60%",
    width: "60%",
    zIndex: 1,
  },
  touristGuide: {
    height: "60%",
    width: "60%",
    position: "absolute",
    bottom: 10,
    right: 10,
  },
  endActivityButton: {
    backgroundColor: LIGHT_THEME.color.primary,
    padding: 10,
    borderRadius: 25,
    alignItems: "center",
    justifyContent: "center",
    width: 200,
    height: 50,
  },
  endActivityButtonText: {
    color: LIGHT_THEME.color.white,
    fontWeight: "bold",
    fontSize: 16,
  },
});
