<template>
  <div class="social-authentication-holder">
    <button
      v-for="(provider, index) in providers"
      :key="`social-login-${index}`"
      class="btn btn-lg btn-block btn-social"
      :class="`btn-${provider}`"
      @click="authenticate(provider)"
    >
      <icon :name="appSettings.socialAuthentication.providers[provider].icon"></icon>
      {{ $t(type, { provider: appSettings.socialAuthentication.providers[provider].name }) }}
    </button>
    <div class="or-spacer">
      <div class="mask"></div>
      <span :style="separatorStyle"
        ><i>{{ $t('Common.Or') }}</i></span
      >
    </div>
  </div>
</template>

<script>
import VueAuthenticate from 'vue-authenticate'
import Vue from 'vue'
import appSettings from '@/config/app-settings'
import axios from 'axios'
import VueAxios from 'vue-axios'

// social login setting
// social plugin using $http prototype & on success attaching token in headers which conflict with current token
// this section will isolate from main axios
export const socialAxios = axios.create()
socialAxios.defaults.headers.common = { ...socialAxios.defaults.headers.common, ...appSettings.axios.headers }
Vue.use(VueAxios, socialAxios)

Vue.use(VueAuthenticate, {
  baseUrl: appSettings.socialAuthentication.baseUrl, // Your API domain
  tokenPath: 'token',
  providers: { ...appSettings.socialAuthentication.providers },
})
export default {
  name: 'SocialAuthentication',
  props: {
    providers: {
      type: Array,
      default: () => ['facebook', 'google'],
    },
    type: {
      type: String,
      default: 'Common.SignUpUsing',
    },
    separatorStyle: {
      type: Object,
      default: () => ({ background: '#212359', color: 'white' }),
    },
  },
  data: () => ({
    appSettings,
  }),
  methods: {
    authenticate: function(provider) {
      this.$auth
        .authenticate(provider)
        .then(response => {
          let data = this.$helpers.getValue(response, 'data')
          if (data) {
            this.$emit('input', { data: { email: data.email, name: data.name }, error: !data.email })
            if (!data.email) {
              this.showError(provider)
            }
          } else {
            this.$emit('input', { error: true })
            this.showError(provider)
          }
        })
        .catch(() => {
          this.$emit('input', { error: true })
          this.showError(provider)
        })
    },
    showError(provider) {
      this.$swal({
        title: 'Oops',
        timer: 5000,
        timerProgressBar: true,
        text: this.$t('Common.SocialLogin.Failed.Msg', {
          provider: provider.charAt(0).toUpperCase() + provider.slice(1),
        }),
        type: 'warning',
      })
    },
  },
}
</script>
<style scoped lang="scss">
.btn-social {
  position: relative;
  padding-left: 44px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  .fa-icon {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 32px;
    line-height: 34px;
    font-size: 1.6em;
    text-align: center;
    border-right: 1px solid rgba(0, 0, 0, 0.2);
    height: auto;
    padding: 8px;
  }

  &.btn-lg {
    padding-left: 61px;

    > :first-child {
      line-height: 45px;
      width: 45px;
      font-size: 1.8em;
    }
  }

  &.btn-sm {
    padding-left: 38px;

    > :first-child {
      line-height: 28px;
      width: 28px;
      font-size: 1.4em;
    }
  }

  &.btn-xs {
    padding-left: 30px;

    > :first-child {
      line-height: 20px;
      width: 20px;
      font-size: 1.2em;
    }
  }
}

.btn-facebook {
  color: #fff;
  background-color: #3b5998;
  border-color: rgba(0, 0, 0, 0.2);

  &:hover,
  &:focus,
  &:active,
  &.active {
    color: #fff;
    background-color: #2d4373;
    border-color: rgba(0, 0, 0, 0.2);
  }
}

.open > .dropdown-toggle.btn-facebook {
  color: #fff;
  background-color: #2d4373;
  border-color: rgba(0, 0, 0, 0.2);
}

.btn-facebook {
  &:active,
  &.active {
    background-image: none;
  }
}

.open > .dropdown-toggle.btn-facebook {
  background-image: none;
}

.btn-facebook {
  &.disabled,
  &[disabled] {
    background-color: #3b5998;
    border-color: rgba(0, 0, 0, 0.2);
  }
}

fieldset[disabled] .btn-facebook {
  background-color: #3b5998;
  border-color: rgba(0, 0, 0, 0.2);
}

