import facebook from "@/assets/images/facebook.png";
import github from "@/assets/images/github.png";
import google from "@/assets/images/google.png";
import linkedin from "@/assets/images/linkedin.png";
import x from "@/assets/images/x.png";
import useSocialAuth from "@/hooks/useSocialAuth";
import { useAuthStore } from "@/providers/AuthStoreProviders";
import { useMemo } from "react";
import { ActivityIndicator, Pressable, Text, View } from "react-native";
import ImageLoader from "../ui/ImageLoader";
// import * as Facebook from "expo-auth-session/providers/facebook";

// Define available providers
const providers = [
  { icon: google, name: "Google", provider: "google" },
  { icon: facebook, name: "Facebook", provider: "facebook" },
  { icon: x, name: "Twitter", provider: "twitter" },
  { icon: linkedin, name: "LinkedIn", provider: "linkedin" },
  { icon: github, name: "GitHub", provider: "github" },
];

export default function SocialLogin() {
  const { handleSocialLogin, isSocialAuthLoading, loadingProvider } =
    useSocialAuth();
  const { appInfo } = useAuthStore((state: any) => state);

  // Filter only enabled providers from backend config
  const authProviders = useMemo(() => {
    const enabledAuthProviders = appInfo?.application_info?.auth_providers;
    if (!enabledAuthProviders) return [];
    return providers.filter((provider) =>
      enabledAuthProviders.some(
        (p: any) => p.id === provider.provider && p.is_enabled,
      ),
    );
  }, [appInfo?.application_info?.auth_providers]);

  // Somewhere in your code

  const nativeProviders = ["google", "facebook"];

  return (
    <View className="flex-row w-full flex-wrap items-center justify-center gap-2">
      {authProviders.map((p) => {
        const isNative = nativeProviders.includes(p.provider);
        const isThisLoading = loadingProvider === p.provider;
        const disabled = isSocialAuthLoading;

        return (
          <View key={p.provider} className="rounded-full w-full">
            <Pressable
              disabled={!isNative || disabled}
              className="border-slate-200 flex-row gap-2 w-full cursor-pointer items-center justify-center rounded-full border text-sm p-3"
              onPress={() => isNative && handleSocialLogin(p.provider)}
            >
              {isThisLoading ? (
                <View className="justify-center items-center gap-x-3 flex-row w-full">
                  <ActivityIndicator size="small" color="" />
                  <Text className="font-satoshi-bold">Loading...</Text>
                </View>
              ) : (
                <>
                  <ImageLoader
                    src={p.icon}
                    isLocalImage={true}
                    height={24}
                    width={24}
                    className="size-6"
                  />
                  <Text>Continue with {p.name}</Text>
                </>
              )}
            </Pressable>
          </View>
        );
      })}
    </View>
  );
}
