import React, { Component } from 'react'
import PropTypes from 'prop-types'
import {ScrollView, View, StyleSheet, FlatList, TouchableOpacity, Text, Image} from 'react-native'
import { connect } from 'react-redux'
import { Formik } from 'formik'

import {colors, EVENTS} from '../../config'
import { validationSchemas } from '../../libs/validation'

import ItemInput from '../../components/forms/ItemInput'
import ActionButton from '../../components/buttons/ActionButton'
import AdditionalDetails, {
  SelectOtherEventType,
  CommentPicture,
  Comment,
} from '../../components/forms/AdditionalDetails'
import Icon from "react-native-vector-icons/FontAwesome";

const mapStateToProps = (state, ownProps) => {
  const idToFind = ownProps.navigation.getParam('id')
  const [event] = state.events.filter(evt => evt.id === idToFind)

  return {
    event,
  }
}

const styles = StyleSheet.create({
  additionalDetailsContent: {
    justifyContent: 'center',
    alignItems: 'center',
    alignSelf: 'stretch',
  },
  picture: {
    marginBottom: 12,
  },
})

class EntryDetailsScreen extends Component {
  static propTypes = {
    event: PropTypes.object.isRequired,
    navigation: PropTypes.object.isRequired,
  }

  static navigationOptions = ({ navigation }) => {
    const title = navigation.getParam('title')
    const id = navigation.getParam('id')

    return {
      title: title || `Item #${id}`,
    }
  }

  state = {
    detailsVisible: false,
  }

  toggleDetails = () => this.setState(prevState => ({ detailsVisible: !prevState.detailsVisible }))

  goToList = () => {
    const { navigation, event } = this.props
    navigation.navigate(EVENTS[event.type].screen)
  }

  render() {
    const { event } = this.props
    const { detailsVisible } = this.state

    const eventType = event.type
    const showContainerOnly = eventType !== EVENTS.SEALED.type
    console.log(event)
    return (
      <Formik
        ref={(node) => {
          this.form = node
        }}
        enableReinitialize
        initialValues={{ ...event }}
        validationSchema={validationSchemas[event.type]}
        onSubmit={() => {}}
        render={({ values }) => (
          <View style={{ flex: 1 }}>
            <ScrollView
              alwaysBounceVertical
              scrollEnabled
              style={{ flex: 1 }}
              contentContainerStyle={{
                flexGrow: 1,
                justifyContent: 'space-between',
                alignItems: 'stretch',
                paddingTop: 24,
                paddingLeft: 24,
                paddingRight: 24,
              }}
            >
              <View>
                <ItemInput
                  name="containerNumber"
                  placeholderText="Container number"
                  value={values.containerNumber}
                  disabled
                />

                {!showContainerOnly && (
                  <>
                    <ItemInput
                      name="sealNumber"
                      placeholderText="Seal number"
                      value={values.sealNumber}
                      disabled
                    />

                    <ItemInput
                      name="referenceNumber"
                      placeholderText="Reference number"
                      value={values.referenceNumber}
                      disabled
                    />
                  </>
                )}

                {eventType === EVENTS.OTHER_EVENT.type && (
                  <SelectOtherEventType
                    selectedValue={event.otherEventType}
                    disabled
                  />
                )}
                {event.grossWeight && (
                  <ItemInput
                    name="grossWeight"
                    placeholderText="VGM"
                    value={event.grossWeight + 'kg'}
                    disableOCR
                    disabled
                  />
                )}
                {event.tare && (
                  <ItemInput
                    name="tare"
                    placeholderText="Tare"
                    value={event.tare + 'kg'}
                    disableOCR
                    disabled
                  />
                )}
                {event.meansOfTransportId !== '' && (
                  <>
                    {event.meansOfTransportId && (
                      <ItemInput
                        name="meansOfTransportId"
                        placeholderText="Means of transport ref. number"
                        value={event.meansOfTransportId}
                        disableOCR
                        disabled
                      />
                    )}
                  </>
                )}
                {event.meansOfTransport !== '' && (
                  <>
                    {event.meansOfTransport && (
                      <ItemInput
                        name="meansOfTransport"
                        placeholderText="Means of transport"
                        value={event.meansOfTransport}
                        disableOCR
                        disabled
                      />
                    )}
                  </>
                )}
                {(event.details || (event.pictures && event.pictures.length > 0)) && (
                  <AdditionalDetails
                    visible={detailsVisible}
                    onToggle={this.toggleDetails}
                    readOnly
                  >
                    <View style={styles.additionalDetailsContent}>
                      {(event.details && event.details.picture) && (
                        <CommentPicture
                          disabled
                          picture={event.details.picture}
                        />
                        )}
                      {((!event.details || !event.details.picture) && event.pictures !== null && event.pictures.length > 0) && (
                      <FlatList
                        horizontal
                        data={[...event.pictures]}
                        renderItem={({ item }) => {
                          return (
                            <View style={{ flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
                              <Image
                                style={[
                                  styles.picture,
                                  {
                                    width: item.isPortrait ? 200 / 1.33333 : 200,
                                    height: item.isPortrait ? 200 : 200 / 1.33333,
                                  },
                                ]}
                                source={item.source}
                              />
                            </View>
                          )
                        }}
                        keyExtractor={(item, index) => index.toString()}
                      />
                      )}
                      {(event.details && event.details.comment) && (
                        <Comment disabled value={event.details.comment} />
                      )}
                    </View>
                  </AdditionalDetails>
                )}
              </View>
            </ScrollView>
            <ActionButton onPress={this.goToList} text="Back to list" />
          </View>
        )}
      />
    )
  }
}

export default connect(mapStateToProps)(EntryDetailsScreen)