<template>
  <div class="copyToClipboard walletAddress">
    <code :class="allowCopy && 'pr-4'" class="pt-2 pb-1">{{ value }}</code>
    <v-btn v-if="allowCopy" title="Copy to clipboard" icon ripple small absolute color="blue-grey lighten-4" class="mt-0 mb-0 mr-0 ml-0" @click="copyToClipboard">
      <v-icon size="12" dark>fa-copy</v-icon>
    </v-btn>
    <input v-if="allowCopy" ref="clipboardInput" v-model="value" type="text" />
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      default: function() {
        return '';
      }
    },
    allowCopy: {
      type: Boolean,
      default: function() {
        return true;
      }
    }
  },
  methods: {
    copyToClipboard() {
      this.$refs.clipboardInput.select();
      document.execCommand('copy');
    }
  }
};
</script>