/* eslint-disable react/display-name */
import { BlurView } from "expo-blur";
import { useState } from "react";
import { Platform, Text, View } from "react-native";
import { responsiveHeight } from "react-native-responsive-dimensions";
import React, { useEffect, useGlobal } from "reactn";
import { background } from "../../assets";
import Switch from "../../components/Switch";
import firebase, { usersRef } from "../../config/firebase";
import { isWeb } from "../../hooks/useLayoutType";
import Page from "../../layouts/Page";
import { gutters, Palette, Style } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";

export default (props) => {
  const [currentUID] = useGlobal("currentUID");
  const [currentUserData] = useGlobal("currentUserData");
  const [, setTooltip] = useGlobal("_tooltip");

  const [isPushSwitch, setIsPushSwitch] = useState(false);
  const [isEmailSwitch, setIsEmailSwitch] = useState(false);

  useEffect(() => {
    setIsPushSwitch(!!currentUserData?.notifications);
  }, [currentUserData?.notifications]);

  useEffect(() => {
    setIsEmailSwitch(!!currentUserData?.emailNotifications);
  }, [currentUserData?.emailNotifications]);

  const updateNotificationPreference = async (next, field, setState) => {
    try {
      setState(next);
      const uid = currentUID || firebase.auth().currentUser?.uid;
      if (!uid) {
        throw new Error("Utilisateur non connecté");
      }
      await usersRef.doc(uid).set({ [field]: next }, { merge: true });
      setTooltip({ type: "success", text: "Préférence enregistrée" });
    } catch (e) {
      setState(!next);
      setTooltip({
        type: "error",
        text: e?.message || "Enregistrement impossible",
      });
    }
  };

  const onTogglePush = (next) =>
    updateNotificationPreference(next, "notifications", setIsPushSwitch);

  const onToggleEmail = (next) =>
    updateNotificationPreference(next, "emailNotifications", setIsEmailSwitch);

  return (
    <Page
      headerType="NAVIGATE"
      title="Paramètres"
      backgroundImg={background.profileBG}
      contentContainerStyle={{
        paddingBottom: gutters * 4,
      }}
      containerStyle={{
        backgroundColor: isWeb ? "transparent" : "#0000004D",
      }}
    >
      <View style={{ flex: 1, marginTop: responsiveHeight(2) }}>
        <BlurView
          intensity={Platform.OS !== "ios" ? 10 : 20}
          style={{
            gap: 12,
            paddingVertical: 15,
            paddingHorizontal: 20,
            borderRadius: 20,
            overflow: "hidden",
            backgroundColor: Palette.glass,
          }}
          // experimentalBlurMethod={
          //   Platform.OS !== "ios" ? "dimezisBlurView" : "none"
          // }
        >
          <View style={Style.containerSpaceBetween}>
            <Text
              style={{
                fontSize: 20,
                color: Palette.white,
                fontFamily: FONT_FAMILY.HelveticaNeueMedium,
              }}
            >
              Notifications push
            </Text>
            <Switch value={isPushSwitch} setValue={onTogglePush} />
          </View>
          <Text
            style={{
              fontSize: 12,
              color: Palette.white,
              fontFamily: FONT_FAMILY.InterRegular,
            }}
          >
            Nous t’encourageons à activer les notifications pour découvrir les
            derniers classements, les nouveaux sons et les meilleurs playbacks.
          </Text>
          <View style={Style.containerSpaceBetween}>
            <Text
              style={{
                fontSize: 20,
                color: Palette.white,
                fontFamily: FONT_FAMILY.HelveticaNeueMedium,
              }}
            >
              Notifications par email
            </Text>
            <Switch value={isEmailSwitch} setValue={onToggleEmail} />
          </View>
          <Text
            style={{
              fontSize: 12,
              color: Palette.white,
              fontFamily: FONT_FAMILY.InterRegular,
            }}
          >
            Reste informé en recevant nos nouveautés et rappels directement dans
            ta boîte mail.
          </Text>
        </BlurView>
      </View>
    </Page>
  );
};