<template>
  <v-dialog
    v-model="dialog"
    content-class="uiPopup with-overflow"
    width="500px"
    max-width="100vw"
    @keydown.esc="dialog = false">
    <v-btn
      v-if="icon"
      slot="activator"
      :disabled="disabled"
      class="bottomNavigationItem"
      title="Receive funds"
      flat
      value="receive">
      <span>
        Receive
      </span>
      <v-icon>
        fa-hand-holding-usd
      </v-icon>
    </v-btn>
    <button
      v-else
      slot="activator"
      class="btn ml-1 mt-2">
      Receive
    </button>
    <v-card class="elevation-12">
      <div class="popupHeader ClearFix">
        <a
          class="uiIconClose pull-right"
          aria-hidden="true"
          @click="dialog = false"></a> <span class="PopupTitle popupTitle">
            Receive funds
          </span>
      </div>
      <v-card-text class="text-xs-center">
        <qr-code
          ref="qrCode"
          :to="walletAddress"
          title="Address QR Code"
          information="You can send this Wallet address or QR code to other users to send you ether or tokens" />
        <wallet-address :value="walletAddress" />
      </v-card-text>
      <v-card-actions>
        <v-spacer />
        <button class="btn" @click="dialog = false">
          Close
        </button>
        <v-spacer />
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script>
import WalletAddress from './WalletAddress.vue';
import QrCode from './QRCode.vue';

import {setDraggable} from '../WalletUtils.js';

export default {
  components: {
    WalletAddress,
    QrCode,
  },
  props: {
    icon: {
      type: Boolean,
      default: function() {
        return false;
      },
    },
    walletAddress: {
      type: String,
      default: function() {
        return null;
      },
    },
  },
  data() {
    return {
      dialog: false,
    };
  },
  watch: {
    dialog() {
      if (this.dialog) {
        this.$refs.qrCode.computeCanvas();
        this.$nextTick(() => {
          setDraggable();
        });
      }
    },
  },
};
</script>
