import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faApple, faFacebookF, faGoogle} from "@fortawesome/free-brands-svg-icons";
import React, {useContext, useEffect} from "react";
import Link from "next/link";
import System from "@/lib/models/System";
import {AlertContext} from "@/context/AlertContext";
import {configs} from "@/lib/configs";
import {SessionContext, SessionContextProps} from "@/context/SessionContext";
import {useTranslations} from "next-intl";
import {LangContext, LangContextProps} from "@/context/LangContext";

export default function SocialForm() {
    const {errorMessage} = useContext(AlertContext);
    const {setSession} = useContext<SessionContextProps>(SessionContext)
    const t = useTranslations();
    const {lang} = useContext<LangContextProps>(LangContext)
    
    useEffect((): void => {
        const params = new URLSearchParams(window.location.search);
        const provider: string | null = params.get('provider');
        if (!provider) {
            return;
        }
        const code: string | null = params.get('code');
        if (!code) {
            return;
        }
        if (provider === 'google') {
            handleGoogleLogin(code).then();
            return;
        }
        if (provider === 'facebook') {
            const state: string | null = params.get('state');
            if (!state) {
                return;
            }
            handleFacebookLogin(code, state).then();
            return;
        }
        if (provider === 'apple') {
            const state: string | null = params.get('state');
            if (!state) {
                return;
            }
            handleAppleLogin(code, state).then();
            return;
        }
    }, []);
    
    async function handleFacebookLogin(code: string, state: string): Promise<void> {
        if (code && state) {
            const response: string = await System.postToServer<string>(`auth/facebook`, {
                code: code,
                state: state,
            }, lang);
            if (!response) {
                errorMessage(t('socialForm.error.connection'));
                return;
            }
            System.setCookie('token', response, 30);
            const token: string | null = System.getCookie('token');
            if (!token) {
                errorMessage(t('socialForm.error.connection'));
                return;
            }
            setSession({isConnected: true, user: null, accessToken: token});
        }
    }
    
    async function handleGoogleLogin(code: string): Promise<void> {
        if (code) {
            const response: string = await System.postToServer<string>(`auth/google`, {
                code: code,
            }, lang);
            if (!response) {
                errorMessage(t('socialForm.error.connection'));
            }
            System.setCookie('token', response, 30);
            const token: string | null = System.getCookie('token');
            if (!token) {
                errorMessage(t('socialForm.error.connection'));
                return;
            }
            setSession({isConnected: true, user: null, accessToken: token});
        }
    }
    
    async function handleAppleLogin(code: string, state: string): Promise<void> {
        if (code && state) {
            const response: string = await System.postToServer<string>(`auth/apple`, {
                code: code,
                state: state,
            }, lang);
            if (!response) {
                errorMessage(t('socialForm.error.connection'));
                return;
            }
            System.setCookie('token', response, 30);
            const token: string | null = System.getCookie('token');
            if (!token) {
                errorMessage(t('socialForm.error.connection'));
                return;
            }
            setSession({isConnected: true, user: null, accessToken: token});
        }
    }
    
    return (
        <div className="flex justify-center gap-3">
            <Link
                href={`https://www.facebook.com/v18.0/dialog/oauth?client_id=1015270470233591&redirect_uri=${configs.baseUrl}login?provider=facebook&scope=email&response_type=code&state=abc123`}
                className="flex items-center justify-center w-14 h-14 bg-[#1877F2] hover:bg-opacity-90 text-textPrimary rounded-xl transition-colors"
                aria-label="Login with Facebook"
            >
                <FontAwesomeIcon icon={faFacebookF} className="w-6 h-6 text-textPrimary"/>
            </Link>

            <Link
                href={`https://accounts.google.com/o/oauth2/v2/auth?client_id=911482317931-pvjog1br22r6l8k1afq0ki94em2fsoen.apps.googleusercontent.com&redirect_uri=${configs.baseUrl}login?provider=google&response_type=code&scope=openid email profile&access_type=offline`}
                className="flex items-center justify-center w-14 h-14 bg-white hover:bg-opacity-90 text-[#4285F4] rounded-xl transition-colors"
                aria-label="Login with Google"
            >
                <FontAwesomeIcon icon={faGoogle} className="w-6 h-6 text-[#4285F4]"/>
            </Link>
            
            <Link
                href={`https://appleid.apple.com/auth/authorize?client_id=eritors.apple.login&redirect_uri=https://eritors.com/login?provider=apple&response_type=code&scope=email name&response_mode=form_post&state=abc123`}
                className="flex items-center justify-center w-14 h-14 bg-black hover:bg-opacity-90 text-white rounded-xl transition-colors"
                aria-label="Login with Apple"
            >
                <FontAwesomeIcon icon={faApple} className="w-6 h-6 text-white"/>
            </Link>
        </div>
    )
}
