<template>
  <header class="bg-dark">
    <!-- Top Banner -->
    <div class="top-banner">
      <!-- <span>Here is your chance to WIN BIG! Our first ever lottery and airdrop are here. Go to <a href="https://twitter.com/MetaDexDao" target="_blank">Twitter @metadexdao</a> to know more.</span> -->
    </div>
    <!-- Fixed navbar -->
    <nav class="navbar navbar-expand-md navbar-dark">
      <div class="container-fluid">
        <a class="navbar-brand" href="#"
        ><img
            class="logo-metadexdao"
            src="@/assets/navbar_logo.png"
        />&nbsp;&nbsp;<img
            class="logo-type"
            src="@/assets/logotype.png"
        /></a
        >
        <button
            aria-controls="navbarCollapse"
            aria-expanded="false"
            aria-label="Toggle navigation"
            class="navbar-toggler"
            data-bs-target="#navbarCollapse"
            data-bs-toggle="collapse"
            type="button"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div id="navbarCollapse" class="collapse navbar-collapse">
          <ul class="navbar-nav me-auto mb-2 mb-md-0">
            <li class="nav-item">
              <!-- <router-link
                  :class="linkClass"
                  :to="targetBonding"
                  aria-current="page"
                  class="nav-link"
              >{{ $t(i18nConst.headerBonding) }}
              </router-link
              > -->
              <router-link
                  :class="linkClass"
                  :to="targetLiquidityPool"
                  aria-current="page"
                  class="nav-link"
              >{{ $t(i18nConst.headerBonding) }}
              </router-link
              >
            </li>
            <li class="nav-item">
              <router-link
                  :class="linkClass"
                  :to="targetEarn"
                  aria-current="page"
                  class="nav-link"
              >{{ $t(i18nConst.headerEarn) }}
              </router-link
              >
            </li>
            <li class="nav-item">
              <router-link
                  :class="linkClass"
                  :to="targetStaking"
                  aria-current="page"
                  class="nav-link"
              >{{ $t(i18nConst.headerStaking) }}
              </router-link
              >
            </li>
            <!-- <li class="nav-item">
              <router-link
                  :class="linkClass"
                  :to="targetLiquidityPool"
                  aria-current="page"
                  class="nav-link"
              >{{ $t(i18nConst.headerLiquidityPool) }}
              </router-link
              >
            </li> -->
            <!-- <li class="nav-item">
              <router-link
                  :class="linkClass"
                  :to="targetLottery"
                  aria-current="page"
                  class="nav-link"
              >{{ $t(i18nConst.headerLottery) }}
              </router-link
              >
            </li> -->
            <li class="nav-item">
              <router-link
                  :class="linkClass"
                  :to="targetGovernance"
                  aria-current="page"
                  class="nav-link"
              >{{ $t(i18nConst.headerGovernance) }}
              </router-link
              >
            </li>
            <li class="nav-item">
              <router-link
                  :class="linkClass"
                  :to="targetMyPage"
                  aria-current="page"
                  class="nav-link position-relative label-for-vignette"
              >{{ $t(i18nConst.headerMyPage) }}
              <div v-if="rewards > 0" class="vignette">1</div>
              </router-link
              >
            </li>
            
            <!-- <li class="nav-item">
              <a class="nav-link" :class="linkClass" href="" target="blank">{{ $t(i18nConst.headerLearnMore) }}</a>
            </li> -->
          </ul>

          <!-- <a v-if="account && isConnected && selectedNetwork" id="selectedNetworkLink" class="btn btn-outline-secondary me-1" href="#">
            <img :alt="selectedNetwork" :src="imgSelectedNetwork" class="blockchain-logo"/> {{ selectedNetwork }}
          </a> -->

          <!-- <button v-if="displayBalance" class="navbar-toggler balances" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div v-if="displayBalance" class="balance-drop-down balances" id="navbarNavDarkDropdown">
            <ul class="navbar-nav">
              <li class="nav-item dropdown">

                <a class="dropdown-toggle btn btn-light me-1 btn-balance" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                  <img src="@/assets/logo_blackback.png" class="img-metadex" />{{ utils.formatDisplayAmountMetadexWithEthers(balanceNotFormatted) }}
                </a>
                <ul class="dropdown-menu dropdown-menu-dark list-balances">
                  <li><img src="@/assets/logo_blackback.png" class="img-metadex" />{{ utils.formatDisplayAmountMetadexWithEthers(balanceNotFormatted) }}</li>
                  <li><img src="@/assets/usd_coin_usdc_logo.png" class="img-metadex" />{{ utils.formatDisplayAmountUsdcWithEthers(balanceUsdcNotFormatted) }}</li>
                </ul>
              </li>
            </ul>
          </div> -->

          <button v-if="metamaskAvailable" id="connectBtn" class="btn btn-light" @click="connect">
            <img class="img-metamask" src="@/assets/metamask.png"/>
            {{ accountForDisplay }}
          </button>
          <span v-else class="metamaskUnavailable">Please install Metamask</span>
          <div class="dropdown ">
            <button id="dropdownMenuButton1" aria-expanded="false" class="btn" data-bs-toggle="dropdown" type="button">
              <img :src="getLocaleFlag" class="img-flag"/>
            </button>
            <ul aria-labelledby="dropdownMenuButton1" class="dropdown-menu">
              <li @click="setLocale('en')"><img :src="getFlag('en')" class="img-flag-small"/></li>
              <li @click="setLocale('fr')"><img :src="getFlag('fr')" class="img-flag-small"/></li>
            </ul>
          </div>
        </div>
      </div>
    </nav>
  </header>
