Vue.component('share-options', {
  props: {
    absolute: {
      type: Boolean,
      default: false,
    },
    top: {
      type: Boolean,
      default: false,
    },
    right: {
      type: Boolean,
      default: false,
    },
    left: {
      type: Boolean,
      default: false,
    },
    bottom: {
      type: Boolean,
      default: false,
    },
    flat: {
      type: Boolean,
      default: false,
    },
    color: {
      type: String,
      default: "white",
    },
    url: {
      type: String,
      default: "",
    },
    is_mobile: {
      type: Boolean,
      default: false,
    },
    is_android: {
      type: Boolean,
      default: false,
    },
    event_fields: {
      type: Object,
      default: ()=>({}),
    },    
  },
  inject: ['copyText'],
  data: () => ({
    open_fab: false,
    pre_link: "",
  }),
  methods: {
    onBlur () {
      setTimeout(() => {
        this.open_fab = false;
      }, 300);
    },
    shareLine () {
      this.pre_link = "https://social-plugins.line.me/lineit/share?url=";
      this.openWindow();
	  },
    shareWechat () {
      if(this.is_mobile) {
        // mobile
        this.pre_link = "weixin://dl/chat";
      } else {
        // desktop
        this.pre_link = "https://web.wechat.com/";
      }
      let title = "1TICKS - 專業團隊助你解決活動宣傳";
      let subtitle = "1TICKS是一個專注在活動行銷和宣傳效益的售票平台，立即使用1TICKS讓你無需再為票務而擔心。舉辦免費活動可免費使用。";
      if (this.getFields(this.event_fields, 'title') != null) {
        title = this.getFields(this.event_fields, 'title');
        subtitle = "此活動已登陸1TICKS，快來探索更多精彩內容。This event is now on 1TICKS, come and check out more details!";
      }
			this.copyText(this.url + `\r${title}\r${subtitle}`,false);
			this.$swal(this.$t('success.general.copied_wechat'), "", "success").then(()=>{
        this.openWindow();
      });
    },
    shareWhatsapp () {
      this.pre_link = "https://api.whatsapp.com/send?text=";
      this.openWindow(true);
    },
    shareFacebook () {
	    this.pre_link = "https://www.facebook.com/sharer/sharer.php?u=";
      this.openWindow();
    },
    openWindow (copy = false) {
      if(this.is_mobile) {
        // mobile
        window.open(this.pre_link + this.url, "_top");
      } else {
        // desktop
        if (copy) {
          this.copyText(this.url);
        }
        window.open(this.pre_link + this.url, "share-dialog", "width=626,height=436");
      }
    },
    copy () {
      this.copyText(this.url);
    }
  },
  template:
`<v-speed-dial
  v-model="open_fab"
  :top="top"
  :bottom="bottom"
  :left="left"
  :right="right"
  :absolute="absolute"
  direction="left"
  transition="slide-x-reverse-transition"
  >
  <template v-slot:activator>
    <v-btn
      @click.stop.prevent="open_fab = !open_fab"
      class="ma-0"
      v-model="open_fab"
      :color="color"
      :text="flat"
      x-small
      fab
      @blur="onBlur"
    >
      <v-icon small v-if="open_fab">mdi-close</v-icon>
      <v-icon small v-else>mdi-share-variant</v-icon>
    </v-btn>
  </template>
  <v-btn
    @click.stop.prevent="shareLine"
    class="ma-0 mr-n3"
    :depressed="flat"
    fab
    dark
    x-small
    color="line"
  >
    <!-- <v-icon style="display:flex">fab fa-line</v-icon> -->
    <span class="font-weight-bold" style="display:flex">line</span>
  </v-btn>
  <v-btn
    @click.stop.prevent="shareWechat"
    class="ma-0 mr-1"
    :depressed="flat"
    fab
    dark
    x-small
    color="wechat"
  >
    <v-icon style="display:flex" size="24">mdi-wechat</v-icon>
  </v-btn>
  <v-btn
    @click.stop.prevent="shareWhatsapp"
    class="ma-0 mr-1"
    :depressed="flat"
    fab
    dark
    x-small
    color="whatsapp"
  >
    <v-icon style="display:flex" size="20">mdi-whatsapp</v-icon>
  </v-btn>
  <v-btn
    @click.stop.prevent="shareFacebook"
    class="ma-0 mr-1"
    :depressed="flat"
    fab
    dark
    x-small
    color="facebook"
  >
    <v-icon style="display:flex" size="22">mdi-facebook</v-icon>
  </v-btn>
  <v-btn
    @click.stop.prevent="copy"
    class="ma-0 mr-1"
    :depressed="flat"
    fab
    dark
    x-small
    color="primary"
  >
    <v-icon style="display:flex" size="16">mdi-content-copy</v-icon>
  </v-btn>
</v-speed-dial>`
});