import React from "react";
import { View } from "react-native";
import { SheetManager } from "react-native-actions-sheet";
import { responsiveHeight } from "react-native-responsive-dimensions";
import { background } from "../../assets";
import BlurItemButton from "../../components/BlurItemButton";
import BorderGradientButton from "../../components/BorderGradientButton";
import { isWeb } from "../../hooks/useLayoutType";
import Page from "../../layouts/Page";
import { Routes } from "../../navigation";
import { navigate } from "../../navigation/NavigationService";
import { useUserData } from "../../providers/UserDataProvider";
import { gutters, Palette } from "../../styles";

const SETTINGS = [
  {
    title: "Adresse mail",
    action: () => {
      navigate(Routes.ChangeEmailAddress);
    },
  },
  {
    title: "Modifier mon mot de passe",
    action: () => {
      navigate(Routes.ChangePassword);
    },
  },
  {
    title: "Notifications",
    action: () => {
      navigate(Routes.Notifications);
    },
  },
  {
    title: "Langue",
    action: () => {
      navigate(Routes.Language);
    },
  },
  {
    title: "Historique de commandes",
    action: () => {
      navigate(Routes.OrderHistory);
    },
  },
  {
    title: "Découvrir les packs",
    action: () => {
      navigate(Routes.Payments, { pack: "premium" });
    },
  },
  {
    title: "Gérer mon abonnement",
    action: () => {},
  },
];

const Settings = () => {
  const { onSignOut } = useUserData();

  const handleSignOut = async () => {
    try {
      await onSignOut();
    } catch (e) {
      console.log("Sign out error", e?.message);
    } finally {
      navigate(Routes.Login);
    }
  };
  return (
    <Page
      headerType="NAVIGATION"
      title="Paramètres"
      backgroundImg={background.profileBG}
      contentContainerStyle={{
        paddingBottom: gutters * 2,
      }}
      containerStyle={{
        backgroundColor: isWeb ? "transparent" : "#0000004D",
      }}
    >
      <View style={{ flex: 1, marginTop: responsiveHeight(2) }}>
        <View style={{ flex: 1, gap: 10 }}>
          {SETTINGS.map((item, index) => (
            <BlurItemButton
              key={index}
              title={item.title}
              onPress={item.action}
            />
          ))}
        </View>
        <View style={{ width: "80%", gap: 5, alignSelf: "center" }}>
          <BorderGradientButton title="Déconnexion" onPress={handleSignOut} />
          <BorderGradientButton
            title="Supprimer mon profil"
            titleStyle={{
              color: Palette.red,
            }}
            onPress={() => SheetManager.show("DeleteAccount")}
          />
        </View>
      </View>
    </Page>
  );
};

export default Settings;