<template>
  <v-card class="text-xs-center pr-3 pl-3 pt-2" flat>
    <v-card-title>
      The following settings manages the funds holder and the amount of initial funds to send for a user that has created a new wallet for the first time.
      You can choose to set initial funds for a token to 0 so that no funds will be send.
      The funds holder will receive a notification per user per currency (ether and/or token).
    </v-card-title>
    <v-card-text>
      <v-flex id="fundsHolderAutoComplete" class="contactAutoComplete">
        <v-autocomplete
          v-if="sameConfiguredNetwork"
          ref="fundsHolderAutoComplete"
          v-model="fundsHolder"
          :items="fundsHolderOptions"
          :loading="isLoadingSuggestions"
          :search-input.sync="fundsHolderSearchTerm"
          attach="#fundsHolderAutoComplete"
          label="Wallet funds holder"
          class="contactAutoComplete"
          placeholder="Start typing to Search a user"
          content-class="contactAutoCompleteContent"
          max-width="100%"
          item-text="name"
          item-value="id"
          hide-details
          hide-selected
          chips
          cache-items
          dense
          flat>
          <template slot="no-data">
            <v-list-tile>
              <v-list-tile-title>
                Search for a <strong>user</strong>
              </v-list-tile-title>
            </v-list-tile>
          </template>

          <template slot="selection" slot-scope="{ item, selected }">
            <v-chip :selected="selected" class="autocompleteSelectedItem">
              <span>{{ item.name }}</span>
            </v-chip>
          </template>

          <template slot="item" slot-scope="{ item, tile }">
            <v-list-tile-avatar v-if="item.avatar" tile size="20">
              <img :src="item.avatar">
            </v-list-tile-avatar>
            <v-list-tile-title v-text="item.name" />
          </template>
        </v-autocomplete>
      </v-flex>

      <v-textarea
        id="initialFundsRequestMessage"
        v-model="initialFundsRequestMessage"
        name="initialFundsRequestMessage"
        label="Initial funds request message"
        placeholder="You can enter a custom message to send with initial funds request"
        class="mt-4"
        rows="7"
        flat
        no-resize />
    </v-card-text>

    <v-card-text class="text-xs-left">
      <v-label light>Default amount of automatic initial funds request</v-label>
      <v-data-table :headers="initialFundsHeaders" :items="initialFunds" :sortable="false" hide-actions>
        <template slot="items" slot-scope="props">
          <td class="text-xs-left">
            {{ props.item.name ? props.item.name : props.item.address }}
          </td>
          <td>
            <v-text-field v-model="props.item.amount" single-line />
          </td>
        </template>
      </v-data-table>
    </v-card-text>
    <v-card-actions>
      <v-spacer />
      <button class="btn btn-primary mb-3" @click="save">
        Save
      </button>
      <v-spacer />
    </v-card-actions>
  </v-card>
</template>
<script>
import {searchUsers} from '../WalletAddressRegistry.js';

export default {
  props: {
    defaultNetworkId: {
      type: String,
      default: function() {
        return null;
      }
    },
    sameConfiguredNetwork: {
      type: Boolean,
      default: function() {
        return false;
      }
    },
    loading: {
      type: Boolean,
      default: function() {
        return false;
      }
    },
    contracts: {
      type: Array,
      default: function() {
        return [];
      }
    }
  },
  data () {
    return {
      fundsHolder: '',
      fundsHolderOptions: [],
      fundsHolderSearchTerm: null,
      isLoadingSuggestions: false,
      initialFunds: [],
      initialFundsHeaders: [
        {
          text: 'Name',
          align: 'left',
          sortable: false,
          value: 'name'
        },
        {
          text: 'Amount',
          align: 'center',
          sortable: false,
          value: 'amount'
        }
      ]
    };
  },
  watch: {
    contracts() {
      this.reloadInitialFunds();
    },
    initialFunds() {
      this.$emit("initial-funds-loaded", this.initialFunds);
    },
    fundsHolderSearchTerm() {
      if (!this.fundsHolderSearchTerm || !this.fundsHolderSearchTerm.length) {
        return;
      }
      this.isLoadingSuggestions = true;
      searchUsers(this.fundsHolderSearchTerm, true)
        .then(items => {
          if (items) {
            this.fundsHolderOptions = items;
          } else {
            this.fundsHolderOptions = [];
          }
          this.isLoadingSuggestions = false;
        })
        .catch((e) => {
          console.debug("searchUsers method - error", e);
          this.isLoadingSuggestions = false;
        });
    },
    fundsHolder(newValue, oldValue) {
      if (oldValue) {
        this.fundsHolderSearchTerm = null;
        // A hack to close on select
        // See https://www.reddit.com/r/vuetifyjs/comments/819h8u/how_to_close_a_multiple_autocomplete_vselect/
        this.$refs.fundsHolderAutoComplete.isFocused = false;
      }
    }
  },
  methods: {
    init() {
      if (window.walletSettings.fundsHolder) {
        this.fundsHolder = window.walletSettings.fundsHolder;
        searchUsers(this.fundsHolder, true)
          .then(items => {
            if (items) {
              this.fundsHolderOptions = items;
            } else {
              this.fundsHolderOptions = [];
            }
          });
      }
      this.initialFundsRequestMessage = window.walletSettings.initialFundsRequestMessage;
      this.reloadInitialFunds();
    },
    reloadInitialFunds() {
      if(!window.walletSettings) {
        return [];
      }
      this.initialFunds = [];
      if (!window.walletSettings.initialFunds) {
        this.initialFunds = [{name : 'ether', address : 'ether', amount : 0}];
        if(this.contracts) {
          this.contracts.forEach(contract => {
            this.initialFunds.push({name : contract.name, address : contract.address,  amount : 0});
          });
        }
      } else {
        // Add newly added contracts
        this.contracts.forEach(contract => {
          const contractDetails = window.walletSettings.initialFunds.find(tmpContract => tmpContract.address === contract.address);
          if(!contractDetails) {
            window.walletSettings.initialFunds.push({name : contract.name, address : contract.address,  amount : 0});
          } else if(contractDetails.address === 'ether') {
            contractDetails.name = 'ether';
          } else  {
            contractDetails.name = contract.name;
          }
        });

        window.walletSettings.initialFunds.forEach(contract => {
          const contractDetails = this.contracts.find(tmpContract => tmpContract.address === contract.address);
          if (contractDetails || contract.address === 'ether') {
            this.initialFunds.push(contract);
          }
        });
      }
    },
    save() {
      const initialFundsMap = {};
      if (this.initialFunds && this.initialFunds.length) {
        this.initialFunds.forEach(initialFund => {
          initialFundsMap[initialFund.address] = initialFund.amount;
        });
      }
      const globalSettings = {
        fundsHolder: this.fundsHolder,
        fundsHolderType: 'user',
        initialFundsRequestMessage: this.initialFundsRequestMessage,
        initialFunds: initialFundsMap
      };
      this.$emit('save', globalSettings);
    }
  }
};
</script>