import React, { Component } from "react";
import { StatusBar,
         View,
         Text,
         FlatList,
         StyleSheet,
         ActivityIndicator,
         ScrollView,
         Dimensions,
         TouchableOpacity,
         TextInput,
         Alert,
         AsyncStorage,
         Keyboard,
         ListView,
         } from "react-native";
import firebase from 'firebase';

export default class App extends React.Component {
constructor(props) {
   super(props)
   this.state = {
     currentUser: '',
     error: null,
     UserInput: "",
     loggedIn: null,
     loggedOut: null,
     email: '', password: '',
   }
 }

componentWillMount() {
StatusBar.setHidden(true);
this.setState({ loading: true})
firebase.initializeApp({
  apiKey: "AIzaSyAqpqo8aWpC_sJ18CIUvWYUktGMf8w1ylE",
  authDomain: "course-4895c.firebaseapp.com",
  databaseURL: "https://course-4895c.firebaseio.com",
  projectId: "course-4895c",
  storageBucket: "",
  messagingSenderId: "369023837879"
    });

  firebase.auth().onAuthStateChanged((user) => {
    if(user) {
      this.setState({ loggedIn: true, loggedOut: false, loading: false  });
    }
    else {
      this.setState({ loggedIn: false, loggedOut: true, loading: false });
    }
  });
}

GetValue = () => {

this.setState({ loading: true})

let userstock = this.state.UserInput;
let path = "https://api.iextrading.com/1.0/stock/";
let end = "/company";
let url = path + userstock + end;

fetch(url)
    .then((response) => response.json())
    .then((responseJson) => {
      this.setState({
        symbol: responseJson.symbol,
        company: responseJson.companyName,
        loading: false,
        dataLoaded: true,
      });
    })
    .catch((error) => {
      Alert.alert( 'Symbol not found', 'Please try again.')
      this.setState({loading: false})
    });
    Keyboard.dismiss()
};


onLogIn = () => {
  const { email, password } = this.state;
  this.setState({ error: '', loading: true });
  Keyboard.dismiss()
  firebase.auth().signInWithEmailAndPassword(email, password)
  .then(this.onSuccess.bind(this))
  .catch(() => {
    alert('incorrect username or password')
  })
};

onSignUp = () => {
  const { email, password } = this.state;
  this.setState({ error: '', loading: true });
  Keyboard.dismiss()
  firebase.auth().createUserWithEmailAndPassword(email, password)
  .then(this.onSuccess.bind(this))
  .catch(() => {
    alert('incorrect username or password')
    this.setState({loading: false})
  })
};

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

onSuccess() {
  this.setState({
    email: '',
    password: '',
    loading: false,
    error: ''
  });
};

saveData = () => {
  this.setState({ loading: true})
  let favdata = this.state.company;
  const { currentUser } = firebase.auth();
  firebase.database().ref(`/users/${currentUser.uid}/favorites/`)
   .push({ favdata })
   .then(() => {
      this.setState({ loading: false})
      alert('Data saved!')
  });
}

FetchFav = () => {
  const { currentUser } = firebase.auth();
  firebase.database().ref(`/users/${currentUser.uid}/favorites/`)
    .once('value', snapshot => {
      const favs = snapshot.val();
      const array = Object.keys(favs).map(function (key) { return favs[key]; });
      console.log(array);
    });
}

  render() {
    const { currentUser } = firebase.auth();
    return (

      <View style={styles.container}>

      <TextInput selectionColor= '#ffffff' style={{
       height: 40, textAlign: 'center',
       color: '#000000', borderWidth: 0, width: 200,
       marginLeft: 20, alignSelf: 'center'
       }}
       onChangeText={(UserInput) => this.setState({UserInput})}
       placeholder= "Stock Symbol Engine"
       value={this.state.UserInput} />

       <TouchableOpacity
       style={styles.button}
       onPress={this.GetValue}>
       <Text style={styles.textbutton}>Search</Text>
       </TouchableOpacity>

       <TouchableOpacity
       style={styles.button}
       onPress={this.FetchFav}>
       <Text style={styles.textbutton}>Favorites</Text>
       </TouchableOpacity>

       {this.state.loggedIn ?
       <TouchableOpacity
       style={styles.button}
       onPress={this.saveData.bind(this)}>
       <Text style={styles.textbutton}>Save</Text>
       </TouchableOpacity>
       : null }

      {this.state.loading ?
      <View style={styles.loading}>
        <ActivityIndicator
        size="large" color="#222222" />
      </View>
      : null }

      <Text style={styles.datatext}>{this.state.company}</Text>


      {this.state.loggedIn ?
      <Text style={styles.datatext}>Hello {currentUser.email}</Text>
      : null }

      {this.state.loggedOut ?
       <View>
         <TextInput
           placeholder="user@mail.com"
           label="Email"
           value={this.state.email}
           onChangeText={email => this.setState({ email })}
         />

         <TextInput
           secureTextEntry={true}
           placeholder="password"
           label="Password"
           value={this.state.password}
           onChangeText={password => this.setState({ password })}
         />
       </View>
       : null }

      {this.state.loggedOut ?
      <View style={styles.authbtn}>
        <TouchableOpacity
          style={styles.button}
          onPress={this.onLogIn}>
          <Text style={styles.textbutton}>Log In</Text>
        </TouchableOpacity>

        <TouchableOpacity
          style={styles.button}
          onPress={this.onSignUp}>
          <Text style={styles.textbutton}>Sign Up</Text>
        </TouchableOpacity>
      </View>
      : null }


      {this.state.loggedIn ?
      <TouchableOpacity
      style={styles.button}
      onPress={this.onLogOut}>
      <Text style={styles.textbutton}>Log Out</Text>
      </TouchableOpacity>
      : null }

     </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    margin: 25,
    flex: 1,
  },
  textbutton: {
    fontWeight: '400',
    fontSize: 18,
    margin: 5,
    backgroundColor: '#0c1c2c',
    paddingHorizontal: 60,
    paddingVertical: 7,
    textAlign: 'center',
    color: '#40b2a4'
  },
  datatext: {
    fontSize: 20,
     margin: 10,
  },
  loading: {
    margin: 40,
  },
  authbtn:{
    flexDirection : 'row',
    alignItems: 'stretch',
    justifyContent: 'space-between',
  },
});