<template>
  <div class="copy-link-container">
    <div class="copy-link-body">
      {{ text }}
      <input
        ref="shareLink"
        :value="link"
        data-test="share link"
        readonly
      >
    </div>
    <div class="button-container">
      <TfButton
        type="secondary"
        size="medium"
        data-test="copy link"
        @click="copyLink"
      >
        Copy link
      </TfButton>
      <div
        :style="`opacity: ${tooltipOpacity}`"
        class="el-tooltip__popper is-dark copied-popper"
        x-placement="top"
        data-test="copied popper"
      >
        Copied!
        <div
          x-arrow=""
          class="popper__arrow"
        />
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'CopyLinkContainer',
    props: {
      text: {
        type: String,
        default: null,
      },
      link: {
        type: String,
        default: null,
      },
      linkType: {
        type: String,
        default: 'secondary',
      },
    },
    data: () => ({
      tooltipOpacity: 0,
    }),
    methods: {
      /**
       * Copy the "Share Link" to the users clipboard
       */
      copyLink() {
        this.tooltipOpacity = 1;
        this.$refs.shareLink.select();
        document.execCommand('copy');
        clearTimeout(this.timeout);
        this.timeout = window.setTimeout(() => {
          this.tooltipOpacity = 0;
        }, 3000);
      },
    },
  };
</script>

<style lang="scss" scoped>
  @import 'src/assets/styles/variables';
  @import 'src/assets/styles/mixins';

  .copy-link-container {
    background: $tf-white;
    border: 1px $tf-extra-light-gray-1 solid;
    box-sizing: border-box;
    padding: 25px 20px 25px 15px;
    position: relative;
    text-align: left;
    display: flex;
    justify-content: space-between;

    .el-tooltip__popper {
      width: auto;
      color: $tf-white;
      position: absolute;
      right: 39px;
      top: -15px;
      transition: opacity 300ms;
    }

    .el-tooltip__popper.copied-popper .popper__arrow {
      left: 24.5px;
    }
  }

  .copy-link-body {
    font-size: 14px;
    display: inline-block;
    color: $tf-dark-gray;
    flex-grow: 1;
    margin-right: 15px;

    input {
      color: $tf-blue;
      font-weight: bold;
      background: transparent;
      border: 0;
      display: block;
      width: 100%;
      height: 15px;
      margin-top: 2px;
      text-overflow: ellipsis;
    }
  }

  .button-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
</style>
