<template>
  <button class="g-signin-btn" id="googleSignIn" type="button">
    Login with Google
  </button>
  <!-- id="google-signin-button"
    class="g-signin2"
    data-onsuccess="onGoogleSignIn" -->
</template>
<script>
/* eslint-disable */
// function onGoogleSignIn(googleUser) {
//   // Useful data for your client-side scripts:
//   var profile = googleUser.getBasicProfile()
//   console.log('ID: ' + profile.getId()) // Don't send this directly to your server!
//   console.log('Full Name: ' + profile.getName())
//   console.log('Given Name: ' + profile.getGivenName())
//   console.log('Family Name: ' + profile.getFamilyName())
//   console.log('Image URL: ' + profile.getImageUrl())
//   console.log('Email: ' + profile.getEmail())

//   // The ID token you need to pass to your backend:
//   var id_token = googleUser.getAuthResponse().id_token
//   console.log('ID Token: ' + id_token)
// }

function onLoadGoogleCallback() {
  gapi.load('auth2', function () {
    const auth2 = gapi.auth2.init({
      client_id: process.env.googleId,
      cookiepolicy: 'single_host_origin',
      scope: 'profile',
    })

    const element = document.getElementById('googleSignIn')
    auth2.attachClickHandler(
      element,
      {},
      function (googleUser) {
        console.log('Signed in: ' + googleUser.getBasicProfile().getName())
      },
      function (error) {
        console.log('Sign-in error', error)
      }
    )
  })
}

export default {
  head() {
    return {
      meta: [
        {
          name: 'google-signin-scope',
          content: 'profile email',
        },
        {
          name: 'google-signin-client_id',
          content: process.env.googleId,
        },
      ],
      script: [
        {
          src: 'https://apis.google.com/js/platform.js',
          defer: true,
          async: true,
        },
        // {
        //   src: 'https://apis.google.com/js/api:client.js',
        // },
      ],
    }
  },
  mounted() {
    window.onload = onLoadGoogleCallback
  },

  methods: {},
}
</script>

<style lang="scss" scoped>
.g-signin-btn {
  align-self: center;
  background-color: $color-google;
  color: $color-light;
  border: none;
  border-radius: 5px;
  text-transform: uppercase;
  padding: 15px 20px;
  margin-top: 15px;
}
</style>
