<template>
  <v-card flat>
    <v-card-title v-if="processing">
      Operation in progress...
      <a v-if="transactionHash" :href="transactionEtherscanLink" target="_blank"> See it on etherscan</a>
    </v-card-title>
    <v-card-title v-else-if="contractAddress" class="alert alert-success">
      <i class="uiIconSuccess"></i>
      Contract created under address:
      <wallet-address :value="contractAddress" />
      <a :href="tokenEtherscanLink" target="_blank"> See it on etherscan</a>
    </v-card-title>
    <v-card-title v-else-if="processed" class="alert alert-success">
      <i class="uiIconSuccess"></i>
      Transaction processed successfully.
      <a v-if="transactionHash" :href="transactionEtherscanLink" target="_blank"> See it on etherscan</a>
    </v-card-title>
    <v-card-text v-else>
      <div v-if="transactionFee">
        Estimated deployment gas: <code>{{ gas }} gas ({{ toFixed(transactionFee) }} {{ fiatSymbol }})</code>
      </div>
      <slot></slot>
      <h4 v-if="!storedPassword">Your wallet password</h4>
      <v-text-field
        v-if="!storedPassword"
        v-model="walletPassword"
        :append-icon="walletPasswordShow ? 'visibility_off' : 'visibility'"
        :type="walletPasswordShow ? 'text' : 'password'"
        :disabled="processing"
        name="walletPassword"
        placeholder="Enter your wallet password"
        counter
        autocomplete="current-passord"
        @click:append="walletPasswordShow = !walletPasswordShow" />
    </v-card-text>
    <v-card-actions>
      <v-btn v-if="contractAddress || processed" color="primary" @click="$emit('next')">Next</v-btn>
      <v-btn v-else :disabled="disabledButton" :loading="processing" color="primary" @click="$emit('proceed', walletPassword)">{{ buttonTitle }}</v-btn>
    </v-card-actions>
  </v-card>
</template>

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

import {getAddressEtherscanlink, getTransactionEtherscanlink} from '../WalletUtils.js';

export default {
  components: {
    WalletAddress
  },
  props: {
    networkId: {
      type: Number,
      default: function() {
        return 0;
      }
    },
    contractAddress: {
      type: String,
      default: function() {
        return null;
      }
    },
    buttonTitle: {
      type: String,
      default: function() {
        return null;
      }
    },
    gas: {
      type: String,
      default: function() {
        return null;
      }
    },
    processed: {
      type: Boolean,
      default: function() {
        return false;
      }
    },
    storedPassword: {
      type: Boolean,
      default: function() {
        return false;
      }
    },
    processing: {
      type: Boolean,
      default: function() {
        return false;
      }
    },
    disabledButton: {
      type: Boolean,
      default: function() {
        return false;
      }
    },
    fiatSymbol: {
      type: String,
      default: function() {
        return null;
      }
    },
    transactionHash: {
      type: String,
      default: function() {
        return null;
      }
    },
    transactionFee: {
      type: Number,
      default: function() {
        return 0;
      }
    }
  },
  data () {
    return {
      tokenParentEtherscanLink: '',
      transactionParentEtherscanLink: '',
      walletPassword: '',
      walletPasswordShow: false,
      mandatoryRule: [
        (v) => !!v || 'Field is required'
      ]
    };
  },
  computed: {
    tokenEtherscanLink() {
      if (this.contractAddress) {
        return `${this.tokenParentEtherscanLink}${this.contractAddress}`;
      }
    },
    transactionEtherscanLink() {
      if (this.transactionHash) {
        return `${this.transactionParentEtherscanLink}${this.transactionHash}`;
      }
    }
  },
  created() {
    this.tokenParentEtherscanLink = getAddressEtherscanlink(this.networkId);
    this.transactionParentEtherscanLink = getTransactionEtherscanlink(this.networkId);
  }
};
</script>