import React, { useState, useEffect, useRef } from 'react'
import { View, AppState, SafeAreaView, Modal, Image, Dimensions, Button, TouchableOpacity, AsyncStorage } from 'react-native'
import ImagePicker from 'react-native-image-picker';
import RNFetchBlob from 'rn-fetch-blob'
import ProgressBar from 'react-native-progress/Bar'
import SwipeGesture from './swipe-gesture'
import ImageZoom from 'react-native-image-pan-zoom'

const App = () => {
  const [imgURL, setImgURL] = useState([])
  const [loading, setLoading] = useState(false)
  const [progress, setProgress] = useState(0)
  const [modalVisible, setModalVisible] = useState(false)
  const [indexImg, setIndexImg] = useState()
  const [displayedImg, setDisplayedImg] = useState()


  const appState = useRef(AppState.currentState);
  const [appStateVisible, setAppStateVisible] = useState(appState.current);

  useEffect(() => {
    AppState.addEventListener("change", _handleAppStateChange);

    return () => {
      AppState.removeEventListener("change", _handleAppStateChange);
    };
  }, []);

  useEffect(() => {
    saveData = async () => {
      await AsyncStorage.setItem('data', JSON.stringify(imgURL))
    }
    if (imgURL) saveData()
  }, [imgURL])

  useEffect(() => {
    AsyncStorage.getItem('data').then(data => {
      data = JSON.parse(data)
      setImgURL(data)
    })
  }, [])

  const _handleAppStateChange = async (nextAppState) => {
    if (
      appState.current.match(/inactive|background/) &&
      nextAppState === "active"
    ) {
      console.log("App has come to the foreground!");
      let data = await AsyncStorage.getItem('data')
      console.log(data)
    }

    appState.current = nextAppState;
    setAppStateVisible(appState.current);
    console.log("AppState", appState.current);
  };

  const onSwipePerformed = (action) => {
    switch (action) {
      case 'right': {
        if (indexImg == 0) {
          setModalVisible(false)
        } else {
          let temp = indexImg - 1
          setIndexImg(temp)
          setDisplayedImg(imgURL[temp])
        }
        break;
      }
      case 'left': {
        if (indexImg == imgURL.length - 1) {
          setModalVisible(false)
        } else {
          let temp = indexImg + 1
          setIndexImg(temp)
          setDisplayedImg(imgURL[temp])
        }
        break;
      }
      case 'up': {
        setModalVisible(false)
        break;
      }
      case 'down': {
        setModalVisible(false)
        break;
      }
      default: {
        console.log('Undeteceted action');
      }
    }
  }

  const handleChooseFile = () => {
    const options = {
      noData: true
    }
    ImagePicker.launchImageLibrary(options, async res => {
      if (res.uri) {
        const path = res.uri.replace("file://", "");
        setLoading(true)
        RNFetchBlob.fetch('POST', 'https://api.cloudinary.com/v1_1/dh3bemi7h/image/upload', {
          'Content-Type': 'multipart/form-data'
        }, [
          {
            name: 'file',
            filename: 'a.jpg',
            type: 'image/jpeg',
            data: RNFetchBlob.wrap(path)
          },
          {
            name: 'upload_preset',
            data: 'ble8rw6c'
          },
          {
            name: 'folder',
            data: 'mobile'
          }
        ])
          .uploadProgress((written, total) => {
            setProgress(written / total)
          })
          .then(res => {
            setLoading(false)
            setProgress(0)
            let result = JSON.parse(res.data)
            setImgURL([...imgURL, result.secure_url])
          }).catch(err => {
            console.log("err: ", err)
          })

      }
    })
  }

  const windowWidth = Dimensions.get('window').width
  const windowHeight = Dimensions.get('window').height
  let numPerRow = 3

  const size = windowWidth / numPerRow

  const showModal = (imgIndex) => {
    setModalVisible(true)
    setIndexImg(imgIndex)
    setDisplayedImg(imgURL[imgIndex])
  }

  renderRow = (images) => {
    return images.map((img, i) => {
      return (<TouchableOpacity key={i}
        onPress={() => showModal(img.id)}>
        <Image
          source={{
            uri: img.uri
          }}
          style={{
            'width': size,
            'height': size
          }}
        />
      </TouchableOpacity>)
    })
  }

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <Modal
        visible={modalVisible}
        animationType={"slide"}
      >
        <SafeAreaView style={{ flex: 1, justifyContent: 'center' }}>
          <SwipeGesture onSwipePerformed={onSwipePerformed}>
            <Button title="close" onPress={() => setModalVisible(false)} />
            <ImageZoom cropWidth={Dimensions.get('window').width}
                       cropHeight={Dimensions.get('window').height} >
            <Image
              source={{
                uri: displayedImg
              }}
              style={{
                'width': windowWidth * 0.9,
                'height': windowHeight * 0.9,
                marginLeft: windowWidth * 0.05
              }}
            // onLoad={() => console.log("loading")}
            // onLoadEnd={() => console.log("loaded")}
            />
            </ImageZoom>
          </SwipeGesture>
        </SafeAreaView>
      </Modal>
      <View>
        <Button onPress={handleChooseFile} title={loading ? `Uploading (${(progress * 100).toFixed()}%)` : "Upload"} />
        {loading && <ProgressBar progress={progress} width={Dimensions.get('window').width} />}
        {imgURL && imgURL.map((el, idx) => {
          return {
            uri: el,
            id: idx
          }
        }).reduce((all, one, i) => {
          const ch = Math.floor(i / numPerRow);
          all[ch] = [].concat((all[ch] || []), one);
          return all
        }, []).map((imgArr, index) => <View key={index} style={{ flexDirection: 'row', marginTop: 10 }}>
          {renderRow(imgArr)}
        </View>)}
      </View>
    </SafeAreaView>
  )
}

export default App