<template>
  <v-expand-transition>
    <v-card class="ma-3" v-show="locationLink" flat>
      <v-container>
        <slot/>
        <v-row cols="12" class="qr-container ma-3">
          <v-col cols="auto" v-if="$slots.qrCode">
            <slot name="qrCode"/>
          </v-col>
          <v-col align-self="center" class="public-link">
            <div class="link">{{ locationLink }}</div>
          </v-col>
        </v-row>
        <v-row align="center" class="mt-0 pt-0">
          <v-col align="center" class="mt-0 pt-0">
            <v-btn
              id="btn-copy-room-link"
              :color="publicRoomLinkCopied ? '#DEE6FF' : 'black'"
              depressed
              @click.stop="copyRoomLink"
              :class="{'filled-button' : true, 'link-copied-in-place' : publicRoomLinkCopied}"
              >{{ $t(`room_info.${publicRoomLinkCopied ? 'link_copied' : i18nCopyLinkKey}`) }}</v-btn
            >
          </v-col>
        </v-row>
      </v-container>
    </v-card>
  </v-expand-transition>
</template>

<script>
export default {
props: {
  locationLink: {
    type: String
  },
  i18nCopyLinkKey: {
    type: String,
    default: 'copy_link'
  }
},
data() {
  return {
    publicRoomLinkCopied: false,
  }
},
methods: {
  copyRoomLink() {
    if(this.publicRoomLinkCopied) return
    const self = this;
    this.$copyText(this.locationLink).then(
      function (ignored) {
        // Success!
        self.publicRoomLinkCopied = true;
        setInterval(() => {
          // Hide again
          self.publicRoomLinkCopied = false;
        }, 3000);
      },
      function (e) {
        console.log(e);
      }
    );
  }
}
}
</script>

<style lang="scss">
  .qr-container {
    background-color: white;
    border-radius: 8px;
    margin-top: 20px !important;
    .qr {
      width: 60px;
      height: 60px;
      background-color: #e0e0e0;
    }
    .public-link {
      background-color: #D6D5FC33;
      border-radius: 11px;
      .link {
        font-family: "Inter", sans-serif;
        font-size: 16px;
        text-decoration: underline;
        color: #3d6eff;
        overflow-wrap: anywhere;
      }
    }

  }

  .link-copied-in-place .v-btn__content {
    font-family: "Inter", sans-serif !important;
    font-size: 12px !important;
    text-transform: none !important;
    color: #3d6eff;
  }
</style>