import React, {useState, useContext} from "react";
import {
  SafeAreaView,
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
} from "react-native";
import MaterialIcons from "@expo/vector-icons/MaterialIcons";
import Ionicons from "@expo/vector-icons/Ionicons";

import LoginSVG from "../assets/images/login.svg";
import GoogleSVG from "../assets/images/google.svg";
import FacebookSVG from "../assets/images/facebook.svg";
import TwitterSVG from "../assets/images/twitter.svg";

import CustomButton from "../components/Buttons/CustomButton";
import InputField from "../components/InputField";
import { globalStyles } from "../styles/global";
import { AuthContext } from "../context/AuthContext";
import Loader from "../components/Loader";

const LoginScreen = ({ navigation }) => {
  const [email, setEmail] = useState(null);
  const [password, setPassword] = useState(null);
  const [error, setError] = useState(null);


  const {isLoading, login, googleAuth} = useContext(AuthContext);

  const handleLogin = () => {
    login(email, password, function(result) {
      setError(result.error.message);
    });
  }

  return (
    <SafeAreaView style={globalStyles.safeArea}>
      <Loader visible={isLoading} />
      <View style={{ paddingHorizontal: 25 }}>
        <View style={{ alignItems: "center" }}>
          <LoginSVG height={300} width={300} />
        </View>
        <Text style={globalStyles.boldText}>Sign In</Text>
        <InputField
          label={"Email"}
          keyboardType="email-address"
          onChangeText={text => {
            setEmail(text);
          }}
          text={email}
          icon={
            <MaterialIcons
              name="alternate-email"
              size={20}
              color="#666"
              style={{ marginRight: 5 }}
            />
          }
        />
        <InputField
          label={"Password"}
          filedButtonLabel={"Forgot?"}
          fieldButtonFunction={() => {}}
          inputType="password"
          text={password}
          onChangeText={text => {
            setPassword(text);
          }}
          icon={
            <Ionicons
              name="ios-lock-closed-outline"
              size={20}
              color="#666"
              style={{ marginRight: 5 }}
            />
          }
        />
        {error && <Text style={styles.errorMessage}>{error}</Text>}
        <CustomButton label={"Login"} onPress={handleLogin} />
        <Text style={globalStyles.regularCenteredText}>Or login with ...</Text>
        <View style={styles.providersContainer}>
          <TouchableOpacity onPress={googleAuth} style={globalStyles.iconButton}>
            <GoogleSVG height={24} width={24} />
          </TouchableOpacity>
          <TouchableOpacity onPress={() => {}} style={globalStyles.iconButton}>
            <FacebookSVG height={24} width={24} />
          </TouchableOpacity>
          <TouchableOpacity onPress={() => {}} style={globalStyles.iconButton}>
            <TwitterSVG height={24} width={24} />
          </TouchableOpacity>
        </View>
        <View style={styles.registerContainer}>
          <Text style={globalStyles.regularText}>Need account? </Text>
          <TouchableOpacity onPress={() => navigation.navigate("Register")}>
            <Text style={styles.registerButtonText}>Sign Up</Text>
          </TouchableOpacity>
        </View>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  providerText: {
    textAlign: "center",
    color: "#666",
    marginBottom: 30,
    fontFamily: "poppins-regular",
  },
  providersContainer: {
    flexDirection: "row",
    justifyContent: "space-between",
    marginBottom: 30,
  },
  registerContainer: {
    flexDirection: "row",
    justifyContent: "center",
    marginBottom: 30,
  },
  registerButtonText: {
    color: "#AD40AF",
    fontWeight: "700",
    fontFamily: "poppins-semibold",
  },
  errorMessage: {
    marginBottom: 30,
    color: 'red'
  }
});

export default LoginScreen;