import React, { useState } from 'react';
import { View, TextInput, Image } from "react-native";
import { Text, Button, Divider } from "react-native-paper";
import { SafeAreaView } from "react-native-safe-area-context";
import API from './../API.js';
import { useNavigation } from '@react-navigation/native';
import * as ImagePicker from 'expo-image-picker';
import i18n from "../i18nMessages";
import Media from '../components/Media';


let NewPostView = ({writeTo})=>{
    let [postContent, setPostContent] = useState('');
    let [extraContent, setExtraContent] = useState([]);
    const [photo, setPhoto] = React.useState(null);
    const navigation = useNavigation();
    const pickImage = async () => {
        // No permissions request is necessary for launching the image library
        let result = await ImagePicker.launchImageLibraryAsync({
            mediaTypes: ImagePicker.MediaTypeOptions.Images,
            //allowsEditing: true,
            //aspect: [4, 3],
            //quality: 1,
            allowsMultipleSelection: true,
        });
        if (!result.cancelled) {
            setPhoto(result);
            let newPhotoURL = await handleUploadPhoto(result);
            let newExtraContent = ["@image:" + newPhotoURL].concat(extraContent);
            setExtraContent(newExtraContent);
            console.log(newExtraContent.join(" "));
            setPhoto(null);
        }
    };

    const handleUploadPhoto = async (photo) => {
        if (!photo) return;
        const uri =
            Platform.OS === "android"
                ? photo.uri
                : photo.uri.replace("file://", "");
        const filename = photo.uri.split("/").pop();
        const match = /\.(\w+)$/.exec(filename);
        const ext = match?.[1];
        const type = match ? `image/${match[1]}` : `image`;
        const formData = new FormData();
        formData.append("banner", {
            uri,
            name: `image.${ext}`,
            type,
        });
        try {
            let uploadedFile = await fetch("https://social.emmint.com/upload.php", {
                method: "POST",
                body: formData,
                headers: { "Content-Type": "multipart/form-data" }
            })
                .then((res) => res.json())
                .then((data) => {
                    console.log(data);
                    return data.fileName;
                })
                .catch((err) => console.error(err));
            return uploadedFile;
        } catch (err) {
            console.log(err);
            alert("Something went wrong");
        }

    };

    const handleNewPostButton = async () => {
        //setPostContent('');
        API.newPost(postContent + " " + extraContent.join(" ")).then((newPost) => {
            setPostContent('');
            setExtraContent([]);
            navigation.goBack();
            //if (newPostCB) newPostCB(newPost);
        });
    }

    return (
        <SafeAreaView>
            <View style={{padding: 10}}>
                <View style={{flexDirection:"row", marginBottom:10, justifyContent:"space-around"}}>
                    <Text style={{fontSize: 25}}>{i18n.t("message.statusUpdate")}:</Text>
                    <Button icon="send" mode="outlined" onPress={handleNewPostButton}>
                        {i18n.t("message.post")}
                    </Button>
                </View>
                <Divider bold={true}/>
                <TextInput
                    value={postContent}
                    onChangeText={setPostContent}
                    multiline={true}
                    numberOfLines={8}
                    style={{
                        backgroundColor: "rgba(0,0,0,0)",
                        textAlignVertical: "center",
                        textAlign: "center",
                        fontSize: 20,
                    }}
                    autoFocus={true}
                />
                <Divider  bold={true} />
                <View style={{flexDirection:"row", marginTop:10, justifyContent:"space-around"}}>
                    <Button icon="add-a-photo" mode="outlined" onPress={pickImage}>
                        Add Photos
                    </Button>
                </View>
                {photo && (
                    <View>
                        <Text>Uploading...</Text>
                        <Image
                            source={{ uri: photo.uri }}
                            style={{ width: 100, height: 100 }}
                        />
                    </View>
                )}
                {
                    extraContent.length > 0 && (
                        <Media content={extraContent.join(" ")} />
                    )
                }
            </View>
        </SafeAreaView>
    )
}

export default NewPostView;