<template>
<approve-region>
  <slot v-if="status===Status.OK" v-bind="$props"/>
  <v-card v-if="status!==Status.OK" rounded="0">
    <v-card-title>
<!--      <v-icon icon="mdi-hand-wave" color="grey"/>-->
      Welcome to Dexorder!
    </v-card-title>
    <v-card-text>
      Play with the order builder without an account by clicking on the <logo class="logo-small"/> logo or on
      the <v-icon icon="mdi-chart-timeline-variant"/> button.
    </v-card-text>
    <div v-if="status===Status.NEEDS_PLUGIN">
      <v-card-text>
        A cryptocurrency wallet such as <a href="https://metamask.io/download/" target="MetaMask">MetaMask</a> is
        required to use Dexorder. Please install a crypto wallet into your browser to experience the power of
        Dexorder.
      </v-card-text>
      <v-card-actions>
        <v-btn prepend-icon="mdi-reload" text="Reload After Installing Wallet" @click="reload"/>
      </v-card-actions>
    </div>

    <div v-if="status===Status.NEEDS_NETWORK">
      <v-card-text>
        Please connect your wallet to the Arbitrum One network to continue.
      </v-card-text>
    </div>

    <v-card-actions v-if="status>Status.NEEDS_PLUGIN">
      <btn v-if="pluginOk" icon="mdi-wallet-outline" color="green-accent-4" variant="flat"
           @click="connect" :disabled="disabled" text="Connect Wallet" class="connect-wallet-btn"/>
    </v-card-actions>

  </v-card>
  <terms-of-service v-if="status===Status.OK"/>
</approve-region>
</template>

<script setup>
import {useStore} from "@/store/store";
import {computed, ref} from "vue";
import {addNetworkAndConnectWallet} from "@/blockchain/wallet.js";
import Btn from "@/components/Btn.vue";
import Logo from "@/components/Logo.vue";
import ApproveRegion from "@/components/ApproveRegion.vue";
import TermsOfService from "@/components/TermsOfService.vue";
import {track} from "@/track.js";

const s = useStore()
const disabled = ref(false)

const Status = {
  NEEDS_PLUGIN: -3,
  NEEDS_NETWORK: -2,
  NEEDS_ACCOUNT: -1,
  OK: 0,
}

const pluginOk = window.ethereum !== undefined
const status = computed(() =>
    !pluginOk ? Status.NEEDS_PLUGIN :
    !s.chainInfo ? Status.NEEDS_NETWORK :
    !s.account ? Status.NEEDS_ACCOUNT : Status.OK)

function reload() {
  window.location.reload()
}

async function connect() {
  disabled.value = true
  try {
    await addNetworkAndConnectWallet(s.chainId);
  }
  finally {
    disabled.value = false
  }
}

</script>

<style scoped lang="scss">
@use "src/styles/vars" as *;
#manualsetup td {
  text-align: right;
}
#manualsetup tr td:last-child {
  padding-left: 1em;
}

:deep(.connect-wallet-btn) {
  background-color: #00ff41 !important;
  color: #000 !important;
  font-weight: 600;
  box-shadow: 0 0 8px rgba(0, 255, 65, 0.3) !important;
}

:deep(.connect-wallet-btn:hover) {
  background-color: #00cc34 !important;
  box-shadow: 0 0 12px rgba(0, 255, 65, 0.4) !important;
}
</style>
