import { View, Text, Pressable, Platform } from "react-native";
import React, { useState } from "react";
import Page from "../../layouts/Page";
import { background } from "../../assets";
import { gutters, Palette } from "../../styles";
import { responsiveHeight } from "react-native-responsive-dimensions";
import { BlurView } from "expo-blur";
import EditInput from "./components/EditInput";
import GradientButton from "../../components/GradientButton";
import { FONT_FAMILY } from "../../styles/Fonts";
import { useGlobal } from "reactn";
import firebase from "../../config/firebase";
import { navigate } from "../../navigation/NavigationService";
import { Routes } from "../../navigation";

const ChangePassword = () => {
  const [oldPassword, setOldPassword] = useState("");
  const [newPassword, setNewPassword] = useState("");
  const [loading, setLoading] = useState(false);
  const [, setTooltip] = useGlobal("_tooltip");

  const onSave = async () => {
    const oldVal = (oldPassword || "").trim();
    const newVal = (newPassword || "").trim();
    if (!oldVal || !newVal) return;
    try {
      setLoading(true);
      const user = firebase.auth().currentUser;
      if (!user?.email) return;

      const credential = firebase.auth.EmailAuthProvider.credential(
        user.email,
        oldVal,
      );
      await user.reauthenticateWithCredential(credential);
      await user.updatePassword(newVal);
      setTooltip({ type: "success", text: "Mot de passe mis à jour" });
      navigate(Routes.Settings);
    } catch (e) {
      console.log("ChangePassword error", e?.message);
      const msg = e?.message || "Mise à jour impossible";
      setTooltip({ type: "error", text: msg });
    } finally {
      setLoading(false);
    }
  };
  return (
    <Page
      headerType="NAVIGATE"
      title="Paramètres"
      backgroundImg={background.profileBG}
      contentContainerStyle={{
        paddingBottom: gutters * 4,
      }}
      containerStyle={{
        backgroundColor: "#0000004D",
      }}
    >
      <View style={{ flex: 1, marginTop: responsiveHeight(2) }}>
        <BlurView
          intensity={20}
          style={{
            paddingHorizontal: 20,
            paddingVertical: 16,
            borderRadius: 20,
            overflow: "hidden",
            backgroundColor: Palette.glass,
            gap: 4,
          }}
          experimentalBlurMethod={
            Platform.OS !== "ios" ? "dimezisBlurView" : "none"
          }
        >
          <EditInput
            placeholder="Mot de passe actuel"
            label="Mot de passe actuel"
            type="password"
            value={oldPassword}
            setValue={setOldPassword}
          />
          <EditInput
            placeholder="Nouveau mot de passe"
            label="Nouveau mot de passe"
            type="password"
            value={newPassword}
            setValue={setNewPassword}
          />
          <Pressable>
            <Text
              style={{
                fontSize: 12,
                color: Palette.white,
                fontFamily: FONT_FAMILY.HelveticaNeueRegular,
              }}
            >
              Mot de passe oublié?
            </Text>
          </Pressable>
        </BlurView>
      </View>
      <GradientButton
        title={loading ? "Chargement..." : "Enregistrer les modifications"}
        containerStyle={{
          width: "80%",
          alignSelf: "center",
        }}
        onPress={onSave}
        disabled={loading || !oldPassword?.trim() || !newPassword?.trim()}
      />
    </Page>
  );
};

export default ChangePassword;
