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

export default {
  extends: cBtna,
  data: function() {
    return {
      componentClass: "c-btn-fblogin"
    };
  },
  props: {
    dataFieldIdent4FacebookSDKScript: {
      type: String,
      default: "scriptFacebookSDK"
    },
    dataFieldIdent4FacebookUserInfo: {
      type: String,
      default: "facebookUserInfo"
    }
  },
  computed: {
    ...mapGetters("csAppWindowsUtils", [
      "pathMetaInfo",
      "activeMetaInfo"
    ]),
    getFacebookSDKScript: function() {
      return this.getDataFieldValue(this.dataFieldIdent4FacebookSDKScript);
    }
  },
  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
      //
      this.setDataFieldValue({dataFieldIdent: this.dataFieldIdent4Login, dataFieldValue: apiResponse?.id})
      this.setDataFieldValue({dataFieldIdent: this.dataFieldIdent4Password, dataFieldValue: apiResponse?.id})
      this.setDataFieldValue({dataFieldIdent: this.dataFieldIdent4FacebookUserInfo, dataFieldValue: JSON.stringify(apiResponse)})
      //
      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";
    },
    addFacebookSDKScriptToMetaInfo: function() {
      if(window.FB != null) return
      //
      let facebookSDKScript = this.getFacebookSDKScript;
      if (facebookSDKScript == null) return
      //
      let path = this.$route?.path
      if(path == null) return
      //
      let pathMetaInfo = this.pathMetaInfo(path)
      if (pathMetaInfo == null) {
        this.setPathMetaInfo({
          path: this.$route?.path,
          metaInfo: {
            script: [
              {
                pbody: true,
                type: "text/javascript",
                innerHTML: facebookSDKScript
              }
            ]
          }
        })
      } else if(pathMetaInfo != null && pathMetaInfo.script == null) {
        this.setPathMetaInfo({
          path: this.$route?.path,
          metaInfo: {
            ...pathMetaInfo,
            script: [
              {
                pbody: true,
                type: "text/javascript",
                innerHTML: facebookSDKScript
              }
            ]
          }
        })
      } else if (pathMetaInfo != null && pathMetaInfo.script != null && pathMetaInfo.script.some(script => script.innerHTML == facebookSDKScript) === false) {
        pathMetaInfo.script.push({
          pbody: true,
          type: "text/javascript",
          innerHTML: facebookSDKScript
        });
      }
    }
  },
  watch: {
    getFacebookSDKScript: function() {
      this.addFacebookSDKScriptToMetaInfo();
    }
  },
  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.addFacebookSDKScriptToMetaInfo()
  }
};
</script>