import React, { Component } from "react";
import {
  Text,
  View,
  Picker,
  Button,
  TextInput,
  FlatList,
  ActionSheetIOS,
  Image
} from "react-native";
import { ImagePicker, Permissions, Location, MapView, Constants } from "expo";
import { createStackNavigator } from "react-navigation";
import * as firebase from "firebase"; //npm install --save firebase
import { Card, FormLabel, FormInput } from "react-native-elements";
import uuid from "uuid";
//mi linko al db (devi usare il link al tuo db)
var config = {
  apiKey: "AIzaSyA92F_Ds5jEUEKlQW_KD6793cPVbwvaXyw",
  authDomain: "todolist-38f45.firebaseapp.com",
  databaseURL: "https://todolist-38f45.firebaseio.com",
  projectId: "todolist-38f45",
  storageBucket: "todolist-38f45.appspot.com",
  messagingSenderId: "73445961295"
};
firebase.initializeApp(config);
//--

const TINT_COLOR = "rgb(4, 159, 239)";
class login extends Component {
  static navigationOptions = {
    title: "Login"
  };
  state = {
    isLoading: false,
    email: "nuovo@gmail.com",
    password: "pippo1234",
    error: ""
  };

  _login = () => {
    this.setState({ isLoading: true });
    firebase
      .auth()
      .signInWithEmailAndPassword(this.state.email, this.state.password)
      .then(user => {
        this.setState({ isLoading: false });
        console.log("LOGIN AVVENUTO CON SUCCESSO");
        this.props.navigation.navigate("Load"); //gio devi crearti lo stack navigator con questa screen
      })
      .catch(error => {
        this.setState({ isLoading: false, error: error.message });
      });
  };

  _signUp = () => {
    this.setState({ isLoading: true });
    firebase
      .auth()
      .createUserWithEmailAndPassword(this.state.email, this.state.password)
      .then(user => {
        this.setState({ isLoading: false });
        console.log("REGISTRAZIONE AVVENTUTA CON SUCCESSO");
        this.props.navigation.navigate("Load");
      })
      .catch(error => {
        this.setState({ isLoading: false, error: error.message });
        //alert(error.message);
      });
  };

  renderLoginOrSpinner() {
    return (
      <View style={{ justifyContent: "space-between", height: "40%" }}>
        <Button
          loading={this.state.isLoading}
          raised
          backgroundColor={TINT_COLOR}
          title="Login"
          onPress={this._login}
        />
        <Button
          raised
          loading={this.state.isLoading}
          backgroundColor={TINT_COLOR}
          title="Register"
          onPress={this._signUp}
        />
      </View>
    );
  }

  render() {
    return (
      <View>
        <Card>
          <FormLabel>E-mail</FormLabel>
          <FormInput
            label="E-mail"
            placeholder="enter a valid e-mail"
            onChangeText={text => this.setState({ email: text })}
            //value={this.state.email}
          />

          <FormLabel>Password</FormLabel>
          <FormInput
            secureTextEntry
            label="Password"
            placeholder="your password"
            onChangeText={text => this.setState({ password: text })}
            //value={this.state.password}
          />

          {this.renderLoginOrSpinner()}
          <Text>{this.state.error}</Text>
        </Card>
      </View>
    );
  }
}
class upload extends React.Component {
  state = {
    uri: "https://www.google.com/images/branding/product/ico/googleg_lodp.ico"
  };
  loadImage = async localURI => {
    const uid = firebase.auth().currentUser.uid;
    const response = await fetch(localURI);
    console.log("response:", response);
    const blob = await response.blob();
    console.log("blob:", blob);
    console.log("uid:", uuid);
    console.log("LOCAL URI: ", localURI);
    let pathImg = uuid.v4();
    const ref = firebase
      .storage()
      .ref()
      .child(uid + "/" + pathImg);
    console.log("ref", ref);
    const uploadStatus = await ref.put(blob);
    console.log(uploadStatus);
    const downloadURL = await uploadStatus.ref.getDownloadURL();
    console.log(downloadURL);
    this.props.navigation.setParams({ loadedList: true });
    console.log("SONO QUI");
    return downloadURL;
  };
  render() {
    return (
      <View>
        <Button
          title="Load image to firebase database"
          onPress={() => this.loadImage(this.state.uri)}
        />
      </View>
    );
  }
}
const RootStack1 = createStackNavigator(
  {
    Login: {
      screen: login
    },
    Load: {
      screen: upload
    }
  },
  {
    initialRouteName: "Login" /*posso mettere tutte le opzioni dell'header*/
  }
);

class ExampleLoginAndUpload extends React.Component {
  render() {
    return <RootStack1 />;
  }
}
export default ExampleLoginAndUpload;