<template>
  <v-dialog v-model="dialog" content-class="uiPopup" width="500px" max-width="100vw" @keydown.esc="dialog = false">
    <v-btn v-if="icon" slot="activator" :disabled="disabled" class="bottomNavigationItem" title="Request funds" flat value="request">
      <span>Request</span>
      <v-icon>fa-comment-dollar</v-icon>
    </v-btn>
    <button v-else slot="activator" class="btn ml-1 mt-2">Request</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">Request funds</span>
      </div>
      <div v-if="error && !loading" class="alert alert-error v-content">
        <i class="uiIconError"></i>{{ error }}
      </div>
      <v-card-text>
        <address-auto-complete
          v-if="selectedAccount"
          ref="autocomplete"
          :disabled="loading"
          input-label="Recipient"
          input-placeholder="Select a recipient for your funds request"
          no-address
          @item-selected="recipient = $event" />

        <v-container flat fluid grid-list-lg class="mt-4 pl-2">
          <v-layout row wrap>
            <v-text-field
              v-if="selectedAccount"
              v-model.number="amount"
              :disabled="loading"
              name="amount"
              label="Amount"
              placeholder="Select a suggested amount to request funds" />

            <div id="requestFundsAccount" class="ml-1">
              <v-combobox
                v-model="selectedOption"
                :items="accountsList"
                attach="#requestFundsAccount"
                label="Select currency"
                placeholder="Select a currency to use for requesting funds" />
            </div>
          </v-layout>
        </v-container>

        <v-textarea
          v-if="selectedAccount"
          id="requestMessage"
          v-model="requestMessage"
          :disabled="loading"
          name="requestMessage"
          label="Request message (Optional)"
          placeholder="You can enter a custom message to send with your request"
          class="mt-4"
          rows="7"
          flat
          no-resize />
      </v-card-text>
      <v-card-actions>
        <v-spacer />
        <button :disabled="loading" class="btn btn-primary" @click="requestFunds">Send request</button>
        <button :disabled="loading" class="btn ml-2" @click="dialog = false">Close</button>
        <v-spacer />
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

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

export default {
  components: {
    AddressAutoComplete
  },
  props: {
    icon: {
      type: Boolean,
      default: function() {
        return false;
      }
    },
    walletAddress: {
      type: String,
      default: function() {
        return null;
      }
    },
    accountsDetails: {
      type: Object,
      default: function() {
        return {};
      }
    },
    overviewAccounts: {
      type: Object,
      default: function() {
        return {};
      }
    },
    principalAccount: {
      type: String,
      default: function() {
        return null;
      }
    },
    refreshIndex: {
      type: Number,
      default: function() {
        return 0;
      }
    },
  },
  data() {
    return {
      selectedOption: null,
      recipient: null,
      amount: null,
      error: null,
      requestMessage: '',
      loading: false,
      dialog: false
    };
  },
  computed: {
    selectedAccount() {
      return this.selectedOption && this.selectedOption.value;
    },
    accountsList() {
      const accountsList = [];
      if (this.accountsDetails && this.refreshIndex > 0) {
        Object.keys(this.accountsDetails).forEach(key =>{
          // Check list of accounts to display switch user preferences
          const isContractOption = this.overviewAccounts.indexOf(key) > -1;
          // Always allow to display ether option
          // const isEtherOption = isContractOption || (key === this.walletAddress && (this.overviewAccounts.indexOf('ether') > -1 || this.overviewAccounts.indexOf('fiat') > -1));
          const isEtherOption = isContractOption || (key === this.walletAddress);
          if (isContractOption || isEtherOption) {
            accountsList.push({
              text: this.accountsDetails[key].title,
              value: this.accountsDetails[key]
            });
          }
        });
      }
      return accountsList;
    }
  },
  watch: {
    dialog() {
      if (this.dialog) {
        this.requestMessage = '';
        this.recipient = null;
        this.amount = null;
        if (this.$refs && this.$refs.autocomplete) {
          this.$refs.autocomplete.clear();
        }
        const contractAddress = this.principalAccount === 'ether' || this.principalAccount === 'fiat' ? null : this.principalAccount;
        this.selectedOption = this.accountsList.find(account => account.value && account.value.address && ((account.value.isContract && account.value.address === contractAddress) || (!account.value.isContract && !contractAddress)));
      }
    }
  },
  methods: {
    requestFunds() {
      if (!this.selectedAccount) {
        this.error = 'Please select a valid account';
        return;
      }

      if (!this.recipient) {
        this.error = 'Please select a receipient to your request';
        return;
      }

      this.loading = true;
      fetch('/portal/rest/wallet/api/account/requestFunds', {
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        },
        credentials: 'include',
        body: JSON.stringify({
          address: this.walletAddress,
          receipient: this.recipient.id,
          receipientType: this.recipient.type,
          contract: this.selectedAccount.isContract ? this.selectedAccount.address : null,
          amount: this.amount,
          message: this.requestMessage
        })
      }).then(resp => {
        if (resp && resp.ok) {
          this.dialog = false;
        } else {
          this.error = 'Error requesting funds';
        }
        this.loading = false;
      }).catch (e => {
        console.debug("requestFunds method - error", e);
        this.error = `Error while proceeding: ${e}`;
        this.loading = false;
      });
    }
  }
};
</script>