<template lang="pug">
.google--btn(@click="__callbackProvider")
  table
    tbody
      tr.loader_container(v-if="working")
        i.loader
      tr(v-if="!working")
        td
          div
            img(src="https://aid-frontend.prod.atl-paas.net/atlassian-id/front-end/5.0.32/static/media/google-logo.c21ca9d1.svg" alt="")
        td Google
</template>

<script>
export default {
  name: 'VmGoogle',
  data () {
    return {
      working: false
    }
  },
  methods: {
    __callbackProvider (response) {
      this.working = true
      this.$gAuth.signIn()
        .then(GoogleUser => {
          this.working = false
          let googleResponse = GoogleUser.getAuthResponse()
          let response = {
            accessToken: googleResponse.access_token
          }
          this.$emit('social-login', { provider: 'google', response: response })
        })
        .then(response => {
          // after ajax
          this.working = false
        })
        .catch(e => {
          this.working = false
        })
    }
  }
}
</script>

<style lang="stylus" scoped>
.google--btn
  border-radius 4px
  min-width 150px
  background-color #e9ebee
  cursor pointer
  display inline-block
  vertical-align top
  &:hover
    table
      background: rgba(9, 30, 66, 0.02) !important;
  table
    height 40px
    width 150px
    table-layout fixed
    background #fff
    border-radius 4px
    color rgb(80, 95, 121) !important
    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: #e33e2b;
      border-right-color: #e33e2b;
      border-left-color: #e33e2b;
      border-bottom-color: #cdcfd3;
      animation: v-google-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;
      img
        height: 20px;
        width: 20px;
        margin-top: 3px;
      &:first-child
        padding-top: 0;
        width: 40px;
        div
          height: 24px;
          margin: 8px;
      &:last-child
        padding-bottom: 0;
        padding-left: 0;
        font-size: 16px;
        margin-right: 12px;

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