import React from 'react'
import { StyleSheet, View, TouchableOpacity, Image, FlatList, Text} from 'react-native'
import { Icon, Header } from '../ui'
import autobind from 'autobind-decorator'

const styles = StyleSheet.create({
  container: {
    height: '100%',
    width: '100%',
    justifyContent: 'flex-start',
    backgroundColor: '#FFFFFF',
  },
})

const data = [
  {key: '1', type: 'work', location: 'Ossington Ave. | 0.2 mi.', state: 'open', latlng: { latitude: 43.653226, longitude: -79.383184 } },
  {key: '2', type: 'inspection', location: 'Alexandre St. | 0.7 mi.', state: 'open', latlng: { latitude: 43.648118, longitude: 79.392636 }},
  {key: '3', type: 'complaint', location: 'Bay St. | 0.8 mi.', state: 'open', latlng: { latitude: 43.640168, longitude: -79.409373 }},
  {key: '4', type: 'work', location: 'Bloor St. | 1.2 mi.', state: 'open', latlng: { latitude: 43.633110, longitude: -79.415880 }},
  {key: '5', type: 'inspection', location: 'Blue Jays Way | 2.2 mi.', state: 'open', latlng: { latitude: 43.653526, longitude: -79.361385 }},
  {key: '6', type: 'complaint', location: 'Christie St. | 3.0 mi.', state: 'open', latlng: { latitude: 43.663870, longitude: -79.383705 }},
  {key: '7', type: 'work', location: 'Cummer Ave. | 4.2 mi.', state: 'open', latlng: { latitude: 43.659166, longitude: -79.391350 }},
  {key: '8', type: 'complaint', location: 'Danforth Ave. | 4.7 mi.', state: 'open', latlng: { latitude: 43.663538, longitude: -79.423212 }},
]

const inspectionTypes = {
  work: {
    title: 'Work Order'
  },
  inspection: {
    title: 'Inspection',
  },
  complaint: {
    title: 'Complaint',
  }
}

export class WorkItemList extends React.Component {
  constructor(props) {
    super(props)
  }

  @autobind
  handleItemSelect(item, index) {
    this.props.history.push('/activity')
  }

  @autobind
  handleAddPress(item, index) {
    this.props.history.push('/workitem')
  }

  @autobind
  handleBackPress() {
    const { history } = this.props

    if (history.length > 1) {
      history.goBack()
    } else {
      history.replace('/home')
    }
  }

  render() {
    return (
      <View style={styles.container}>
        <Header title='Work Items' leftButton={{ icon: 'back', onPress: this.handleBackPress }} rightButton={{ icon: 'add', onPress: this.handleAddPress }} />
        <FlatList
          style={{ width: '100%', flexGrow: 1, paddingTop: 20, paddingBottom: 20 }}
          data={data}
          renderItem={({item, index}) => {
            return (
              <View style={{ flexDirection: 'row', height: 50 }}>
                <Text style={{ fontSize: 8, width: 45, marginLeft: 15, alignSelf: 'center' }}>{item.state.toUpperCase()}</Text>
                <View style={{ flexDirection: 'column', width: '75%' }}>
                  <Text style={{ fontSize: 20 }}>{inspectionTypes[item.type].title}</Text>
                  <Text style={{ fontSize: 14, color: 'gray' }}>{item.location}</Text>
                </View>
                <TouchableOpacity style={{ alignSelf: 'center' }} onPress={() => (this._handleItemSelect(item, index))} >
                  <Icon name='rightArrow' size={16} />
                </TouchableOpacity>
              </View>
            )
          }} />
      </View>
    )
  }
}