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

export const ResetPasswordPage = ({setTab}: { setTab:  React.Dispatch<React.SetStateAction<"register" | "login" | "reset-password">> }) => {
    const [email, setEmail] = useState<string>("");

    const {mutateAsync: resetPassword, error, isError, isLoading} = useResetPassword();

    const handleResetPassword = async () => {
        await resetPassword({email});
        alert("Password reset, please check your email")
    };

    return (
        <View padding-10 centerV height={"100%"}>
            <Text text70 center>
                Please enter your email and reset your password
            </Text>

            <TextField
                placeholder="Email"
                value={email}
                onChangeText={setEmail}
                style={styles.textfield}
            />
            <Button
                label="Reset Password"
                onPress={handleResetPassword}
                marginB-20
                backgroundColor="#fd1775"
                disabled={isLoading}
            />

            {isError && <Text center style={{marginBottom: 20}}>{`${error}`}</Text>}
        </View>
    );
};

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