musicland/src/components/DocumentDropZone.js

import { useActionSheet } from '@expo/react-native-action-sheet'
import * as DocumentPicker from 'expo-document-picker'
import * as ImagePicker from 'expo-image-picker'
import moment from 'moment'
import { Image, Pressable, Text, View } from 'react-native'
import Compressor from 'react-native-compressor'
import useMinuit from 'react-native-minuit/src/hooks/useMinuit'
import React, { useCallback, useEffect, useRef, useState } from 'reactn'

import { arrayUnion } from '../config/firebase'

import { icons } from '../assets'
import { Fonts, Palette } from '../styles'
import Style, { gutterConstant, mainBorderRadius } from '../styles/Style'

import { uploadFileToFirebase } from '../helpers/uploadToFirebase'
import useLayoutType from '../hooks/useLayoutType'

const NATIVE_OPTIONS = [
  'Importer depuis la galerie',
  'Ajouter un fichier',
  'Prendre une photo ou une vidéo',
  'Annuler',
]

const DocumentDropZone = ({
  containerStyle = {},

  documentID = null,
  documentExists = false,

  collectionRef = null,

  setFiles = null,
  customElement = null,
  shouldReturnObject = false,
}) => {
  const dropRef = useRef(null)

  const [isDragging, setIsDragging] = useState(false)

  const { setIsLoading, setTooltip } = useMinuit()
  const { isDesktop, isWeb, isNative } = useLayoutType()
  const { showActionSheetWithOptions } = useActionSheet()

  useEffect(() => {
    if (isWeb && dropRef.current) {
      const el = dropRef.current

      const handleDragIn = (e) => {
        e.preventDefault()
        e.stopPropagation()
        setIsDragging(true)
      }

      const handleDragOut = (e) => {
        e.preventDefault()
        e.stopPropagation()
        if (!dropRef.current.contains(e.relatedTarget)) {
          console.log('drag left')
          setIsDragging(false)
        }
      }

      const handleDrop = (e) => {
        e.preventDefault()
        e.stopPropagation()
        setIsDragging(false)

        let files = [...e.dataTransfer.files]

        if (files.length > 0) {
          for (const file of files) {
            handleWebFile({ file })
          }
        }
      }

      el.addEventListener('dragenter', handleDragIn)
      el.addEventListener('dragleave', handleDragOut)
      el.addEventListener('dragover', (e) => e.preventDefault())
      el.addEventListener('drop', handleDrop)

      return () => {
        el.removeEventListener('dragenter', handleDragIn)
        el.removeEventListener('dragleave', handleDragOut)
        el.removeEventListener('dragover', (e) => e.preventDefault())
        el.removeEventListener('drop', handleDrop)
      }
    }
  }, [dropRef?.current])

  const handleWebFile = ({ file }) => {
    try {
      const { type = '' } = file
      const reader = new FileReader()

      reader.onloadend = () => {
        const base64 = reader.result.split(',')[1] // Vous pourriez avoir besoin de cette valeur base64 pour un upload direct
        const uri = reader.result // URI en base64 du fichier

        console.log('file', file)

        onUploadDocument({ files: [{ name: file.name, uri, type }] })
      }

      reader.onerror = (err) => {
        console.error('FileReader error', err)
      }

      reader.readAsDataURL(file) // Lire le fichier et déclencher reader.onloadend lorsque c'est fait
    } catch (error) {
      console.log(error)
      setTooltip({ text: error.message, type: 'error' })
    }
  }

  const onAddFile = async ({} = {}) => {
    try {
      if (isNative) {
        const cancelButtonIndex = NATIVE_OPTIONS.length - 1

        showActionSheetWithOptions(
          {
            options: NATIVE_OPTIONS,
            cancelButtonIndex,
            userInterfaceStyle: 'dark',
            ...Style.actionSheet,
          },
          async (selectedIndex) => {
            if (selectedIndex !== cancelButtonIndex) {
              switch (selectedIndex) {
                case 0:
                  onChooseLibrary()
                  break
                case 1:
                  onChooseDocumentPicker()
                  break
                case 2:
                  onTakePicture()
                  break
                default:
                  break
              }
            }
          }
        )
      } else {
        onChooseDocumentPicker()
      }
    } catch (error) {
      console.log(error)
      setTooltip({ text: error.message, type: 'error' })
    } finally {
      setIsLoading(false)
    }
  }

  const onChooseLibrary = async ({} = {}) => {
    const result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.All,
      allowsEditing: false,
      quality: 3,
    })

    if (result?.assets?.[0]?.uri) {
      const { uri, fileName = '' } = result?.assets?.[0]

      onUploadDocument({
        files: [
          {
            name: getAssetName({ fileName, uri }),
            uri,
            type: 'IMAGE',
          },
        ],
      })
    } else {
      throw new Error('Aucune image sélectionnée')
    }
  }

  const onChooseDocumentPicker = async ({} = {}) => {
    const result = await DocumentPicker.getDocumentAsync({
      type: '*/*',
      copyToCacheDirectory: false,
    })

    if (result?.assets?.length > 0) {
      const { name = '', uri = null } = result?.assets[0] || {}

      if (!uri) {
        throw new Error("Erreur lors de l'ajout du document")
      }

      onUploadDocument({
        files: [
          {
            name: name || getDefaultFileName(),
            uri,
          },
        ],
      })
    } else {
      console.log(result)
      throw new Error("Erreur lors de l'ajout du document")
    }
  }

  const onTakePicture = useCallback(async () => {
    const { status } = await ImagePicker.requestCameraPermissionsAsync()

    if (status !== 'granted') {
      throw new Error('Permissions caméra non accordées')
    }

    const result = await ImagePicker.launchCameraAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.All,
      allowsEditing: true,
      quality: 1,
    })

    if (result?.assets?.[0]?.uri) {
      const { uri, fileName = '' } = result?.assets?.[0]

      onUploadDocument({
        files: [
          {
            name: getAssetName({ fileName, uri }),
            uri,
            type: 'IMAGE',
          },
        ],
      })
    } else {
      throw new Error('Aucune image sélectionnée')
    }
  }, [])

  const getDefaultFileName = () => {
    const randomID = Math.random().toString(36).substring(7)
    return `${moment().format(`DD_MM_YYYY_HH_mm_ss`)}_${randomID}`
  }

  const getAssetName = ({ fileName = '', uri = '' }) => {
    let name = fileName

    if (!name && uri?.startsWith('file://')) {
      const splittedArray = uri?.split('/') || []
      name = splittedArray?.[splittedArray?.length - 1] || ''
    }

    if (!name?.length) {
      let extension = uri?.split(';')?.[0]?.split('/')?.[1] || ''

      const defaultFileName = getDefaultFileName()

      if (extension?.length) {
        name = `${defaultFileName}.${extension}`
      } else {
        name = `${defaultFileName}`
      }
    }

    return name
  }

  const onUploadDocument = async ({ files = [] } = {}) => {
    try {
      setIsLoading(true)

      const filesToUpdate = []

      await Promise.all(
        files.map(async (file) => {
          const { name = '', uri = null } = file

          console.log(file)

          if (!uri) {
            throw new Error("Erreur lors de l'ajout du document")
          }

          const fileName = name || getDefaultFileName()
          let type = 'FILE'

          if (name?.toLowerCase()?.match(/\.(jpeg|jpg|gif|png)$/) != null) {
            type = 'IMAGE'
          }

          if (name?.toLowerCase()?.match(/\.(mp4|mov|avi|mkv)$/) != null) {
            type = 'VIDEO'
          }

          let compressedURI = uri
          let thumbnailURI = null

          if (isNative) {
            if (type === 'IMAGE') {
              compressedURI = await Compressor.Image.compress(uri, {
                compressionMethod: 'manual',
                maxWidth: 1000,
                quality: 0.8,
              })
            } else if (type === 'VIDEO') {
              compressedURI = await Compressor.Video.compress(uri)
            }
          }

          const { resultURI = null } = await uploadFileToFirebase({
            uri: compressedURI,
            path: `documents/${documentID}/files/${fileName}`,
          })

          if (resultURI) {
            if (shouldReturnObject) {
              filesToUpdate.push({
                name: fileName,
                uri: resultURI,
                type,
                thumbnailURI,
              })
            } else {
              filesToUpdate.push(resultURI)
            }
          } else {
            console.log('resultURI is null')
          }
        })
      )

      if (filesToUpdate.length > 0) {
        if (documentExists) {
          await collectionRef.doc(documentID).update({
            files: arrayUnion(...filesToUpdate),
          })
        }

        if (setFiles) {
          setFiles((prev) => [...prev, ...filesToUpdate])
        }
      }

      setTooltip({ text: 'Document(s) ajouté(s) avec succès' })
    } catch (error) {
      console.log(error)
      setTooltip({ text: error.message, type: 'error' })
    } finally {
      setIsLoading(false)
    }
  }

  if (!documentID) {
    return null
  }

  return (
    <View ref={dropRef}>
      <Pressable onPress={onAddFile}>
        {customElement?.() || (
          <View
            style={{
              ...Style.containerCenter,
              backgroundColor: isDragging ? Palette.transparentGreen : Palette.transparentPrimary,
              borderRadius: mainBorderRadius,
              borderStyle: 'dashed',
              borderWidth: 2,
              borderColor: isDragging ? Palette.green : Palette.primary,
              ...containerStyle,
            }}
          >
            <Image
              source={icons.screenshot}
              style={{
                ...Style.iconLarge,
                marginBottom: gutterConstant,
              }}
            />
            <Text
              style={{
                ...Fonts({ type: 'default' }),
                textAlign: 'center',
                color: Palette.white,
              }}
            >
              {isWeb && isDesktop
                ? `Glissez-déposez ici\nles fichiers, images et vidéos\nà ajouter.`
                : 'Ajouter une image,\nun fichier ou une vidéo.'}
            </Text>
          </View>
        )}
      </Pressable>
    </View>
  )
}

export default DocumentDropZone