</template>

<script>
import {mapGetters} from "vuex";
import typeActions from "@/store/typeActions.js";
import routesPath from "@/router/routesPath";
import constantes from "@/constantes/constantes.js";
import i18nConstantes from "@/constantes/i18n.constantes.js";
import cryptoContantes from "@/constantes/cryptos.constantes.js";
import web3Utils from "@/utils/web3.utils.js"; 
import constantesService from "@/services/constantes.service";

export default {
  data() {
    return {
      flagEnglish: '',
      i18nConst: i18nConstantes,
      cryptoConst: cryptoContantes,
      utils: web3Utils,
      lotteryAvailable: constantesService.getConstanteNetwork("lotteryAvailable")
    };
  },
  computed: {
    ...mapGetters("global", ["metamaskAvailable", "account", "balance", "balanceUsdc", "balanceNotFormatted", "balanceUsdcNotFormatted",
      "selectedNetwork", "imgSelectedNetwork", "wrongNetwork", "isConnected", "web3"]),
    ...mapGetters("rewards", ["rewards"]),
    targetHome() {
      return {path: routesPath.home};
    },
    targetBonding() {
      return {path: routesPath.bonding};
    },
    targetEarn() {
      return {path: routesPath.earn};
    },
    targetLiquidityPool() {
      return {path: routesPath.liquidityPool};
    },
    targetLottery() {
      return {path: routesPath.lottery};
    },
    targetGovernance() {
      return {path: routesPath.governance};
    },
    targetMyPage() {
      return {path: routesPath.myPage};
    },
    targetStaking() {
      return {path: routesPath.staking};
    },
    linkClass() {
      if (this.account && this.isConnected) {
        return "active";
      } else {
        return "disabled";
      }
    },
    accountForDisplay() {
      if (this.account && this.isConnected) {
        return (
            this.account.substring(0, 5) +
            "..." +
            this.account.substring(this.account.length - 4, this.account.length)
        );
      } else {
        return this.$t(i18nConstantes.headerMetamaskButton);
      }
    },
    displayBalance() {
      let display = false;
      if (this.account && this.account !== '' && this.balance >=0 && this.balance !== '' && !this.wrongNetwork && this.isConnected) {
        display = true;
      }
      return display;
    },
    getLocaleFlag() {
      return this.getFlag(this.$i18n.locale);
    },
  },
  methods: {
    async connect() {
      // if (window && window.ethereum) {
      //   const accounts = await window.ethereum.request({method: "eth_requestAccounts"});
      //   console.log("accounts test => ", accounts);
      //   alert(accounts[0]);
      // } else {
      //   alert(window.ethereum);
      // }

      if (!this.account || !this.isConnected) {
        this.$store.dispatch(typeActions.switchNetwork, {
          what: constantes.chains.polygon.testnet.name,
        });
        // this.$store.dispatch(typeActions.connect);
      } else {
        this.$store.dispatch(typeActions.disconnect);
        this.$router.push(routesPath.home);
      }
    },
    setLocale(locale) {
      this.$i18n.locale = locale;
    },
    getFlag(locale) {
      let flag = constantes.flags.english;
      switch (locale) {
        case "en":
          flag = constantes.flags.english;
          break;
        case "fr":
          flag = constantes.flags.french;
          break;
        default:
          break;
      }
      return flag;
    }
  },
  mounted() {
    this.$store.dispatch(typeActions.isMetamaskConnected);
    setTimeout(() => {
      this.$store.dispatch(typeActions.getRewardsAmount);  
    }, 200);
    
  }
};
</script>

<style lang="scss" scoped>
.logo-type {
  width: 230px;
  height: 30px;
}

.logo-metadexdao {
  width: 45px;
  height: 45px;
}
.img-metamask {
  width: 20px;
}

.btn-balance {
  display: flex;
  align-items: center;
  margin-right: 0.2rem;
  color: black;
}

.img-metadex {
  width: 20px;
  margin-right: 0.3rem;
}

.metamask-btn {
  text-align: end;
}

.blockchain-logo {
  width: 20px;
}

.img-flag {
  width: 30px;
  /*margin: 1rem;*/
}

.img-flag-small {
  width: 30px;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 4px;
  margin-bottom: 4px;
}

.metamaskUnavailable {
  color: aliceblue;
}

.list-balances {
  width: 15rem;
  padding-left: 0.2rem;
}

.balances {
  @media screen and (max-width: 420px) {
    display: none;
  }
}

.vignette {
  position: absolute;
  display: flex;
  right: 0px;
  top: 4px;
  background-color: var(--blue-custom);;
  color:white;
  border-radius: 25px;
  width: 19px;
  justify-content: center;
  align-items: center;
  z-index: -5;
  font-size: small;
  @media screen and (max-width: 420px) {
    top: 4px;
    left: 55px;
    right:auto;

  }
}

.label-for-vignette {
  z-index: 10;
}

.top-banner {
    width: 100%;
    position: relative;
    background-color:orange;
    color: white;
    text-align: center;
}

</style>
