import React, { useState, useRef, 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";

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

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

  const onResetPassword = async () => {
    try {
      setIsLoading(true);

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

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

      navigation.goBack();
    } catch (error) {
      console.log(error);
      setTooltip({
        text: "Une erreur est survenue",
        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"
          value={email}
          setValue={setEmail}
          containerStyle={{ marginBottom: 20 }}
          textInputProps={{
            keyboardType: "email-address",
            autoCapitalize: "none",
            autoCompleteType: "email",
            textContentType: "emailAddress",
          }}
        />
      </KeyboardAvoidingView>
    </Page>
  );
};