<template>
  <v-dialog
    v-model="show"
    content-class="uiPopup"
    width="500px"
    max-width="100vw"
    @keydown.esc="show = false">
    <v-card class="elevation-12">
      <div class="popupHeader ClearFix">
        <a
          class="uiIconClose pull-right"
          aria-hidden="true"
          @click="show = false"></a>
        <span class="PopupTitle popupTitle">
          Add Token address
        </span>
      </div>
      <v-card-text>
        <div v-if="error && !loading" class="alert alert-error v-content">
          <i class="uiIconError"></i>{{ error }}
        </div>
        <v-form
          @submit="
            $event.preventDefault();
            $event.stopPropagation();
          ">
          <v-text-field
            v-model="address"
            :disabled="loading"
            name="address"
            label="Address"
            placeholder="Select ERC20 Token address"
            type="text" />
        </v-form>
      </v-card-text>
      <v-card-actions>
        <v-spacer />
        <button
          :disabled="loading"
          :loading="loading"
          class="btn btn-primary"
          @click="addToken">
          Save
        </button>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script>
import {saveContractAddress} from '../../WalletToken.js';
import {setDraggable} from '../../WalletUtils.js';

export default {
  props: {
    open: {
      type: Boolean,
      default: function() {
        return false;
      },
    },
    account: {
      type: String,
      default: function() {
        return null;
      },
    },
    netId: {
      type: Number,
      default: function() {
        return 0;
      },
    },
    isDefaultContract: {
      type: Boolean,
      default: function() {
        return false;
      },
    },
  },
  data() {
    return {
      show: false,
      loading: null,
      error: null,
      address: null,
    };
  },
  watch: {
    open() {
      if (this.open) {
        this.show = true;
        this.$nextTick(() => {
          setDraggable();
        });
      }
    },
    show() {
      if (!this.show) {
        this.$emit('close');
      }
    },
  },
  methods: {
    addToken() {
      this.error = null;
      if (!this.address || !window.localWeb3.utils.isAddress(this.address.trim())) {
        this.error = 'Invalid address';
        return;
      }
      this.loading = true;
      try {
        return saveContractAddress(this.account, this.address.trim().toLowerCase(), this.netId, this.isDefaultContract)
          .then((added, error) => {
            if (error) {
              throw error;
            }
            if (added) {
              this.$emit('added', this.address);
              this.show = false;
              this.address = null;
            } else {
              this.error = `Address is not recognized as ERC20 Token contract's address`;
            }
            this.loading = false;
          })
          .catch((err) => {
            console.debug('saveContractAddress method - error', err);
            this.loading = false;
            this.error = `${err}`;
          });
      } catch (e) {
        console.debug('saveContractAddress method - error', e);
        this.loading = false;
        this.error = `${e}`;
      }
    },
  },
};
</script>
