import React from 'react'
import { StyleSheet, Text, TextInput, FlatList, Image, View } from 'react-native'
import MapView, { Marker } from 'react-native-maps'
import { api } from '../API'
import centerImage from './images/center.png'
import settingsImage from './images/settings.png'
import searchImage from './images/search.png'
import cancelImage from './images/cancel.png'

export class Home extends React.Component {
  static navigatorButtons = {
    rightButtons: [
      {
        icon: require('./images/ar-glases.png'),
        id: 'arview',
      }
    ],
    leftButtons: [
      {
        icon: require('./images/logout.png'),
        id: 'logout',
      }
    ]
  }

  static styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'flex-start',
      justifyContent: 'flex-start',
    }
  })

  static data = [
    {key: '1', title: 'Remove Animal Carcass', location: 'Ossington Ave. | 0.2 mi.', state: 'planned', latlng: { latitude: 43.653226, longitude: -79.383184 } },
    {key: '2', title: 'Fix sign post', location: 'Alexandre St. | 0.7 mi.', state: 'open', latlng: { latitude: 43.648118, longitude: 79.392636 }},
    {key: '3', title: 'Overflowing trash', location: 'Bay St. | 0.8 mi.', state: 'open', latlng: { latitude: 43.640168, longitude: -79.409373 }},
    {key: '4', title: 'Leaking water pipe', location: 'Bloor St. | 1.2 mi.', state: 'planned', latlng: { latitude: 43.633110, longitude: -79.415880 }},
    {key: '5', title: 'Tree branch in road', location: 'Blue Jays Way | 2.2 mi.', state: 'open', latlng: { latitude: 43.653526, longitude: -79.361385 }},
    {key: '6', title: 'Washing machine on sidewalk', location: 'Christie St. | 3.0 mi.', state: 'open', latlng: { latitude: 43.663870, longitude: -79.383705 }},
    {key: '7', title: 'Dead moose', location: 'Cummer Ave. | 4.2 mi.', state: 'open', latlng: { latitude: 43.659166, longitude: -79.391350 }},
    {key: '8', title: 'Glass in street', location: 'Danforth Ave. | 4.7 mi.', state: 'open', latlng: { latitude: 43.663538, longitude: -79.423212 }},
  ]

  constructor(props) {
    super(props);
    this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this))
  }

  onNavigatorEvent(event) {
    switch (event.id) {
      case 'logout':
        api.logout().then(() => {
          this.props.navigator.showModal({ screen: 'app.Login' })
        })
      case 'willAppear':
        break
      case 'didAppear':
        if (!api.loggedInUser) {
          this.props.navigator.showModal({ screen: 'app.Login' })
        }
        break;
      case 'willDisappear':
        break
      case 'didDisappear':
        break
      case 'willCommitPreview':
        break
    }
  }

  render() {
    return (
      <View style={Home.styles.container}>
        <MapView
          style={{ width: '100%', height: '50%' }}
          zoomControlEnabled
          initialRegion={{
            latitude: 43.653908,
            longitude: -79.384293,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          }}>
          {
            Home.data.map(marker => (
              <Marker
                key={marker.key}
                coordinate={marker.latlng}
                title={marker.title}
                description={marker.location} />
            ))
          }
        </MapView>
        <View style={{ flexDirection: 'row', alignItems: 'center', width: '100%', height: 40, backgroundColor: '#F4F4F4' }}>
          <Image source={searchImage} style={{ width: 16, height: 16, tintColor: 'gray', marginLeft: 10, marginRight: 5 }} />
          <TextInput style={{ flexGrow: 1, height: '100%' }} placeholder='Search' />
          <Image source={cancelImage} style={{ width: 16, height: 16, marginLeft: 5, marginRight: 10 }} />
        </View>
        <FlatList
          style={{ width: '100%', flexGrow: 1 }}
          data={Home.data}
          renderItem={({item}) => {
            return (
              <View style={{ flexDirection: 'row', height: 50 }}>
                <Text style={{ fontSize: 8, width: 45, marginLeft: 5, alignSelf: 'center' }}>{item.state.toUpperCase()}</Text>
                <View style={{ flexDirection: 'column' }}>
                  <Text style={{ fontSize: 20 }}>{item.title}</Text>
                  <Text style={{ fontSize: 14, color: 'gray' }}>{item.location}</Text>
                </View>
              </View>
            )
          }} />
        <View style={{
          flexDirection: 'row',
          justifyContent: 'space-between',
          alignItems: 'center',
          width: '100%',
          height: 45,
          backgroundColor: '#F4F4F4',
        }}>
          <Image source={centerImage} style={{ height: 24, width: 24, marginLeft: 15, tintColor: 'gray' }} />
          <Text style={{ color: 'gray', fontSize: 20, }}>Hide List</Text>
          <Image source={settingsImage} style={{ height: 24, width: 24, marginRight: 15, tintColor: 'gray' }} />
        </View>
      </View>
    );
  }
}