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

export const ResetPasswordPage = () => {
  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}
      />
      <View>
        <Button
          onPress={() => router.push("/(unauth)/sign_in")}
          label="Back"
          labelStyle={[
            styles.jakartaMedium,
            { textDecorationLine: "none", color: "#fd1575" },
          ]}
          link
          size={ButtonSize.xSmall}
          padding-0
          margin-0
          text70
          left
          color="#fd1775"
        />
      </View>

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

const styles = StyleSheet.create({
  textfield: {
    backgroundColor: "white",
    marginVertical: 10,
    padding: 30,
    height: 45,
    borderRadius: 50,
  },
  jakartaMedium: {
    fontFamily: "PlusJakartaSans_500Medium",
    fontSize: 16,
    color: "#919191",
    textDecorationLine: "underline",
  },
});