import { View, Text, Image } from "react-native";
import { useGetTravelImage } from "../hooks/useGetTravelImage";
import { ApiRequestStatus } from "../../common/const/api_request_states";
import { FullPageLoader } from "../../common/components/full_page_loader";
import { useEffect } from "react";
import { ScrollView } from "react-native-gesture-handler";
import { FloatingEndActionButton } from "../../common/components/floating_end_action_button";
import { useDownloadFile } from "../../common/hooks/useDownloadFile";
import { router } from "expo-router";

interface DownloadTravelProps {
    id: number;
}

export const DownloadTravel = ({ id }: DownloadTravelProps) => {
    const { data, requestStatus, handleDownload } = useGetTravelImage({id});
    

    if (requestStatus === ApiRequestStatus.LOADING) {
        return (
            <FullPageLoader/>
        );
    }
    return (
        <ScrollView contentContainerStyle={{flex: 1, width: "100%", padding: 20}}>
            <Text>Download the image</Text>
            <Image source={{uri: data!}} style={{height: "50%", width: "100%", objectFit: "contain"}}/>
            <FloatingEndActionButton title="Download" onPress={() => handleDownload(data!)}/>
        </ScrollView>
    );
};