<script>
import cBtna from "./c-btna";
import { mapGetters, mapActions } from "vuex";
import metaInfoUtils from '../classes/metaInfoUtils'

export default {
  extends: cBtna,
  data: function() {
    return {
      componentClass: "c-btn-fblogin"
    };
  },
  props: {
    dataFieldIdent4ExtSignInInfo: {
      type: String,
      default: "facebookSignInInfo"
    },
    dataFieldIdent4ExtSignInCallbackInfo: {
      type: String,
      default: "extSignInCallbackInfo"
    }
  },
  computed: {
    ...mapGetters("csAppWindowsUtils", [
      "pathMetaInfo"
    ]),
    getSignInInfo: function() {
      return this.getDataFieldValue(this.dataFieldIdent4ExtSignInInfo)
    }
  },
  methods: {
    ...mapActions("csAppWindowsUtils", [
      "setPathMetaInfo"
    ]),
    onClick: function() {
      if (window.FB == null) return
      window.FB.getLoginStatus(this.onGetLoginStatusCompleted)
    },
    onGetLoginStatusCompleted: function(getLoginStatusResponse) {
      if (getLoginStatusResponse.status == "unknown") {
        window.FB.login(this.onFacebookLoginCompleted, { scope: "public_profile,email" })
      } else {
        let userID = getLoginStatusResponse?.authResponse?.userID;
        this.getFacebookUserInfo(userID)
      }
    },
    onFacebookLoginCompleted: function(loginResponse) {
      if (loginResponse.status == "connected") {
        let userID = loginResponse?.authResponse?.userID;
        this.getFacebookUserInfo(userID)
      }
    },
    getFacebookUserInfo: function(userID) {
      let apiPath = this.getFacebookApiPath4UserInfo(userID)
      window.FB.api(apiPath, this.onGetFacebookUserInfoCompleted)
    },
    onGetFacebookUserInfoCompleted: function(apiResponse) {
      if(apiResponse == null) return
      //
      let extSignInUserInfo = {
        id: apiResponse.id,
        name: apiResponse.first_name + (apiResponse.middle_name != null && apiResponse.middle_name != '') ? ' ' + apiResponse.middle_name : '',
        surname: apiResponse.last_name,
        email: apiResponse.email
      }
      this.setDataFieldValue({ dataFieldIdent: this.dataFieldIdent4ExtSignInCallbackInfo, dataFieldValue: JSON.stringify(extSignInUserInfo)})
      //
      this.$emit('beforeExec')
      if (this.$scopedSlots.confirmation && !this.confirmed) {
        this.showConfirmation = true
      } else {
        let payload = {
          appWindowIdent: this.appWindowIdent,
          dataSetIdent: this.dataSetIdent,
          actionIdent: this.actionIdent,
          row: this.contextRow,
          router: this.$router,
          window: window,
          layoutIdent: this.layoutIdent
        }
        this.showConfirmation = false
        this.confirmed = false
        this.invokeAction(payload)
      }
    },
    getFacebookApiPath4UserInfo: function(userID) {
      return "/" + userID + "?fields=first_name,middle_name,last_name,email,hometown,location";
    },
    signInInfoAdd: function() {
      if(this.getSignInInfo == null || this.getSignInInfo == '') return
      //
      let signInInfo = JSON.parse(this.getSignInInfo)?.signInInfo
      if(signInInfo == null) return
      //
      this.metaInfoAdd(signInInfo.metaInfo)
    },
    metaInfoAdd: function(metaInfo) {
      if(metaInfo == null) return
      //
      let path = this.$route?.path
      if (path == null) return
      let pathMetaInfo = this.pathMetaInfo(path)

      pathMetaInfo = metaInfoUtils.metaInfoMerge(pathMetaInfo, metaInfo)

      this.setPathMetaInfo({
        path: this.$route?.path,
        metaInfo: { ...pathMetaInfo }
      })
    }
  },
  watch: {
    getSignInInfo: function() {
      this.signInInfoAdd()
    }
  },
  mounted: async function() {
    if (this.getAppWindow(this.appWindowIdent) == null) {
      await this.addAppWindow({
        appWindowIdent: this.appWindowIdent,
        setActive: false,
        lookupDef: null,
        addRoutingData: false,
        path: null,
        query: null
      });
    }
    this.width = this.$el.offsetHeight
    //
    this.signInInfoAdd()
  }
};
</script>