import React, { useState, useGlobal } from "reactn";
import { Text, KeyboardAvoidingView } from "react-native";
import { responsiveHeight } from "../actions/responsiveSizes.js";

import firebase from "../config/firebase";

import Button from "../components/Button";
import { Input } from "../components/Input";

import { Fonts, Style } from "../styles";
import Page from "../layouts/Page";
import { background } from "../assets";
import { isWeb } from "../hooks/useLayoutType";
import {
  checkIfEmailIsValid,
  handleFirebaseError,
} from "../actions/signupActions.js";

export default ({ navigation }) => {
  const [, setTooltip] = useGlobal("_tooltip");
  const [, setIsLoading] = useGlobal("_isLoading");

  const [email, setEmail] = useState(__DEV__ ? "hello@minuit.agency" : "");

  const onResetPassword = async () => {
    const trimmedEmail = (email || "").trim();
    if (!trimmedEmail?.length) {
      setTooltip({
        text: "Renseigne ton adresse e-mail.",
        type: "error",
      });
      return;
    }

    if (!checkIfEmailIsValid({ email: trimmedEmail })) {
      setTooltip({
        text: "Adresse e-mail invalide.",
        type: "error",
      });
      return;
    }

    try {
      setIsLoading(true);

      await firebase.auth().sendPasswordResetEmail(trimmedEmail);

      setTooltip({
        text: "Email de réinitialisation envoyé!",
        type: "success",
      });

      navigation.goBack();
    } catch (error) {
      console.log("ForgotPassword error", error?.message);
      const message =
        error?.code && error.code.startsWith("auth/")
          ? handleFirebaseError(error.code)
          : error?.message || "Une erreur est survenue";
      setTooltip({
        text: message,
        type: "error",
      });
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <Page
      width={isWeb ? 600 : null}
      backgroundImg={isWeb ? background.loginBgWeb : background.homeBG}
      headerType="NAVIGATE"
      title={"Nouveau mot de passe"}
      scrollEnabled
      bottomStickyContent={() => (
        <Button
          isAbsoluteBottom
          text="Renvoyer le mot de passe"
          onPress={onResetPassword}
        />
      )}
    >
      <KeyboardAvoidingView
        style={{ ...Style.containerCenter, width: "100%" }}
        behavior="padding"
        keyboardVerticalOffset={responsiveHeight(10)}
      >
        <Text
          style={{
            ...Fonts({ type: "default" }),
            marginBottom: responsiveHeight(10),
          }}
        >
          Saisissez votre adresse mail, nous vous enverrons un lien pour
          réinitialiser votre mot de passe.
        </Text>

        <Input
          label="Adresse email"
          placeholder="Votre adresse email"
          type="email"
          value={email}
          setValue={setEmail}
          isBlur
          containerStyle={{ marginBottom: 20 }}
          textInputProps={{
            keyboardType: "email-address",
            autoCapitalize: "none",
            autoCompleteType: "email",
            textContentType: "emailAddress",
          }}
        />
      </KeyboardAvoidingView>
    </Page>
  );
};