// @flow
import React, { Component } from 'react'
import {
  PixelRatio,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  View,
} from 'react-native'
import Icon from 'react-native-vector-icons/Ionicons'
import FastImage from 'react-native-fast-image'
import timeout from 'react-timeout'
import uuid from 'uuid/v4'

const getImageUrl = (id, width, height) =>
  `https://source.unsplash.com/${id}/${width}x${height}`

const IMAGE_SIZE = 150
const IMAGE_SIZE_PX = PixelRatio.getPixelSizeForLayoutSize(IMAGE_SIZE)

// The server is used to test that sending headers is working correctly.
const USE_SERVER = false
const TOKEN = 'someToken'

const getImages = () => {
  if (USE_SERVER) {
    const baseUrl = '192.168.2.11'
    return [
      `http://${baseUrl}:8080/pictures/ahmed-saffu-235616.jpg`,
      `http://${baseUrl}:8080/pictures/alex-bertha-236361.jpg`,
      `http://${baseUrl}:8080/pictures/jaromir-kavan-233699.jpg`,
    ]
  }
  return [
    getImageUrl('x58soEovG_M', IMAGE_SIZE_PX, IMAGE_SIZE_PX),
    getImageUrl('yPI7myL5eWY', IMAGE_SIZE_PX, IMAGE_SIZE_PX),
    'https://cdn-images-1.medium.com/max/1600/1*-CY5bU4OqiJRox7G00sftw.gif',
  ]
}

const images = getImages()

class FastImageExample extends Component {
  componentDidMount() {
    // Forcing an update every 5s to demonstrate loading.
    this.props.setInterval(() => {
      this.forceUpdate()
    }, 5000)
  }

  render() {
    // Force complete re-render.
    const key = uuid()
    // Busting image cache.
    const bust = `?bust=${key}`
    // Preload images.
    FastImage.preload([
      {
        uri: 'https://facebook.github.io/react/img/logo_og.png',
        headers: { Authorization: 'someAuthToken' },
      },
      {
        uri: 'https://facebook.github.io/react/img/logo_og.png',
        headers: { Authorization: 'someAuthToken' },
      },
    ])
    return (
      <View style={styles.container} key={key}>
        <StatusBar
          translucent
          barStyle="dark-content"
          backgroundColor="transparent"
        />
        <ScrollView
          style={styles.scrollContainer}
          contentContainerStyle={styles.scrollContentContainer}
        >
          <View style={styles.textContainer}>
            <Text style={styles.bold}>FastImage</Text>
            <Text>• priority (low, normal, high)</Text>
            <Text>• authentication (token)</Text>
          </View>
          <FastImage
            style={styles.image}
            source={{
              uri: images[0] + bust,
              headers: {
                token: TOKEN,
              },
              priority: FastImage.priority.low,
            }}
          />
          <FastImage
            style={styles.image}
            source={{
              uri: images[1] + bust,
              headers: {
                token: TOKEN,
              },
              priority: FastImage.priority.normal,
            }}
          />
          <FastImage
            style={styles.image}
            source={{
              uri: images[2] + bust,
              headers: {
                token: TOKEN,
              },
              priority: FastImage.priority.high,
            }}
            onLoadStart={() => console.log('onLoadStart')}
            onProgress={e =>
              console.log(e.nativeEvent.loaded / e.nativeEvent.total)}
            onLoad={() => console.log('onLoad')}
            onError={() => console.log('onError')}
            onLoadEnd={() => console.log('onLoadEnd')}
          />
        </ScrollView>
      </View>
    )
  }
}

FastImageExample = timeout(FastImageExample)

FastImageExample.navigationOptions = {
  tabBarLabel: 'FastImage Example',
  tabBarIcon: ({ focused, tintColor }) => {
    if (focused)
      return <Icon name="ios-information-circle" size={26} color={tintColor} />
    return (
      <Icon name="ios-information-circle-outline" size={26} color={tintColor} />
    )
  },
}

const styles = StyleSheet.create({
  bold: {
    fontWeight: '900',
  },
  textContainer: {
    marginTop: 40,
    marginBottom: 20,
  },
  image: {
    height: IMAGE_SIZE,
    width: IMAGE_SIZE,
    backgroundColor: '#eee',
    margin: 2,
  },
  container: {
    flex: 1,
  },
  scrollContainer: {},
  scrollContentContainer: {
    alignItems: 'center',
    flex: 0,
  },
})

export default FastImageExample

@@ -1145,24 +1145,396 @@
 if',%0A  %5D%0A%7D%0A%0A
+const getTestProgressCallbacks = label =%3E (%7B%0A  onLoadStart: () =%3E console.log(%60$%7Blabel%7D - onLoadStart%60),%0A  onProgress: e =%3E console.log(%60$%7Blabel%7D - onProgress - $%7Be.nativeEvent.loaded / e.nativeEvent.total%7D%60),%0A  onLoad: () =%3E console.log(%60$%7Blabel%7D - onLoad%60),%0A  onError: () =%3E console.log(%60$%7Blabel%7D - onError%60),%0A  onLoadEnd: () =%3E console.log(%60$%7Blabel%7D - onLoadEnd%60),%0A%7D)%0A%0A
 const images
@@ -2992,32 +2992,79 @@
 %0A            %7D%7D%0A
+            %7B...getTestProgressCallbacks('1')%7D%0A
           /%3E%0A   
@@ -3052,32 +3052,32 @@
 )%7D%0A          /%3E%0A
-
           %3CFastI
@@ -3303,32 +3303,79 @@
 %0A            %7D%7D%0A
+            %7B...getTestProgressCallbacks('2')%7D%0A
           /%3E%0A   
@@ -3636,306 +3636,39 @@
     
-onLoadStart=%7B() =%3E console.log('onLoadStart')%7D%0A            onProgress=%7Be =%3E%0A              console.log(e.nativeEvent.loaded / e.nativeEvent.total)%7D%0A            onLoad=%7B() =%3E console.log('onLoad')%7D%0A            onError=%7B() =%3E console.log('onError')%7D%0A            onLoadEnd=%7B() =%3E console.log('onLoadEnd
+%7B...getTestProgressCallbacks('3
 ')%7D%0A

Add test of multiple progress callbacks to example.