import React, { useState } from 'react'
import { Text, View,  StyleSheet, FlatList, TouchableOpacity, Button, ScrollView } from 'react-native'
import SelectBox from 'react-native-multi-selectbox'
import { xorBy } from 'lodash'
import firebase from 'firebase'
import { firebaseConfig } from '../../config/firebaseConfig'
  
//Flag to indicate an IRL appointment.
var mapflag = false

if (firebase.apps.length === 0) {
  firebase.initializeApp(firebaseConfig)
}

require('firebase/firestore')
// Options data must contain 'item' & 'id' keys

const Tags = [
  {
    item: 'Presencial',
    id: 'PL',
  },
  {
    item: 'Online',
    id: 'ON',
  },
  {
    item: 'Individual',
    id: 'IL',
  },
  {
    item: 'Grupal',
    id: 'GL',
  },
  {
    item: 'Esp',
    id: 'ESP',
  },
  {
    item: 'Ing',
    id: 'ING',
  }

]





function Search({route, navigation }) {

  const u_token = route.params.U_Token;
  const username = route.params.Username;
  console.log("U__token: ", u_token)
  
  const [users, setUsers] = useState([])
  const [selectedTags, setSelectedTags] = useState([])

  
  const fetchUsers = (tags) => {
    
    //if the array that have the interpreter tags
    //and the day tags are empty we dont send the query seeing as the user
    //is not searching for anything yet 
    if (tags.length === 0) {
      return
    }

    //reset the users usestate to empty
    const users = []
    

    const db = firebase.firestore()
    var query = db.collection('Interpreters')
    
    for (let i = 0; i < tags.length; i++) {

      //Reset Flag.
      mapflag = false

      //check which tags where called in the search 
      if (tags[i].id === 'PL') {
        console.log('Presencial')
        query = query.where('face_to_face', '==', true)
        mapflag = true
      }
      if (tags[i].id == 'ON') {
        query = query.where('virtual', '==', true)
      }
      if (tags[i].id == 'IL') {
        query = query.where('personal', '==', true)
      }
      if (tags[i].id == 'GL') {
        query = query.where('group', '==', true)
      }
      if (tags[i].id == 'ESP') {
        query = query.where('spanish', '==', true)
      }
      if (tags[i].id == 'ING') {
        query = query.where('english', '==', true)
      }
  }
  
    query.get().then(querySnapshot => {
      console.log('Total users: ', querySnapshot.size);
      //traverse the query snapshot
      //add the user to the users array
      querySnapshot.forEach(documentSnapshot => {
        //save the user id and the user data
        const user = {
          id: documentSnapshot.id,
          data: documentSnapshot.data()
        }
        users.push(user)
        setUsers(users)
        
      });
    });
    console.log('These are the users after the query is executed: ',  users)
    
  }


  return (
    <ScrollView>
    <View style={{ margin: 30 }}>
      <View style={{ width: '100%', alignItems: 'center' }}>
        <Text style={{ fontSize: 30, paddingBottom: 20 }}>Busqueda</Text>
      </View>
      <Text style={{ fontSize: 20, paddingBottom: 10 }}>Filtro de Interpretes</Text>
      <SelectBox
        arrowIconColor='#E4CD05'
        toggleIconColor='#E4CD05'
        searchIconColor='#E4CD05'
        multiOptionContainerStyle = {{
          backgroundColor: '#E4CD05',
          borderColor: '#E4CD05',
          borderWidth: 1,
          borderRadius: 5,
          marginBottom: 10,
          marginTop: 10,
          padding: 10,
        }}
        multiOptionsLabelStyle = {{
          color: '#000000',
          fontSize: 20,
        }}
        label="Select multiple"
        options={Tags}
        selectedValues={selectedTags}
        onMultiSelect={onMultiChange()}
        onTapClose={onMultiChange()}
        isMulti
      />

      {/* button that will fetch the users */}
      <Button title='Buscar' onPress={() => fetchUsers(selectedTags)}/>


      <FlatList
        numColumns={1}
        horizontal={false}
        data={users}
        
        renderItem={({ item, }) => {
          return (
          <View>
            <View style={{ flexDirection: "row", paddingBottom: 20, paddingTop: 20,  justifyContent: "space-between" }}>
              <Text>{item.data.username}</Text>
              <Text>{item.data.precio}</Text>
              <Button title='Buscar' onPress={() => { dothing(item.id, item.data.markedDates, item.data.push_token, u_token, item.data.username) }}/>
            </View>
            <View style={{ borderBottomColor: 'black', borderBottomWidth: 1 }} />
          </View>
          )
        }}
        />

    </View>
    </ScrollView>
  );

  function onMultiChange() {
    return (item) => setSelectedTags(xorBy(selectedTags, [item], 'id'))
  }
  
  function dothing(item_id, item_dates, i_token, u_token, I_username) {
    console.log('This is the item id: ', item_id, "With i_token: ", i_token, " u_token : ", u_token)
    console.log('These are the marked dates', item_dates)
    navigation.navigate('Calendar', {Intereprete_id: item_id, markedDates: item_dates, Flag: mapflag, I_Token: i_token, U_Token: u_token, Username: username, I_Username: I_username})
  } 

}

const styles = StyleSheet.create({
  
  button: {
    alignItems: "center",
    backgroundColor: 'transparent'
  },
});




export default Search