import React from 'react'
import { useNavigate } from 'react-router-dom'
import { useAuthContext } from '../../../state/AuthContext'
import { callBubblesApi } from '../../../utility/api'
import { refreshTokenSetup } from '../../../utility/auth/refreshToken'
import { GOOGLE_CLIENT_ID } from '../../../utility/constants/app'
import { PATH_AUTH } from '../../../utility/constants/path'
import { GoogleLogin } from 'react-google-login'

export default function GoogleLoginContainer() {
  const { onLogin } = useAuthContext()
  const navigate = useNavigate()

  const onSuccess = async (res) => {
    const { tokenId, googleId } = res

    const { err } = await callBubblesApi({
      path: PATH_AUTH,
      headers: {
        tokenId,
        googleId
      }
    })

    if (err) {
      // on error
    }
    onLogin(res)
    navigate('/home', { replace: true })
    refreshTokenSetup(res)
  }

  const onFailure = (res) => {
    console.log('Login failed: res:', res)
  }

  return (
    <GoogleLogin
      clientId={GOOGLE_CLIENT_ID}
      buttonText="Login"
      isSignedIn={true}
      onSuccess={onSuccess}
      onFailure={onFailure}
      cookiePolicy={'single_host_origin'}
    />
  )
}