<template>
  <div class="hotpay-facebook">
    <div
      class="fb-comments"
      data-width="100%"
      data-adapt-container-width="true"
      :data-href="data.options.url"
      :data-numposts="data.options.numposts"
      :data-colorscheme="data.options.theme"
      :data-order-by="data.options.orderBy"
      v-if="data.type === 'comments'">
    </div>

    <div
      class="fb-page"
      data-adapt-container-width="true"
      :data-width="data.options.width"
      :data-height="data.options.height"
      :data-href="data.options.url"
      :data-hide-cta="data.options.hideCta"
      :data-small-header="data.options.smallHeader"
      :data-hide-cover="data.options.hideCoverPhoto"
      :data-show-facepile="data.options.showFriendsFace"
      v-if="data.type === 'page'">
    </div>

    <div
      class="fb-comment-embed"
      :data-width="data.options.width"
      :data-href="data.options.url"
      v-if="data.type === 'comment'">
    </div>

    <div
      class="fb-post"
      :data-width="data.options.width"
      :data-href="data.options.url"
      :data-show-text="data.options.showText"
      v-if="data.type === 'post'">
    </div>

    <div
      class="fb-video"
      :data-href="data.options.url"
      :data-width="data.options.width"
      :data-show-text="data.options.showText"
      v-if="data.type === 'video'">
    </div>
  </div>
</template>

<style lang="scss" scoped>
  @import '../stylesheets/variables.scss';

  .hotpay-facebook {
    margin-bottom: 24px;
    display: flex;
  }

  .fb-comments,
  .fb_iframe_widget,
  .fb-video {
    flex: 1;
  }

  .fb-comments {
    min-height: 100px;
  }
</style>

<script>
  export default {
    name: 'hotpay-facebook',
    props: {
      data: Object
    },
    data: () => ({
      facebookScriptId: 'facebook-jssdk'
    }),
    methods: {
      bindFacebookScript () {
        const tagType = 'script'
        const targetScript = document.getElementsByTagName(tagType)[0]
        let newScript = null

        newScript = document.createElement(tagType)
        newScript.id = this.facebookScriptId
        newScript.async = true
        newScript.src = '//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.9'
        targetScript.parentNode.insertBefore(newScript, targetScript)
      },
      doUpdate () {
        this.$nextTick().then(() => {
          if (window.FB) {
            window.FB.XFBML.parse(this.$el)
          }
        })
      }
    },
    created () {
      if (!document.getElementById(this.facebookScriptId)) {
        this.bindFacebookScript()
      }
    },
    mounted () {
      this.doUpdate()
    },
    updated () {
      this.doUpdate()
    }
  }
</script>
