import React, {useState, useEffect, useRef} from 'react'
import { Button, Text, View, StyleSheet, Dimensions, Linking, Alert} from 'react-native'
import {FlatList, ListViewBase } from 'react-native'
import {TouchableOpacity} from 'react-native-gesture-handler'
import {List, Divider} from 'react-native-paper'
import Loading from './Loading'
import firebase from 'firebase';
import { styles } from "../../config/styles";
import { TextInput, TouchableWithoutFeedback, Keyboard, ImageBackground} from "react-native";

import { connect } from 'react-redux'
import { bindActionCreators } from 'redux' 
import { fetchUser } from '../../redux/actions/index'


export function Cita({route, navigation}) {
   const [threads, setThreads] = useState([]);  
   const [loading, setLoading] = useState(true);
   console.log("ID", route.params);
   const [appointments, setAppointments] = useState([]); 

   const[interpreter, setState] = useState();


 useEffect(() => { 
    const fire = firebase.firestore()
    .collection('THREADS')
    .where("cita", "==", route.params.tag._id)
    .onSnapshot(querySnapshot => {
      const threads = querySnapshot.docs.map(documentSnapshot => {
        return{
          _id:documentSnapshot.id,
          name:'',
          ...documentSnapshot.data()
        };
      });

      setThreads(threads);
      console.log(threads);

      if(loading){
        setLoading(false);
      }
    });

    const cita = firebase.firestore().collection('APPOINTMENTS').where("citaID", "==", route.params.tag._id).onSnapshot(snapShot => {
      const appointments = snapShot.docs.map(docSnap => {
        return{
          _id:docSnap.id,
          new:'',
          Day:'',
          Month:'',
          Time:'',
          i_token:'',
          u_token:'',
          Pin: {},
          ...docSnap.data()
        };
      });
      setAppointments(appointments);
      console.log("appointment", appointments);
    });

    return () => {
      fire();
      cita();
    }
  }, []);
    

  
  function check_user_type_INT(){ 

    firebase.firestore()
    .collection("Interpreters")
    .doc(firebase.auth().currentUser.uid)
    .get()
    .then((snapshot) => {
      if(snapshot.exists){
        setState(true);
      }
      else{
        setState(false);
      }
    })

    if(loading){
      setLoading(false);
    }

  }
  
  check_user_type_INT();

  const dimensions = Dimensions.get('window');
  const screenWidth = dimensions.width;

  console.log("Inter: ", interpreter)

  const Pin = route.params.Pin;
  if(interpreter == true){

  const create_meet = () => {
    Alert.alert(

      "IMPORTANTE!",
      "Al continuar, se mandara a la aplicacion de Google Meet, recuerda crear y compartir el enlace de la reunion con su cliente. Continuar?",
      [
        {
          text: "Cancelar",
          // onPress: () => console.log("Cancel Pressed"),
          style: "cancel"
        },
        { text: "OK", onPress: () => Linking.openURL(`https://meet.google.com/new`) }
      ]
    
    );
    //after pressing the button, redirect to the meet app
    
  }

  return (
      <ImageBackground style={styles.stdcontainer} source={require('../../assets/yellow-white.jpg')}>
        <FlatList style={{
             flex: 1,
             width: screenWidth,
         }}
          data={threads}
          keyExtractor = {item => item._id}
          ItemSeparatorComponent={() => <Divider />}
          renderItem = {({item}) => (
          <TouchableOpacity
            onPress={() => navigation.navigate('Room', {thread: item})}
          >
            <List.Item
              title={item.name}
              titleNumberOfLines={1}
              titleStyle={styles.listTitle}
              descriptionStyle={styles.listDescription}
              descriptionNumberOfLines={1}
            />
          </TouchableOpacity>
        )}
        />
        <FlatList style={{
           flex: 1,
           width: screenWidth,
       }}
        data={appointments}
        keyExtractor = {item => item._id}
        ItemSeparatorComponent={() => <Divider />}
        renderItem = {({item}) => (
        <TouchableOpacity
        onPress={async () => {
          console.log("cita")
        }}
        > 
        <List.Item
          title='Usuario:'
          description={item.User}
          titleNumberOfLines={1}
          titleStyle={styles.listTitle}
          descriptionStyle={styles.listDescription}
          descriptionNumberOfLines={1}
          />
          <List.Item
            title='Mes:'
            description={item.Month}
            titleNumberOfLines={1}
            titleStyle={styles.listTitle}
            descriptionStyle={styles.listDescription}
            descriptionNumberOfLines={1}
          />
          <List.Item
            title='Día'
            description={item.Day}
            titleNumberOfLines={1}
            titleStyle={styles.listTitle}
            descriptionStyle={styles.listDescription}
            descriptionNumberOfLines={1}
          />
          <List.Item
            title='Hora:'
            description={item.Time}
            titleNumberOfLines={1}
            titleStyle={styles.listTitle}
            descriptionStyle={styles.listDescription}
            descriptionNumberOfLines={1}
          />
        </TouchableOpacity>
      )}
          />

      <Button
        title ='Crear cita virtual'
        onPress= {() => {create_meet()}}
      />
      <Button
        title ='Ver mapa'
        onPress= {() => navigation.navigate('Map', {View_Only: true, Pin: Pin})}
      />
      <Button
        title ='Logout'
        onPress= {() => firebase.auth().signOut()}
      />
        </ImageBackground>
    );
    }

    else{
    return (
      <ImageBackground style={styles.stdcontainer} source={require('../../assets/yellow-white.jpg')}>
        <FlatList style={{
             flex: 1,
             width: screenWidth,
         }}
          data={threads}
          keyExtractor = {item => item._id}
          ItemSeparatorComponent={() => <Divider />}
          renderItem = {({item}) => (
          <TouchableOpacity
            onPress={() => navigation.navigate('Room', {thread: item})}
          >
            <List.Item
              title={item.name}
              titleNumberOfLines={1}
              titleStyle={styles.listTitle}
              descriptionStyle={styles.listDescription}
              descriptionNumberOfLines={1}
            />
          </TouchableOpacity>
        )}
        />
        <FlatList style={{
           flex: 1,
           width: screenWidth,
       }}
        data={appointments}
        keyExtractor = {item => item._id}
        ItemSeparatorComponent={() => <Divider />}
        renderItem = {({item}) => (
        <TouchableOpacity
        onPress={async () => {
          console.log("cita")
        }}
        > 
        <List.Item
          title='Interprete:'
          description={item.Interpreter}
          titleNumberOfLines={1}
          titleStyle={styles.listTitle}
          descriptionStyle={styles.listDescription}
          descriptionNumberOfLines={1}
          />
          <List.Item
            title='Mes:'
            description={item.Month}
            titleNumberOfLines={1}
            titleStyle={styles.listTitle}
            descriptionStyle={styles.listDescription}
            descriptionNumberOfLines={1}
          />
          <List.Item
            title='Día:'
            description={item.Day}
            titleNumberOfLines={1}
            titleStyle={styles.listTitle}
            descriptionStyle={styles.listDescription}
            descriptionNumberOfLines={1}
          />
          <List.Item
            title='Hora:'
            description={item.Time}
            titleNumberOfLines={1}
            titleStyle={styles.listTitle}
            descriptionStyle={styles.listDescription}
            descriptionNumberOfLines={1}
          />
        </TouchableOpacity>
      )}
          />
      <Button
        title ='Ver mapa'
        onPress= {() => navigation.navigate('Map', {View_Only: true, Pin: Pin})}
      />
      <Button
        title ='Logout'
        onPress= {() => firebase.auth().signOut()}
      />
        </ImageBackground>
    );
    }
  }


const mapStateToProps = (store) => ({
  currentUser: store.userState.currentUser
})
const mapDispatchProps = (dispatch) => bindActionCreators({fetchUser}, dispatch);

export default connect(mapStateToProps, mapDispatchProps)(Cita);