import SabreLogo from "./icons/SabreLogo";
import "./Header.css";
import { useEffect, useState } from "react";
import { gapi } from 'gapi-script';
import {useDispatch, useSelector} from 'react-redux'
import LoginStatus, { updateLoginStatus } from "../redux-elements/loginStatus";
import ProfileData from "./ProfileData";
import GoogleLogin from "react-google-login";
import LogoutModal from "./LogoutModal";


  

export default function Header() {
    const clientId = "28960402387-lioh5qksd4js14rkahl6gkqt3v0o7t9n.apps.googleusercontent.com";
    const loginStatus = useSelector(state => state.loginStatus);
    const dispatch = useDispatch();
    const [open, setOpen] = useState(false);
    const handleOpen = () => setOpen(true);
    const handleClose = () => setOpen(false);
   
    useEffect(() => {
        function start() {
            gapi.client.init({
                clientId: clientId,
                scope: "https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/userinfo.email"
            })
        }
        if (!loginStatus.isLoggedIn) {
            gapi.load('client:auth2', start)
        }
    }, [loginStatus.isLoggedIn]);

    
    const onLoginSuccess = async (res) => {
        console.log(res);
        var id_token = res.getAuthResponse().id_token;
        console.log(res.profileObj)
        async function sendAuthentication() {
            const response = await fetch("http://127.0.0.1:8000/sabreapi/v1/auth/login/", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({
                    token_id: id_token
                })
            })
            const data = await response.json();
            if (!data.error) {
                dispatch(updateLoginStatus({ prop: "loginToken", value: id_token }))
                dispatch(updateLoginStatus({ prop: "isLoggedIn", value: true }));
                dispatch(updateLoginStatus({ prop: "givenName", value: res.profileObj.givenName }))
                dispatch(updateLoginStatus({ prop: "imageURL", value: res.profileObj.imageUrl }))
            } else {
                alert(`Sorry, login failed. Please try again. \n\n${data.error}`)
            }
        }

        if (!loginStatus.isLoggedIn) {
            sendAuthentication();
        }
        

    }
    const onLoginFailure = (res) => {
        console.log("LOGIN FAILED! res: ", res)
    }

        console.log(loginStatus.givenName)
        return (<div>
            <div className="Header">
                <SabreLogo />
                <div className="LoginLogout">
                    {loginStatus.isLoggedIn ? <ProfileData handleClicked={setOpen}  givenName={loginStatus.givenName} imageUrl={loginStatus.imageURL} /> :
                        <GoogleLogin
                            clientId={clientId}
                            buttonText="Login"
                            onSuccess={onLoginSuccess}
                            onFailure={onLoginFailure}
                            cookiePolicy={'single_host_origin'}
                            isSignedIn={true}
                        />
                    }
                </div>
                <LogoutModal open={open} handleClose={handleClose} />
            </div>
        
        </div>
        )
    }