import React, { useState, useEffect } from 'react'
import {View, FlatList, ScrollView, Animated, StyleSheet, Text, TouchableOpacity, Image, Platform} from 'react-native'
import { connect } from 'react-redux'
import { withNavigation } from 'react-navigation'
import firebase from 'react-native-firebase'
import ImagePicker from 'react-native-image-picker'

import { useForm } from '../../hooks/useForm'

import ActionButton from '../buttons/ActionButton'
import ItemInput from './ItemInput'
import AdditionalDetails, {
  CommentPicture,
  Comment,
  SelectOtherEventType,
} from './AdditionalDetails'
import {colors, CONTAINER_NUMBER, EVENTS} from '../../config'
import { useKeyboardListener } from '../../hooks/useKeyboardListener'
import {
  updateCurrentEvent,
  createEvent,
  addPictureEvent,
  removePictureEvent,
  addCommentEvent,
} from '../../redux/actions'

import { getGeolocation } from '../../libs/geolocation'
import { validateOtherEvent } from '../../libs/forms-validation/other-event-validation'
import Icon from "react-native-vector-icons/FontAwesome";

const styles = StyleSheet.create({
  viewContainer: {
    flex: 1,
  },
  viewContentContainer: {
    flexGrow: 1,
    justifyContent: 'space-between',
    alignItems: 'stretch',
    paddingTop: 24,
    paddingLeft: 24,
    paddingRight: 24,
  },
  additionalDetailsContent: {
    justifyContent: 'center',
    alignItems: 'center',
    alignSelf: 'stretch',
  },
  item: {
    backgroundColor: '#f9c2ff',
    padding: 10,
    marginVertical: 8,
    marginHorizontal: 16,
    width: 100,
    height:100
  },
  title: {
    fontSize: 32,
  },
  addPictureButton: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  addPictureText: {
    ...Platform.select({
      android: {
        fontFamily: 'Roboto',
      },
      ios: {
        fontFamily: 'San Francisco',
      },
    }),
    fontSize: 14,
    fontWeight: '400',
    color: colors.greyDark,
  },
  removePictureButton: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  removePictureText: {
    ...Platform.select({
      android: {
        fontFamily: 'Roboto',
      },
      ios: {
        fontFamily: 'San Francisco',
      },
    }),
    fontSize: 14,
    fontWeight: '400',
    color: colors.greyDark,
    marginLeft: 6,
  },

  picture: {
    marginBottom: 12,
  },
})

const pictureOptions = {
  title: 'Take a picture',
  mediaType: 'photo',
  cameraType: 'back',
  noData: true,
  storageOptions: {
    skipBackup: true,
    path: 'images',
  },
}

const mapStateToProps = state => ({
  eventType: state.currentEvent.type,
  containerNumber: state.currentEvent.containerNumber,
  additionalDetails: state.currentEvent.details,
})

const mapDispatchToProps = dispatch => ({
  saveEvent: event => dispatch(updateCurrentEvent(event)),
  addNewEvent: event => dispatch(createEvent(event)),
  addPicture: pictureData => dispatch(addPictureEvent(pictureData)),
  removePicture: () => dispatch(removePictureEvent()),
  addComment: comment => dispatch(addCommentEvent(comment)),
})

