import { View, Text, StyleSheet, Image, Dimensions } from "react-native";
import { useGetTravelDetails } from "../../travel/hooks/useGetTravelDetails";
import { ApiRequestStatus } from "../../common/const/api_request_states";
import { FullPageLoader } from "../../common/components/full_page_loader";
import { TravelActivityList } from "../../travel/components/activity_list";
import { formatToDDMMYYYY } from "../../common/utils/time";

interface TravelDetailsPageProps {
  id: number;
}

export const TravelDetailsPage = ({ id }: TravelDetailsPageProps) => {
  const { data, requestStatus } = useGetTravelDetails({ id });

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

  if (requestStatus === ApiRequestStatus.ERROR || !data) {
    return (
      <View style={styles.container}>
        <Text>Failed to load travel details</Text>
      </View>
    );
  }

  return (
    <View style={styles.container}>
      <View style={styles.imageContainer}>
        <Image
          source={{ uri: data.travel.imageUri }}
          style={styles.image}
          resizeMode="cover"
        />
        <View style={styles.imageTextContainer}>
          <Text style={styles.destinationText}>{data.travel.destination}</Text>
          <Text>
            {formatToDDMMYYYY(data.travel.startDate)} -{" "}
            {formatToDDMMYYYY(data.travel.endDate)}
          </Text>
          <Text>{`Numero de actividades: ${data.activityList.length}`}</Text>
        </View>
      </View>
      <TravelActivityList activityList={data.activityList} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  imageContainer: {
    flex: 3,
    backgroundColor: "black",
    justifyContent: "center",
    alignItems: "center",
  },
  image: {
    position: "absolute",
    width: "100%",
    height: "100%",
    opacity: 0.8,
  },
  imageTextContainer: {
    height: "80%",
    width: "80%",
    backgroundColor: "rgba(255, 255, 255, 0.8)",
    borderRadius: 10,
    padding: 20,
    gap: 10,
  },
  destinationText: {
    fontSize: 30,
    fontWeight: "bold",
  },
});
