<template lang="pug">
v-f-b-login-scope(app-id="2529491423947869" @login="__callbackProvider" ref="login_scope" @connect="__connectCheck")
  .facebook--btn(slot-scope="scope" @click="scope.toggleLogin")
    table
      tbody
        tr.loader_container(v-if="scope.working")
          i.loader
        tr(v-if="scope.enabled")
          td
            div
              svg(xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216 216" class="_5h0m" color="#FFFFFF")
                path(fill="#FFFFFF" d="M204.1 0H11.9C5.3 0 0 5.3 0 11.9v192.2c0 6.6 5.3 11.9 11.9 11.9h103.5v-83.6H87.2V99.8h28.1v-24c0-27.9 17-43.1 41.9-43.1 11.9 0 22.2.9 25.2 1.3v29.2h-17.3c-13.5 0-16.2 6.4-16.2 15.9v20.8h32.3l-4.2 32.6h-28V216h55c6.6 0 11.9-5.3 11.9-11.9V11.9C216 5.3 210.7 0 204.1 0z")
          td(v-if="scope.disconnected") Facebook
          td(v-if="scope.connected") Logout
</template>

<script>
import { VFBLoginScope } from 'vue-facebook-login-component'
export default {
  name: 'VmFacebook',
  components: {
    VFBLoginScope
  },
  computed: {
    computedTransition () {
      const transition = ['background-color 0.15s ease-in-out'].concat(
        this.transition
      )
      return {
        transition: [...new Set(transition)].join(', ')
      } // Bootstrap 4 (`.btn`)
    },
    computedButtonStyle () {
      return Object.assign({}, this.buttonStyle, this.computedTransition)
    }
  },
  methods: {
    __callbackProvider (response) {
      response.status === 'connected' && this.$emit('social-login', { provider: 'facebook', response: response.authResponse })
    },
    __connectCheck () {
      !this.$auth.check() && this.$refs.login_scope.logout()
    }
  }
}
</script>

<style lang="stylus" scoped>
.facebook--btn
  border-radius 4px
  min-width 150px
  background-color #e9ebee
  cursor pointer
  display inline-block
  vertical-align top
  &:hover
    table
      background: #5376bc !important;
  table
    height 40px
    width 150px
    table-layout fixed
    background #4267b2
    border-radius 4px
    color #fff
    border 0
    border-collapse collapse
    border-spacing 0
    box-shadow rgba(0, 0, 0, 0.2) 1px 1px 5px 0px !important
    transition: background 0.1s ease-out 0s, box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38) 0s;
    .loader_container
      display: flex;
      align-items: center;
      border-radius: 0.25rem;
      justify-content: center;
      height: 40px;
    .loader
      display: block;
      border-radius: 50%;
      border-style: solid;
      border-width: 0.1rem;
      border-top-color: #8b9dc3;
      border-right-color: rgba(255,255,255, 1);
      border-left-color: rgba(255,255,255, 1);
      border-bottom-color: rgba(255,255,255, 1);
      animation: v-facebook-login-spin 2s linear infinite;
      height: 1.5rem;
      margin-right: 0.5rem;
      opacity: 0.9;
      width: 1.5rem;
    td
      border: none;
      font-family: Helvetica, Arial, sans-serif;
      letter-spacing: .25px;
      overflow: hidden;
      text-align: center;
      text-overflow: clip;
      white-space: nowrap;
      svg
        height: 24px;
        width: 24px;
      &:first-child
        padding-top: 0;
        padding-left: 0;
        width: 40px;
        div
          height: 24px;
          margin: 8px;
      &:last-child
        padding-bottom: 0;
        padding-left: 0;
        font-size: 16px;
        margin-right: 12px;

@keyframes v-facebook-login-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
