import * as ImagePicker from "expo-image-picker";
import { useState } from "react";
import { Image, Pressable, Text } from "react-native";

export function AvatarPicker() {
  const [uri, setUri] = useState<string | null>(null);

  async function pick() {
    const perm = await ImagePicker.requestMediaLibraryPermissionsAsync();
    if (!perm.granted) return;
    const result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ["images"],
      allowsEditing: true,
      aspect: [1, 1],
      quality: 0.8,
    });
    if (!result.canceled) setUri(result.assets[0]?.uri ?? null);
  }

  return (
    <>
      <Pressable onPress={pick}>
        <Text>Choose photo</Text>
      </Pressable>
      {uri ? (
        <Image source={{ uri }} style={{ width: 96, height: 96 }} />
      ) : null}
    </>
  );
}