import React, { Component } from 'react';
import { ScrollView, StyleSheet, View, Text, PermissionsAndroid, FlatList, TouchableOpacity } from 'react-native';
import Contacts from 'react-native-contacts';
import { Card, SearchBar } from 'react-native-elements';



export default class App extends Component {

  state = {
    contacts: [],
    alphabet: ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"]





  }

  componentDidMount() {
    if (Platform.OS === 'android') {
      PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.READ_CONTACTS,
        {
          title: 'Contacts',
          message: ' This app would like to see your contacts'
        }
      ).then(() => {
        this.getList();
      })
    } else if (Platform.OS === 'ios') {
      this.getList();
    }
  }

  getList = () => {
    Contacts.getAll((err, contacts) => {
      if (err === 'denied') {
        console.log("cannot access");
      } else {
        this.setState({ contacts });
        this.setState({ inMemoryContacts: contacts })
        console.log(contacts)

      }
    })
  }

  renderItem = ({ item }) => (
    <Card>
      <View style={styles.itemContainer} >
        <Text style={styles.contactName}>

          Name: {`${item.givenName} `} {item.familyName}
        </Text>
        {item.phoneNumbers.map(phone => (
          <Text key={item.recordID} style={styles.phones}>{phone.label} : {phone.number}</Text>
        ))}
      </View>
    </Card>
  )


  searchContacts = (value) => {
    const filterContacts = this.state.inMemoryContacts.filter(
      contact => {
        let contactLowerCase = (contact.givenName + ' ' + contact.familyName).toLowerCase()
        let searchTermLowerCase = value.toLowerCase()

        return contactLowerCase.indexOf(searchTermLowerCase) > -1
      }
    )
    this.setState({ contacts: filterContacts })
  }

  scrollToitem = (number) => {
    randomIndex = number
    this.flatListRef.scrollToIndex({ animated: true, index: "" + randomIndex, offset: 0 })
  }

  render() {


    return (

      <View style={styles.container}>


        <View style={{ flexDirection: 'row' }}>
          <SearchBar
            placeholder="Type Here..."
            onChangeText={(value) => this.searchContacts(value)}
            value={null}
          />

          <FlatList
            ref={(ref) => { this.flatListRef = ref; }}
            data={this.state.contacts.sort((a, b) => a.givenName.localeCompare(b.givenName))}
            renderItem={this.renderItem}
            //Setting the number of column
            numColumns={1}
            keyExtractor={(item, index) => index.toString()}


          />
          <View style={{ marginTop: 20, padding: 10 }}>
            <FlatList

              data={this.state.alphabet}
              renderItem={({ item }) => <TouchableOpacity onPress={(number) => {
                if (item === 'a') {
                  number = 0
                  this.scrollToitem(number)
                }
                if (item === 'e') {
                  number = 2
                  this.scrollToitem(number)
                }
                if (item === 'g') {
                  number = 4
                  this.scrollToitem(number)

                }

                if (item === 'd') {
                  number = 1
                  this.scrollToitem(number)

                }

                if (item === 'i') {
                  number = 6
                  this.scrollToitem(number)

                }
                if (item === 'l') {
                  number = 7
                  this.scrollToitem(number)

                }

                if (item === 'm') {
                  number = 8
                  this.scrollToitem(number)

                }


                if (item === 'n') {
                  number = 10
                  this.scrollToitem(number)

                }

                if (item === 'r') {
                  number = 11
                  this.scrollToitem(number)

                }

                if (item === 't') {
                  number = 12
                  this.scrollToitem(number)

                }


              }}><Text style={{ fontSize: 25 }}>{item}</Text></TouchableOpacity>}
              keyExtractor={(item, index) => index.toString()}
            />
          </View>



        </View>
      </View>

    )
  }
}



const styles = StyleSheet.create({
  itemContainer: {
    alignItems: 'center',
    justifyContent: 'center',

  },

  contactName: {

  },
});