account.jsx

import React, { useCallback, useEffect, useState } from 'react'
import {
  StyleSheet,
  View,
  Text,
  TouchableOpacity,
  Button,
  Image,
} from 'react-native'

import DrawerButton from '../drawer/drawerButton'
import * as ImagePicker from 'expo-image-picker'
import { db, auth, storage } from '../api/FirebaseApi'

onSelect = () => {
  auth.signOut()
}

export default function Account2(props) {
  const [uploadingimage, setimage] = useState('')
  const [user, currentuser] = useState('')

  useEffect(() => {
    const fetchPosts = async () => {
      let currentmember = auth.currentUser.uid
      db.ref('agent/').on('value', (snapshot) => {
        if (snapshot.val() != null) {
          Object.keys(snapshot.val()).map((val) => {
            db.ref('agent/' + val + '/agent/').on('value', function (snapshot) {
              if (snapshot.val()) {
                if (snapshot.val()) {
                  if (snapshot.val().useruid.trim() == currentmember.trim()) {
                    currentuser(snapshot.val().displayname)
                  }
                }
              }
            })
          })
        }
      })
    }
    fetchPosts().then()
  }, [])

  const _pickImage = async () => {
    let pickerResult = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: 'Images',
      aspect: [4, 3],
    })
    setimage(pickerResult.uri)
    console.log(pickerResult)
  }
  const uploadimage = async () => {
    handleImagePicked(uploadingimage)
  }
  const handleImagePicked = async (pickerResult) => {
    try {
      uploadUrl = await uploadImageAsync(pickerResult)
      if (uploadUrl != '' && uploadingimage != '') {
        db.ref('agent/' + user.trim() + '/agent/').update({
          profileimage: uploadUrl,
        })
        setimage('')
        alert('success')
      }
    } catch (e) {
      console.log(e)
      alert('Upload failed, sorry :(')
    } finally {
    }
  }

  async function uploadImageAsync(upload) {
    const blob = await new Promise((resolve, reject) => {
      const xhr = new XMLHttpRequest()
      xhr.onload = function () {
        resolve(xhr.response)
      }
      xhr.onerror = function (e) {
        console.log(e)
        reject(new TypeError('Network request failed'))
      }
      xhr.responseType = 'blob'
      xhr.open('GET', upload, true)
      xhr.send(null)
    })

    const ref = storage.ref().child('profile/' + user + '.jpg')
    const snapshot = await ref.put(blob)

    // We're done with the blob, close and release it
    blob.close()

    return await snapshot.ref.getDownloadURL()
  }

  return (
    <View>
      <View style={{ marginTop: 64, alignItems: 'center' }}>
        <TouchableOpacity style={styles.avatarContainer} onPress={_pickImage}>
          <Image source={{ uri: uploadingimage }} style={styles.avatar} />
        </TouchableOpacity>
        <Text style={styles.name}>{user}</Text>
      </View>
      <Button title="sign out" onPress={onSelect} />
      <TouchableOpacity style={[styles.button]} onPress={_pickImage}>
        <Text>Choose Image</Text>
      </TouchableOpacity>
      <Image
        source={{ uri: uploadingimage }}
        style={{ width: 100, height: 100 }}
      />
      <TouchableOpacity style={[styles.button]} onPress={uploadimage}>
        <Text>change profile image</Text>
      </TouchableOpacity>
    </View>
  )
}
const styles = StyleSheet.create({
  button: {
    padding: 10,
    borderWidth: 1,
    borderColor: '#333',
    textAlign: 'center',
    maxWidth: 150,
  },
  avatar: {
    width: 136,
    height: 136,
    borderRadius: 68,
  },
  avatarContainer: {
    shadowColor: 'red',
    shadowRadius: 40,
    shadowOpacity: 0.4,
  },
})

Account2.navigationOptions = ({ navigation }) => {
  return {
    headerTitle: 'My Account',
    headerTintColor: 'white',
    headerStyle: {
      backgroundColor: 'black',
    },
    headerLeft: () => (
      <DrawerButton onPress={() => navigation.toggleDrawer()} />
    ),
  }
}