import BackButtonTitle from "@/components/ui/BackButtonTitle";
import Button from "@/components/ui/Button";
import CustomSwitch from "@/components/ui/Switch";
import { useQueryMutation } from "@/hooks/mutate/useQueryMutation";
import { useColor } from "@/hooks/useColor";
import { useAuthStore } from "@/providers/AuthStoreProviders";
import { showToast } from "@/utils/toast";
import { router } from "expo-router";
import { ArrowRightIcon } from "phosphor-react-native";
import { ScrollView, Text, View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";

export default function EditSecuritySettings() {
  const { user, getUser } = useAuthStore((state) => state);

  const {primary} = useColor();

  const { mutate: toggle2FA } = useQueryMutation({
    url: "/client/profile/personal-info",
    isUpdateMethod: true,
  });

  const enableTwoFactorAuth = () => {
    toggle2FA(
      {
        is_2fa_enabled: !user?.is_2fa_enabled,
      },
      {
        onSuccess: (response: any) => {
          showToast({
            type: "success",
            text: "Two factor authentication updated successfully",
          });
          getUser();
        },
      },
    );
  };
  return (
    <ScrollView className="bg-white px-4">
      <SafeAreaView>
        <BackButtonTitle title="Security Settings" />
      
          <View className="px-4 py-6 rounded-xl my-6" style={{
          backgroundColor: primary[5],
        }}>
            <Text className="text-xl font-manrope-semibold">Preferences</Text>
            <View className="flex-row justify-between items-center pt-1">
              <Text className="text-slate-500 text-base ">Enable Two Factor Authentication</Text>
              <CustomSwitch active={user?.is_2fa_enabled} onPress={enableTwoFactorAuth} />
            </View>
          </View>
       
        <Button
          onPress={() => {
            router.push("/change-password");
          }}
          className=" justify-center items-center"
          text="Change Password"
          type="secondary"
          rightIcon={<ArrowRightIcon />}
        />
      </SafeAreaView>
    </ScrollView>
  );
}
