import React from 'react';
import * as ImagePicker from 'expo-image-picker';
import { Center, Icon, Pressable, Image } from 'native-base';
import Unicons from '../Unicons';
import { GestureResponderEvent, StyleSheet } from 'react-native';

interface AvatarProps {
    uri?: string;
    colorType?: "dark" | "light";
    onImagePicked: (uri: string) => void;
}

export default function Avatar(props: AvatarProps) {
    const width = "112px";
    const height = "112px";
    const pickImage = async () => {
        // No permissions request is necessary for launching the image library
        let result = await ImagePicker.launchImageLibraryAsync({
            mediaTypes: ImagePicker.MediaTypeOptions.All,
            quality: 1,
        });

        if (!result.cancelled) {
            props.onImagePicked(result.uri);
        }
    };

    return <Pressable onPress={!props.uri ? pickImage : undefined}>
        <Center
            bgColor={props.colorType !== "dark" ? "mini_bg_dark_blue" : "mini_dark_blue"}
            w={width}
            h={height}
            borderRadius={"full"}
        >
            {!!props.uri
                ? <>
                    <Image
                        borderRadius={"full"}
                        w={width}
                        h={height}
                        alt="Avatar"
                        source={{
                            uri: props.uri
                        }}
                        style={{
                            ...StyleSheet.absoluteFillObject
                        }}
                    />
                    <EditButton onPress={!!props.uri ? pickImage : undefined}  />
                </>
                : <Icon as={Unicons} name={"camera"} m="0" p="0" size="lg" color={"mini_text_gray"} />
            }
        </Center>
    </Pressable>
}

function EditButton({ onPress }: { onPress?: (e: GestureResponderEvent) => void}) {
    const [pressed, setPressed] = React.useState(false);

    return <Pressable
        onPressIn={() => setPressed(true)}
        onPressOut={() => setPressed(false)}
        onPress={onPress}
        style={{
            position: 'absolute',
            bottom: 0,
            right: 0,
            opacity: pressed ? 0.7 : 1
        }}>
        <Center
            bgColor="mini_blue"
            w="8"
            h="8"
            borderRadius={"full"}
        >
            <Icon as={Unicons} name={"pen"} m="0" p="0" size="sm" color={"mini_white"} />
        </Center>
    </Pressable>
}

export function AvatarWorkingPrototype({ type }: { type: "dark" | "light" }) {
    const [uri, setUri] = React.useState<string>();
    return <Avatar
        colorType={type}
        uri={uri}
        onImagePicked={(u) => setUri(u)}
    />
}