<template>
  <header class="header fixed">
    <div class="logo">
      <img src="@/assets/main/p1/icon_logo_t.png">
    </div>
    <ul class="menu-list">
      <li :class="{'active': currentSection === 'gameplay'}"><a href="/gameplay">GamePlay</a></li>
      <li :class="{'active': currentSection === 'nft'}"><a href="/nft">NFT</a></li>
      <li :class="{'active': currentSection === 'tokennomic'}"><a href="/tokennomic">Tokennomic</a></li>
      <li :class="{'active': currentSection === 'team'}" ><a href="/team">Team</a></li>
      <li :class="{'active': currentSection === 'roadmap'}"><a href="/roadmap">Roadmap</a></li>
    </ul>
    <div class="right-part">
      <div class="login-btn" v-if="!accountId" @click="collectToWallet">
        <img src="@/assets/202202/loginbutton@2x.png" alt="login"/>
      </div>
      <div class="login-btn" v-if="accountId" @click="disconnectWallet">
        Logout
      </div>
      <div class="market-btn" @click="comingSoon">
        <img src="@/assets/202202/btn-market@2x.png" alt="marketplace"/>
      </div>
    </div>
  </header>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { Message } from 'element-ui'
import { AppModule } from '@/store/modules/app'
import { BlockChain } from '@/utils/blockchain'

declare module 'vue/types/vue' {
  interface Vue {
    currentSection?: string
  }
}

@Component({
  name: 'DesktopHeader',
  components: {
  },
  props: ['currentSection']
})
export default class extends Vue {
  private dropShow = false
  bc = new BlockChain();

  changeSection(e: PointerEvent) {
    this.dropShow = false
    const target = e.currentTarget as HTMLElement
    if (target) {
      this.$emit('section-change', target.dataset.menuanchor)
    }
  }

  async disconnectWallet() {
    return this.bc.disconnect()
  }

  async collectToWallet() {
    return this.bc.connect()
  }

  toggleDrop() {
    this.dropShow = !this.dropShow
  }

  get accountId() {
    return AppModule.accountId
  }

  comingSoon() {
    Message({
      message: 'coming soon',
      type: 'info',
      duration: 5 * 1000
    })
  }
}
</script>

<style lang="scss" scoped>
.header{
  display: flex;
  justify-content: space-between;
  height: 66px;
  .logo{
    width: 25%;
    display: flex;
    align-items: center;
    justify-content: center;
    img{
      width: 55px;
      height: 55px;
    }
  }
  .menu-list{
    list-style: none;
    display: flex;
    gap: 60px;
    li{
      color: #5B5B5B;
      padding-top: 8px;
      cursor: pointer;
      font-size: 14px;
      a {
        color: unset;
        text-decoration: unset;
      }
      &.active{
        color: #C5C5C5;
        position: relative;
      }
      &.active::after{
        content: "\2022";
        color: #FFA32E;
        font-weight: bold;
        position: absolute;
        width: 1em;
        bottom: -1em;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
      }
    }
  }
  .right-part{
    width: 20%;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 44px;
    .login-btn{
      cursor: pointer;
      color: #5B5B5B;
    }
    .market-btn{
      cursor: pointer;
    }
  }
}
</style>
