import React, {createContext, useEffect, useState} from 'react';

export const AuthContext = createContext();

export const AuthProvider = ({ children }) => {
    const [user, setUser] = useState(null);
    const [refreshToken, setRefreshToken] = useState(null);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        const initializeAuth = async () => {
            try {
                const storedUser = localStorage.getItem('user');
                const storedRefreshToken = localStorage.getItem('refreshToken');
                if (storedUser && storedRefreshToken) {
                    setUser(JSON.parse(storedUser));
                    setRefreshToken(storedRefreshToken);
                }
            } catch (error) {
                console.error('Error initializing auth:', error);
            } finally {
                setLoading(false);
            }
        };

        initializeAuth();
    }, []);

    const login = (userData, token) => {
        setUser(userData);
        setRefreshToken(token);
        localStorage.setItem('user', JSON.stringify(userData));
        localStorage.setItem('refreshToken', token);
    };

    const logout = async () => {
        try {
            const response = await fetch(process.env.REACT_APP_LOGOUT_ROUTE, {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json',
                },
            });
            if (response.ok) {
                setUser(null);
                setRefreshToken(null);
                localStorage.removeItem('user');
                localStorage.removeItem('refreshToken');
            } else {
                console.error('Logout failed:', response.statusText);
            }
        } catch (error) {
            console.error('Error logging out:', error);
        }
    };

    const authContextValue = {
        user,
        refreshToken,
        login,
        logout,
    };

    // Maybe make a loading screen animation/component to use?
    return (
        <AuthContext.Provider value={authContextValue}>
            {loading ? <div></div> : children}
        </AuthContext.Provider>
    );
};

export default AuthProvider;