import React from "react";
import { Button, Layout, Icon } from "@ui-kitten/components";
import { useModel } from "flooks";
import { Linking } from "expo";
import * as ImagePicker from "expo-image-picker";
import { Image } from "react-native";
import * as FileSystem from "expo-file-system";

export default function UpLoadImage(props) {
    const { connect } = useModel("wordsModel");
    const { httpPost } = useModel("httpModel", true);
    const renderPulseIcon = (props) => <Icon {...props} name='plus-outline' />;

    return (
        <>
            <Button
                style={[props.style]}
                appearance='imageButton'
                onPress={() => {
                    _pickImage().then((img) => {
                        console.log(img);
                        httpPost("/upload/base64", {
                            base64: img,
                        }).then((res) => {
                            props.changeIcon(res);
                        });
                    });
                }}
                accessoryLeft={(imgprops) => {
                    if (props.value && props.value != " ") {
                        return (
                            <Image
                                style={{
                                    width: "100%",
                                    height: "100%",
                                }}
                                source={{ uri: props.value }}
                            />
                        );
                    } else {
                        return renderPulseIcon(imgprops);
                    }
                }}
            />
        </>
    );
}

const getPermissionAsync = async () => {
    if (Constants.platform.ios) {
        const { status } = await Permissions.askAsync(Permissions.CAMERA_ROLL);
        if (status !== "granted") {
            alert("Sorry, we need camera roll permissions to make this work!");
        }
    }
};

const _pickImage = () => {
    return new Promise(async (resolve, reject) => {
        try {
            let permissionResult = await ImagePicker.requestCameraRollPermissionsAsync();

            if (permissionResult.granted === false) {
                reject("notAllod");
            } else {
                let result = await ImagePicker.launchImageLibraryAsync({
                    mediaTypes: ImagePicker.MediaTypeOptions.Images,
                    allowsEditing: true,
                    aspect: [1, 1],
                    quality: 1,
                    base64: true,
                });
                if (!result.cancelled) {
                    console.log(result.base64)
                    // let file = await FileSystem.readAsStringAsync(result.uri);
                    resolve(result.base64);
                }
            }
        } catch (e) {
            reject(e);
        }
    });
};