import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import firebase from 'firebase';
import { Text, View, ImageBackground } from 'react-native';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';

import { fetchUser } from '../redux/actions/index'
//import Loading from '../components/Loading'
import Loading from './main/Loading'
import { styles } from '../config/styles'

export class HomeScreen extends Component {
  constructor(props){
    super(props);
    this.state = {
      interpreter: false,
    };
    this.onLogout = this.onLogout.bind(this)
  };

  componentDidMount(){
    this.props.fetchUser();
    firebase.firestore()
    .collection("Interpreters")
    .doc(firebase.auth().currentUser.uid)
    .get()
    .then((snapshot) => {
      if(snapshot.exists){
        this.setState({interpreter: true})
      }
    })
  }

  onLogout(){
    firebase.auth().signOut();
  }

  render() {
    const { currentUser } = this.props;

    if(currentUser == undefined){
      return <Loading/>
    }
    if(this.state.interpreter){
      return(
        <View style={styles.regcontainer}>
          <ImageBackground style={styles.home} source={require("../assets/yellow-white.jpg")}>
            <View style={styles.homeTopView}>
              <MaterialIcons name='logout' size={30} color='dodgerblue' onPress={() => this.onLogout()}/>
              <MaterialIcons name='event' size={30} color='dodgerblue' style={styles.homeIcon} onPress={() => this.props.navigation.navigate('Availability')}/>
              <MaterialIcons name='mail' size={30} color='dodgerblue' onPress={() => this.props.navigation.navigate('Mail')}/>
            </View>
          </ImageBackground>
          <View style={styles.regcontainer}></View>
        </View>
      );
    }
    else{
      return(
        <View style={styles.regcontainer}><Text>You are a user</Text></View>
      );
    }
  }
}

const mapStateProps = (store) => ({currentUser: store.userState.currentUser})
const mapDispatchProps = (dispatch) => bindActionCreators({fetchUser}, dispatch)
export default connect(mapStateProps, mapDispatchProps)(HomeScreen)

/*export default function HomeScreen({navigation}) {
  const [threads, setThreads] = useState([]);  
  const [loading, setLoading] = useState(true);

  useEffect(() => {

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

      });

      setThreads(threads);

      if(loading){
        setLoading(false);
      }

    });

    return () => fire();
  }, []);
  
  if (loading) {
    return <Loading />;
  }
  
  return (
      <View style={styles.container}>
        <FlatList
          data={threads}
          keyExtractor = {item => item._id}
          ItemSeparatorComponent={() => <Divider />}
          renderItem = {({item}) => (

            <TouchableOpacity
            onPress={() => navigation.navigate('Room', {thread: item})}
            
            >
            <List.Item
              title={item.name}
              description='Item description'
              titleNumberOfLines={1}
              titleStyle={styles.listTitle}
              descriptionStyle={styles.listDescription}
              descriptionNumberOfLines={1}
            />
          </TouchableOpacity>
        )}
      />

      <Button
        title='Add Room'
        onPress={() => navigation.navigate('Add')}
      />

        <Button
        title ='Room'
        onPress= {() => navigation.navigate('Room')}
        />

      </View>
    );
  }
*/