.btn-facebook {
  &.disabled:hover,
  &[disabled]:hover {
    background-color: #3b5998;
    border-color: rgba(0, 0, 0, 0.2);
  }
}

fieldset[disabled] .btn-facebook:hover {
  background-color: #3b5998;
  border-color: rgba(0, 0, 0, 0.2);
}

.btn-facebook {
  &.disabled:focus,
  &[disabled]:focus {
    background-color: #3b5998;
    border-color: rgba(0, 0, 0, 0.2);
  }
}

fieldset[disabled] .btn-facebook:focus {
  background-color: #3b5998;
  border-color: rgba(0, 0, 0, 0.2);
}

.btn-facebook {
  &.disabled:active,
  &[disabled]:active {
    background-color: #3b5998;
    border-color: rgba(0, 0, 0, 0.2);
  }
}

fieldset[disabled] .btn-facebook:active {
  background-color: #3b5998;
  border-color: rgba(0, 0, 0, 0.2);
}

.btn-facebook {
  &.disabled.active,
  &[disabled].active {
    background-color: #3b5998;
    border-color: rgba(0, 0, 0, 0.2);
  }
}

fieldset[disabled] .btn-facebook.active {
  background-color: #3b5998;
  border-color: rgba(0, 0, 0, 0.2);
}

.btn-facebook .badge {
  color: #3b5998;
  background-color: #fff;
}

.btn-google {
  color: #fff;
  background-color: #dd4b39;
  border-color: rgba(0, 0, 0, 0.2);

  &:hover,
  &:focus,
  &:active,
  &.active {
    color: #fff;
    background-color: #c23321;
    border-color: rgba(0, 0, 0, 0.2);
  }
}

.open > .dropdown-toggle.btn-google {
  color: #fff;
  background-color: #c23321;
  border-color: rgba(0, 0, 0, 0.2);
}

.btn-google {
  &:active,
  &.active {
    background-image: none;
  }
}

.open > .dropdown-toggle.btn-google {
  background-image: none;
}

.btn-google {
  &.disabled,
  &[disabled] {
    background-color: #dd4b39;
    border-color: rgba(0, 0, 0, 0.2);
  }
}

fieldset[disabled] .btn-google {
  background-color: #dd4b39;
  border-color: rgba(0, 0, 0, 0.2);
}

.btn-google {
  &.disabled:hover,
  &[disabled]:hover {
    background-color: #dd4b39;
    border-color: rgba(0, 0, 0, 0.2);
  }
}

fieldset[disabled] .btn-google:hover {
  background-color: #dd4b39;
  border-color: rgba(0, 0, 0, 0.2);
}

.btn-google {
  &.disabled:focus,
  &[disabled]:focus {
    background-color: #dd4b39;
    border-color: rgba(0, 0, 0, 0.2);
  }
}

fieldset[disabled] .btn-google:focus {
  background-color: #dd4b39;
  border-color: rgba(0, 0, 0, 0.2);
}

.btn-google {
  &.disabled:active,
  &[disabled]:active {
    background-color: #dd4b39;
    border-color: rgba(0, 0, 0, 0.2);
  }
}

fieldset[disabled] .btn-google:active {
  background-color: #dd4b39;
  border-color: rgba(0, 0, 0, 0.2);
}

.btn-google {
  &.disabled.active,
  &[disabled].active {
    background-color: #dd4b39;
    border-color: rgba(0, 0, 0, 0.2);
  }
}

fieldset[disabled] .btn-google.active {
  background-color: #dd4b39;
  border-color: rgba(0, 0, 0, 0.2);
}

.btn-google .badge {
  color: #dd4b39;
  background-color: #fff;
}

.or-spacer {
  margin: 60px 0 30px 0;
  position: relative;

  .mask {
    overflow: hidden;
    height: 20px;

    &:after {
      content: '';
      display: block;
      margin: -25px auto 0;
      width: 100%;
      height: 25px;
      border-radius: 125px / 12px;
      box-shadow: 0 0 8px black;
    }
  }

  span {
    width: 50px;
    height: 50px;
    position: absolute;
    bottom: 100%;
    margin-bottom: -25px;
    left: 50%;
    margin-left: -25px;
    border-radius: 100%;
    box-shadow: 0 2px 4px #999;

    i {
      position: absolute;
      top: 4px;
      bottom: 4px;
      left: 4px;
      right: 4px;
      border-radius: 100%;
      text-align: center;
      line-height: 40px;
      font-style: normal;
    }
  }
}
</style>
