import React, {useState, useEffect, useRef} from 'react'
import { Button, Text, View, StyleSheet, Dimensions} 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'

import Constants from 'expo-constants';
import * as Notifications from 'expo-notifications';

Notifications.setNotificationHandler({
  handleNotification: async () => ({
    shouldShowAlert: true,
    shouldPlaySound: true,
    shouldSetBadge: false,
  }),
});


export function Confirm({navigation}) {
  const [threads, setThreads] = useState([]);  
  const [loading, setLoading] = useState(true);
  const [appointments, setAppointments] = useState([]); 

  const [expoPushToken, setExpoPushToken] = useState('');
  const [notification, setNotification] = useState(false);
  const notificationListener = useRef();
  const responseListener = useRef();

  useEffect(() => {
    registerForPushNotificationsAsync().then(token => setExpoPushToken(token));
    notificationListener.current = Notifications.addNotificationReceivedListener(notification => {
      setNotification(notification);
    });

    responseListener.current = Notifications.addNotificationResponseReceivedListener(response => {
      console.log(response);
      navigation.navigate('Search');
    });

    const cita = firebase.firestore().collection('APPOINTMENTS').where("new", "==", 'true').onSnapshot(snapShot => {
      const appointments = snapShot.docs.map(docSnap => {
        return{
          _id:docSnap.id,
          participantes: '',
          new: '',
          Day:'',
          Month:'',
          Time:'',
          i_token:'',
          u_token:'',
          Pin: {},
          ...docSnap.data()
        };
      });
      setAppointments(appointments);
      console.log("appointment", appointments);
    });
      
    return () => {
      Notifications.removeNotificationSubscription(notificationListener.current);
      Notifications.removeNotificationSubscription(responseListener.current);
      //fire();
      cita();
    }
  }, []);
  
 /* if (loading) {
    return <Loading />;
  }*/


  function crearChat(cliente, citaID) {
    firebase.firestore()
      .collection('THREADS')
      .add({
        name: 'CHAT',
        members: [
          firebase.auth().currentUser.uid,
          cliente, 
        ],
        cita: citaID,
      })
}


  function citaOld(docID) {
    firebase.firestore()
      .collection('APPOINTMENTS')
      .doc(docID)
      .update({
        new: 'false',
      })
  }

  function deleteAppointment(docID) {
    firebase.firestore()
      .collection('APPOINTMENTS')
      .doc(docID)
      .delete()
  }

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

  const Pin = appointments[0];
  console.log("PIN EN CONFIRM",Pin)
  
  return (
      <ImageBackground style={styles.stdcontainer} source={require('../../assets/yellow-white.jpg')}>
        <FlatList style={{
             flex: 1,
             width: screenWidth,
         }}
          data={appointments}
          keyExtractor = {item => item._id}
          ItemSeparatorComponent={() => <Divider />}
          renderItem = {({item}) => (
          <TouchableOpacity
          onPress={() => {
            console.log("date");
          }}
          >
            <List.Item
              title={item.Month}
              titleNumberOfLines={1}
              titleStyle={styles.listTitle}
              descriptionStyle={styles.listDescription}
              descriptionNumberOfLines={1}
            />
            <List.Item
              title={item.Day}
              titleNumberOfLines={1}
              titleStyle={styles.listTitle}
              descriptionStyle={styles.listDescription}
              descriptionNumberOfLines={1}
            />
            <List.Item
              title={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})}
      />
      <FlatList style={{
             flex: 1,
             width: screenWidth,
         }}
          data={appointments}
          keyExtractor = {item => item._id}
          renderItem={({ item }) => {
            if(item.new){
            return (
              <Button
               title="No disponible"
               onPress={async () => {
               await sendPushNotification(item.u_token);
               deleteAppointment(item._id);
               navigation.navigate('Home');
               }}
             /> 
            )
          }}}
      />
      <FlatList style={{
             flex: 1,
             width: screenWidth,
         }}
          data={appointments}
          keyExtractor = {item => item._id}
          renderItem={({ item }) => {
            if(item.new){
            return (
              <Button
              title ='Sí'
              onPress={ async () => {
                citaOld(item._id)
                crearChat(item.participantes[0], item._id)
                navigation.navigate('Home');
                }
              }
            /> 
            )
          }}}
            />
        </ImageBackground>
    );
  }
// Can use this function below, OR use Expo's Push Notification Tool-> https://expo.dev/notifications
async function sendPushNotification(expoPushToken) {
  const message = {
    to: expoPushToken,
    sound: 'default',
    title: 'Freehand',
    body: 'Interprete no esta disponible',
    data: { someData: 'goes here' },
  };

  await fetch('https://exp.host/--/api/v2/push/send', {
    method: 'POST',
    headers: {
      Accept: 'application/json',
      'Accept-encoding': 'gzip, deflate',
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(message),
  });
}

async function registerForPushNotificationsAsync() {
  let token;
  if (Constants.isDevice) {
    const { status: existingStatus } = await Notifications.getPermissionsAsync();
    let finalStatus = existingStatus;
    if (existingStatus !== 'granted') {
      const { status } = await Notifications.requestPermissionsAsync();
      finalStatus = status;
    }
    if (finalStatus !== 'granted') {
      alert('Failed to get push token for push notification!');
      return;
    }
    token = (await Notifications.getExpoPushTokenAsync()).data;
    console.log(token);
  } else {
    alert('Must use physical device for Push Notifications');
  }

  if (Platform.OS === 'android') {
    Notifications.setNotificationChannelAsync('default', {
      name: 'default',
      importance: Notifications.AndroidImportance.MAX,
      vibrationPattern: [0, 250, 250, 250],
      lightColor: '#FF231F7C',
    });
  }

  firebase.firestore().collection('Interprete').doc(firebase.auth().currentUser.uid).update({'push_token': token})
  firebase.firestore().collection('Users').doc(firebase.auth().currentUser.uid).update({'push_token': token})

  return token;
}

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

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