import { ThemedText } from "@/components/theme/themed-text";
import { ThemedTextInput } from "@/components/theme/themed-textinput";
import { ThemedView } from "@/components/theme/themed-view";
import { signInWithEmailAndPassword } from "firebase/auth";
import React, { useState } from "react";
import { Button, StyleSheet, View } from "react-native";
import { auth } from "../../firebase_config";

const LoginScreen: React.FC = () => {
  const [email, setEmail] = useState<string>("");
  const [password, setPassword] = useState<string>("");

  const handleLogin = async () => {
    try {
      await signInWithEmailAndPassword(auth, email, password);
    } catch (error: any) {
      alert(error.message);
    }
  };

  return (
    <ThemedView lvl={1} style={styles.container}>
      <ThemedText style={styles.title}>Se connecter</ThemedText>
      <ThemedTextInput
        lvl = {2}
        border = {5}
        style={[styles.input]}
        placeholder="Email:"
        placeholderTextColor={'white'}
        value={email}
        onChangeText={setEmail}
        autoCapitalize="none"
      />
      <ThemedTextInput
        lvl = {2}
        border = {5}
        style={[styles.input]}
        placeholder="Mot de passe:"
        placeholderTextColor={'white'}
        value={password}
        onChangeText={setPassword}
        secureTextEntry
      />
      <Button title="Se connecter" onPress={handleLogin} />
      <View style={{ height: 10 }} />
    </ThemedView>
  );
};

export default LoginScreen;

const styles = StyleSheet.create({
  container: { flex: 1, padding: 20, paddingTop: 100},
  title: {
    fontSize: 22,
    fontWeight: "bold",
    marginBottom: 20,
    textAlign: "center",
  },
  input: {
    borderWidth: 1,
    borderRadius: 8,
    padding: 10,
    marginBottom: 10,
  },
});