<template>
  <v-flex id="walletSetup" class="text-xs-center">
    <template v-if="isMinimized">
      <template v-if="displayWarnings">
        <div
          v-if="displayWalletBackup"
          id="walletBackupWarning"
          class="alert alert-warning mt-0">
          <i class="uiIconWarning"></i> Your wallet is not backed up yet.
          <wallet-backup-modal
            ref="walletBackupModal"
            class="mr-3"
            display-complete-message
            @copied="hideBackupMessage()" />
        </div>
        <div
          v-if="displayResetPassword"
          id="walletResetPasswordWarning"
          class="alert alert-warning mt-1">
          <i class="uiIconWarning"></i> Your wallet is not secured yet.
          <wallet-reset-modal
            ref="walletResetModal"
            class="ml-3"
            button-label="Set a password"
            @reseted="refreshAutoGenerated()" />
        </div>
      </template>
    </template>
    <v-snackbar
      v-else
      id="walletsSetupWarnings"
      v-model="displayWarnings"
      :timeout="0"
      color="transparent">
      <a
        aria-hidden="true"
        class="uiIconClose pull-right"
        @click="warningsClosed = true"></a>
      <div
        v-if="displayWalletBackup"
        id="walletBackupWarning"
        class="alert alert-warning no-wrap">
        <i class="uiIconWarning"></i> Your wallet is not backed up yet.
        <wallet-backup-modal
          ref="walletBackupModal"
          class="mr-3"
          display-complete-message
          @copied="hideBackupMessage()" />
      </div>
      <div
        v-if="displayResetPassword"
        id="walletResetPasswordWarning"
        class="alert alert-warning no-wrap">
        <i class="uiIconWarning"></i> Your wallet is not secured yet.
        <wallet-reset-modal
          ref="walletResetModal"
          class="ml-3"
          button-label="Set a password"
          @reseted="refreshAutoGenerated()" />
      </div>
    </v-snackbar>

    <div v-if="displayWalletCreationToolbar" class="alert alert-info">
      <i class="uiIconInfo"></i> <span v-if="isSpace">
        No private key was found in current browser. <strong>
          Space wallet
        </strong> is displayed in readonly mode.
      </span> <span v-else>
        No private key was found in current browser. <strong>
          Your wallet
        </strong> is displayed in readonly mode.
      </span> <a
        v-if="!displayWalletSetup"
        href="javascript:void(0);"
        @click="displayWalletSetupActions()">
        More options
      </a>
    </div>

    <div v-if="displayWalletNotExistingYet" class="alert alert-info">
      <i class="uiIconInfo"></i> Space administrator hasn't set a Wallet for this space yet
    </div>
    <wallet-metamask-setup
      v-else-if="useMetamask"
      ref="walletMetamaskSetup"
      :is-space="isSpace"
      :is-space-administrator="isSpaceAdministrator"
      :wallet-address="walletAddress"
      :refresh-index="refreshIndex"
      :is-administration="isAdministration"
      :loading="loading"
      @loading="$emit('loading')"
      @refresh="refresh()"
      @end-loading="$emit('end-loading')"
      @error="$emit('error', $event)" />
    <wallet-browser-setup
      v-else-if="displayWalletSetup"
      ref="walletBrowserSetup"
      :is-space="isSpace"
      :is-space-administrator="isSpaceAdministrator"
      :refresh-index="refreshIndex"
      :is-administration="isAdministration"
      :loading="loading"
      @configured="refresh()"
      @loading="$emit('loading')"
      @end-loading="$emit('end-loading')"
      @error="$emit('error', $event)" />
  </v-flex>
</template>

<script>
import WalletBrowserSetup from './WalletBrowserSetup.vue';
import WalletMetamaskSetup from './WalletMetamaskSetup.vue';
import WalletBackupModal from './WalletBackupModal.vue';
import WalletResetModal from './WalletResetModal.vue';

import {watchMetamaskAccount, setWalletBackedUp} from '../WalletUtils.js';

export default {
  components: {
    WalletBrowserSetup,
    WalletMetamaskSetup,
    WalletResetModal,
    WalletBackupModal,
  },
  props: {
    isSpace: {
      type: Boolean,
      default: function() {
        return false;
      },
    },
    loading: {
      type: Boolean,
      default: function() {
        return false;
      },
    },
    isAdministration: {
      type: Boolean,
      default: function() {
        return false;
      },
    },
    walletAddress: {
      type: String,
      default: function() {
        return null;
      },
    },
    refreshIndex: {
      type: Number,
      default: function() {
        return 0;
      },
    },
    isMinimized: {
      type: Boolean,
      default: function() {
        return false;
      },
    },
  },
  data() {
    return {
      useMetamask: false,
      isReadOnly: false,
      isSpaceAdministrator: false,
      browserWalletPasswordAutoGenerated: false,
      browserWalletExists: false,
      displayWalletSetup: false,
      browserWalletBackedUp: false,
      detectedMetamaskAccount: null,
      warningsClosed: false,
    };
  },
  computed: {
    displayWarnings() {
      return !this.loading && !this.warningsClosed && (this.displayWalletBackup || this.displayResetPassword);
    },
    displayWalletNotExistingYet() {
      return !this.loading && !this.isAdministration && this.isSpace && !this.isSpaceAdministrator && !this.walletAddress;
    },
    displayWalletCreationToolbar() {
      return !this.loading && this.walletAddress && !this.useMetamask && !this.browserWalletExists && this.isReadOnly && (!this.isSpace || this.isSpaceAdministrator);
    },
    displayWalletBackup() {
      return !this.loading && !this.isAdministration && this.walletAddress && !this.useMetamask && this.browserWalletExists && !this.browserWalletBackedUp;
    },
    displayResetPassword() {
      return !this.loading && !this.isAdministration && this.walletAddress && !this.useMetamask && this.browserWalletExists && this.browserWalletPasswordAutoGenerated;
    },
  },
  watch: {
    refreshIndex() {
      this.init();
    },
  },
  created() {
    document.addEventListener('exo-wallet-metamask-changed', this.refresh);
  },
  methods: {
    refresh() {
      this.$emit('refresh');
    },
    init() {
      if (!window.walletSettings) {
        return;
      }
      this.isReadOnly = window.walletSettings.isReadOnly;
      this.browserWalletExists = window.walletSettings.browserWalletExists;
      this.useMetamask = window.walletSettings.userPreferences.useMetamask;
      this.isSpaceAdministrator = window.walletSettings.isSpaceAdministrator;
      this.browserWalletBackedUp = window.walletSettings.userPreferences.backedUp;
      this.browserWalletPasswordAutoGenerated = window.walletSettings.userPreferences.autoGenerated;

      this.displayWalletSetup = !this.walletAddress && (!this.isSpace || this.isSpaceAdministrator);

      if (this.useMetamask && window.walletSettings.enablingMetamaskAccountDone) {
        this.$nextTick(() => watchMetamaskAccount(window.walletSettings.detectedMetamaskAccount));
      }
      this.$nextTick(() => {
        if (this.$refs.walletBrowserSetup) {
          this.$refs.walletBrowserSetup.init();
        } else if (this.$refs.walletMetamaskSetup) {
          this.$refs.walletMetamaskSetup.init();
        }
      });
    },
    displayWalletSetupActions() {
      this.displayWalletSetup = true;
    },
    refreshAutoGenerated() {
      this.browserWalletPasswordAutoGenerated = window.walletSettings.userPreferences.autoGenerated;
      this.$emit('refresh');
    },
    hideBackupMessage() {
      setWalletBackedUp(null, true);
      this.browserWalletBackedUp = true;
    },
  },
};
</script>