const OtherEventForm = ({
  eventType,
  containerNumber,
  additionalDetails,
  navigation,
  addNewEvent,
}) => {
  const initialValues = {
    pictures: [],
    containerNumber,
    eventType,
    // otherEventType: 'Container damaged',
    details: additionalDetails,
  }

  const {
    values,
    setValues,
    errors,
    handleChange,
    handleSubmit,
    isDirty,
  } = useForm(initialValues, createNewEvent, validateOtherEvent)

  const [detailsVisible, setDetailsVisible] = useState(false)
  const { shift } = useKeyboardListener()

  function sendDataBack(data) {
    setValues(prevState => ({ ...prevState, ...data }))
  }

  function goToCapture(scanType) {
    navigation.navigate('Capture', {
      scanType,
      sendDataBack,
    })
  }

  // function onAddPicture() {
  //   ImagePicker.launchCamera(pictureOptions, response => {
  //     if (!response.didCancel && !response.error) {
  //
  //       const picture = {
  //         key: picturesData.length,
  //         source: { uri: response.uri },
  //         isPortrait: !response.isVertical,
  //         ...response,
  //       }
  //       picturesData.push(picture);
  //       setValues(prevState => ({
  //         ...prevState,
  //         details: {
  //           ...prevState.details,
  //           picture,
  //         },
  //       }))
  //     }
  //   })
  // }
  //
  // function onRemovePicture() {
  //   setValues(prevState => {
  //     const {
  //       details: { picture, ...detailsRest },
  //       ...state
  //     } = prevState
  //
  //     return {
  //       ...state,
  //       details: detailsRest,
  //     }
  //   })
  // }

  function onAddComment(value) {
    handleChange({
      details: {
        ...values.details,
        comment: value,
      },
    })
  }

  function onPickerSelect(otherEventType) {
    setValues(prevState => ({
      ...prevState,
      otherEventType,
    }))
  }

  function onAdd() {
    console.log()
    ImagePicker.launchCamera(pictureOptions, response => {
      if (!response.didCancel && !response.error) {

        const newPicture = {
          key: values.pictures.length,
          source: { uri: response.uri },
          isPortrait: !response.isVertical,
          ...response,
        }

        setValues((prevState) => {
          const {
            pictures,
            ...state
          } = prevState

          pictures.push(newPicture)
          return {
            ...state,
            pictures: pictures,
          }
        })
      }
    })
  }

  function onRemove(key) {
    setValues((prevState) => {
      const {
        pictures,
        ...state
      } = prevState
      return {
        ...state,
        pictures: pictures.filter(item => item.key !== key),
      }
    })
  }

  /* Handle form submission */
  async function createNewEvent() {
    const position = {}

    try {
      const location = await getGeolocation()

      if (location) {
        // Set geocoords
        position.coords = new firebase.firestore.GeoPoint(
          location.coords.latitude,
          location.coords.longitude,
        )

        // Set null error
        position.error = null
      }
    } catch ({ code, message }) {
      position.error = { code, message }
    } finally {
      console.log('add new event', values, position)

      // create new event
      addNewEvent({
        ...values,
        type: eventType,
        position,
      })

      navigation.navigate(EVENTS[eventType].screen) // go to specific event type dashboard tab
    }
  }

  /* Handle additional details display */
  const onToggleDetails = () => setDetailsVisible(prevState => !prevState)

  // Set default picker option value to "Container damaged"
  useEffect(() => {
    onPickerSelect('Container damaged')
  }, [])

  return (
    <View style={styles.viewContainer}>
      <ScrollView
        style={styles.viewContainer}
        contentContainerStyle={styles.viewContentContainer}
        showsVerticalScrollIndicator
      >
        <Animated.View style={{ transform: [{ translateY: shift }] }}>
          <ItemInput
            name="containerNumber"
            placeholderText="Container number"
            onScanPress={() => goToCapture(CONTAINER_NUMBER)}
            onChangeText={value => handleChange({ containerNumber: value })}
            value={values.containerNumber}
            error={values.containerNumber ? !!errors.containerNumber : null}
          />

          <SelectOtherEventType
            selectedValue={values.otherEventType}
            onValueChange={onPickerSelect}
          />

          <AdditionalDetails
            visible={detailsVisible}
            onToggle={onToggleDetails}
          >
            <View style={styles.additionalDetailsContent}>
              <FlatList
                horizontal
                data={[...values.pictures, { plusImage: true }]}
                renderItem={({ item }) => {
                  if (item.plusImage) {
                    return (
                      <TouchableOpacity style={styles.addPictureButton} onPress={onAdd}>
                        <Icon name="camera" size={48} color={colors.greyDark} />
                        <Text style={styles.addPictureText}>Add Picture</Text>
                      </TouchableOpacity>
                    )
                  }
                  return (
                    <>
                      <Image
                        style={[
                          styles.picture,
                          {
                            width: item.isPortrait ? 200 / 1.33333 : 200,
                            height: item.isPortrait ? 200 : 200 / 1.33333,
                          },
                        ]}
                        source={item.source}
                      />
                      <TouchableOpacity
                        style={styles.removePictureButton}
                        onPress={onRemove(item.key)}
                      >
                        <Icon
                          name="trash-o"
                          size={14}
                          color={colors.greyDark}
                        />
                        <Text
                          style={styles.removePictureText}
                        >
                          Remove
                        </Text>
                      </TouchableOpacity>
                    </>
                  )
                }}
                keyExtractor={(item, index) => index.toString()}
              />
              <Comment
                value={values.details && values.details.comment}
                onChangeText={onAddComment}
              />
            </View>
          </AdditionalDetails>
        </Animated.View>
      </ScrollView>

      <ActionButton
        onPress={handleSubmit}
        text="Submit Container Event"
        disabled={isDirty}
      />
    </View>
  )
}

const ConnectedOtherEventForm = withNavigation(
  connect(
    mapStateToProps,
    mapDispatchToProps,
  )(OtherEventForm),
)

export { ConnectedOtherEventForm as OtherEventForm }