<template>
  <button class="button" @click="logInWithFacebook"> Login with Facebook</button>
</template>

<script>
export default {
  setup() {
    const logInWithFacebook = async () => {
      await loadFacebookSDK(document, "script", "facebook-jssdk")
      initFacebook().then(r => {
        window.FB.login(function (response) {
          if (response.authResponse) {
            alert("You are logged in &amp cookie set!")
          } else {
            alert("User cancelled login or did not fully authorize.")
          }
        })
        return false
      })
    }

    const initFacebook = async () => {
      window.fbAsyncInit = function () {
        window.FB.init({
          appId: "3313555114XXXXXX", //You will need to change this
          cookie: true, // This is important, it's not enabled by default
          version: "v13.0"
        })
      }
    }

    const loadFacebookSDK = async (d, s, id) => {
      let js, fjs = d.getElementsByTagName(s)[0]
      if (d.getElementById(id)) {
        return
      }
      js = d.createElement(s)
      js.id = id
      js.src = "https://connect.facebook.net/en_US/sdk.js"
      fjs.parentNode.insertBefore(js, fjs)
    }

    return {
      logInWithFacebook,
    }
  }
}
</script>
