import React from 'react';
import { useState, useEffect,createContext } from 'react';
import { Session } from '@supabase/supabase-js';
import { supabase } from '../../../utils/supabase';


export const AuthContext = createContext({session:null, user:null});

export const useAuthContext = () => useContext(AuthContext);

export const AuthContextProvider = ({
    children,
}) => {
    const [user, setUser] = useState(null);
    const [session, setSession] = useState(null);
    const [loading, setLoading] = useState(true);

    useEffect(() => {

        const setData = async() => {
            const { data: { session }, error} = await supabase.auth.getUser();
            if(error) throw error

            setSession(session)
            setUser(session?.user)
            setLoading(false)
        }

        setData()
        return () => {
            listener.subscription.unsubscribe()
        };

    }, []);

    const value ={
        session, user,
        signOut: () =>  supabase.auth.signOut
    }

    return (
        <AuthContext.Provider value={value}>
            {loading ? <div className='text-2xl text-center mt-[20%] '>Loading...</div> : children}
        </AuthContext.Provider>
    );
};

  const { user } = useAuthContext();
  const router = useRouter();

  const [isLogin, setIsLogin] = useState(false)
  const [datas, setData] = useState<string[]>([]);
  const [loading, setLoading] = useState(false);
  const [movies, setMovies] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      await fetch("https://seleksi-sea-2023.vercel.app/api/movies")
        .then((res) => res.json())
        .then((data) => {
          setData(data);
          setMovies(data);
          setLoading(false);
        });
    };

    fetchData();
  }, []);

  const checkLogin = () => {
    if (user == null) {
        router.push('/login')
    }else setIsLogin(true)
  };


  console.log('user:', user)