import { View, Text, Button, TextField, ButtonSize } from "react-native-ui-lib";
import React, { useState } from "react";
import { useSignIn } from "@/hooks/firebase/useSignIn";
import { StyleSheet } from "react-native";

const SignInPage = (props: { setRegister: () => any }) => {
  const [email, setEmail] = useState<string>("");
  const [password, setPassword] = useState<string>("");

  const { mutateAsync: signIn, error, isError } = useSignIn();

  const handleSignIn = async () => {
    await signIn({ email, password });
  };

  return (
    <View padding-10 centerV height={"100%"}>
      <TextField
        placeholder="Email"
        value={email}
        onChangeText={setEmail}
        style={styles.textfield}
      />
      <TextField
        placeholder="Password"
        value={password}
        onChangeText={setPassword}
        secureTextEntry
        style={styles.textfield}
      />
      <Button
        label="Login"
        onPress={handleSignIn}
        style={{ marginBottom: 20 }}
        backgroundColor="#fd1775"
      />
      {isError && <Text center style={{ marginBottom: 20 }}>{`${error}`}</Text>}
      <View row centerH>
        <Text center style={{ marginBottom: 5 }}>
          Don't have an account?
        </Text>
        <Button
          onPress={props.setRegister}
          label="Sign Up"
          link
          size={ButtonSize.xSmall}
          padding-0
          margin-0
          left
          color="#fd1775"
        />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  textfield: {
    backgroundColor: "white",
    marginVertical: 10,
    padding: 30,
    height: 45,
    borderRadius: 50,
  },
});

export default SignInPage;
