<template>
  <div>
    <div class="top-header" v-if="!mobile" style="">
      <div class="viewLogo">
        <a href="/">
          <img
            class="logo"
            alt="logo"
            src="@/assets/main/p1/icon_logo_t.png" />
        </a>
      </div>
      <div class="header-menu">
        <a class="menu-item" href="/">
          <div class="item" >Home</div>
        </a>
        <a class="menu-item" href="/mall" >
          <div class="item" :class="{'active': currentTab==='official'}">
            Official Shop
            <div class="active-bottom" v-if="currentTab==='official'"></div>
          </div>
        </a>
        <a class="menu-item" href="/market" >
          <div class="item " :class="{'active': currentTab==='market'}">
            Marketplace
            <div class="active-bottom" v-if="currentTab==='market'"></div>
          </div>
        </a>
        <a class="menu-item" href="/mysteryboxes" >
          <div class="item " :class="{'active': currentTab==='mystery'}">
            MysteryBoxes
            <div class="active-bottom" v-if="currentTab==='mystery'"></div>
          </div>
        </a>
        <a class="menu-item" href="/eventreward" >
          <div class="item " :class="{'active': currentTab==='reward'}">
            EventReward
            <div class="active-bottom" v-if="currentTab==='reward'"></div>
          </div>
        </a>
        <a class="menu-item" href="/mynft" v-if="logined" >
          <div class="item " :class="{'active': currentTab==='mynft'}">
            MyNFT
            <div class="active-bottom" v-if="currentTab==='mynft'"></div>
          </div>
        </a>
      </div>

      <div class="rightContainer">
<!--        <div class="contact">-->
<!--          <span class="span">Contact Us</span>-->
<!--        </div>-->
        <div v-if="!logined" @click="collectToWallet" class="walletBtn active">
          <span>Connect Wallet</span>
        </div>
<!--        <div v-if="logined" @click="disconnectWallet" class="walletBtn">-->
<!--          <span>Logout</span>-->
<!--        </div>-->
        <img
          draggable="false"
          v-if="logined"
          class="avatar"
          ref="avatar"
          src="@/assets/main/avatar/n_aoi.png"
          alt="avatar"
          @click="infoPanelShow=!infoPanelShow"
        >
      </div>
    </div>
    <top-user-info
      v-show="infoPanelShow && logined"
      v-on:close-self="onClose"
    ></top-user-info>
    <div class="mobile-header" v-if="mobile" style="">
      <a href="/"
      ><img
        class="logo"
        src="@/assets/main/p1/icon_logo_t.png"
        alt="logo"
      /></a>
      <anim-menu :menu-show="menuShow" @menu-stat-change="toggleMenu"></anim-menu>
    </div>
    <div class="nav overflow" v-if="mobile" :class="{'show': menuShow}">
      <a class="navItem" href="/">Home</a>
      <a class="navItem" href="/official" >Official Shop</a>
      <a class="navItem dash" href="/market">Marketplace</a>
      <a class="navItem dash" href="/mysteryboxes">MysteryBoxes</a>
      <a class="navItem" href="/mynft" v-if="logined">MyNFT</a>
      <label v-if="!logined" class="navItem" @click="collectToWallet">Connect Wallet</label>
      <button v-if="!logined" class="general-btn connectButton mobile" @click="collectToWallet">
        <span>Connect Wallet</span>
      </button>
<!--      <label class="navItem contact">Contact us</label>-->
      <label class="navItem profile" v-if="logined" @click="subShow=!subShow">
        <div>My Profile</div>
        <img src="data:image/svg+xml,%3csvg width='10' height='18' viewBox='0 0 10 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M0.0507022 16.0711L1.46491 17.4854L9.9502 9.00007L1.46492 0.514787L0.0507015 1.929L7.12177 9.00007L0.0507022 16.0711Z' fill='%23BCADF2' /%3e %3c/svg%3e">
      </label>
      <label class="navItem" v-if="logined" @click="disconnectWallet">Log Out</label>
      <div class="navChild" :class="{'show': subShow}">
        <label class="navItem profile" @click="subShow=!subShow">
          <img class="arrowIcon" src="data:image/svg+xml,%3csvg width='10' height='18' viewBox='0 0 10 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M0.0507022 16.0711L1.46491 17.4854L9.9502 9.00007L1.46492 0.514787L0.0507015 1.929L7.12177 9.00007L0.0507022 16.0711Z' fill='%23BCADF2' /%3e %3c/svg%3e">
          <div class="lbl">My Profile</div>
        </label>
        <a class="navItem" href="/mynft">MyNFT</a>
        <a class="navItem" href="/account" @click="comingSoon">Account Setting</a>
        <a class="navItem" href="/wallet">Wallet</a>
<!--        <label class="navItem contact">Contact us</label>-->
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import TopUserInfo from '@/components/market/TopUserInfo.vue'
import { AppModule, DeviceType } from '@/store/modules/app'
import ChainManager from '@/chain/ChainManager'
import { UserModule } from '@/store/modules/user'
import AnimMenu from '@/components/core/AnimMenu.vue'

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

@Component({
  name: 'Navbar',
  components: { AnimMenu, TopUserInfo },
  props: ['currentTab']
})
export default class extends Vue {
  infoPanelShow = false
  menuShow = false
  subShow = false
  chainManager = new ChainManager()
  get mobile() {
    return AppModule.device === DeviceType.Mobile
  }

  async created() {
    await this.chainManager.init()
  }

  get hidePart() {
    return !!process.env.VUE_APP_PART_CLOSE
  }

  get logined() {
    return this.chainManager.isLogined
  }

  async collectToWallet() {
    return this.chainManager.login()
  }

  async disconnectWallet() {
    return this.chainManager.logout()
  }

  toggleMenu(stat: boolean) {
    this.menuShow = stat
    if (!this.menuShow) {
      this.subShow = false
    }
  }

  onClose() {
    this.infoPanelShow = false
  }
}
</script>

<style lang="scss" scoped>
.top-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  background: rgba(20, 16, 59, 0.8);
  box-shadow: 0 1em 1.5em rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(5em);
  z-index: 8;
  height: 5.25em;
  --tooltip-text-color: white;
  --tooltip-margin: 1.875em;
  --tooltip-arrow-size: 0.75em;
}

.top-header .header-menu {
  display: flex;
  height: 100%;
  position: relative;
  z-index: 1;
  flex: auto;
}

.top-header .header-menu .menu-item {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  text-decoration: none;
}

.top-header .header-menu .menu-item .item {
  font-weight: bold;
  font-size: 1.125em;
  color: #fff;
  height: 100%;
  align-items: center;
  justify-content: center;
  display: flex;
  width: 13.438em;
  box-sizing: border-box;
}

.top-header .header-menu .menu-item .active {
  background: linear-gradient(
      90deg,
      #FFA81E 73.48%,
      rgba(54, 43, 109, 0) 161.57%
  );
  margin-left: -2em;
  clip-path: polygon(15% 0, 100% 0, 85% 100%, 0 100%);
}

.active-bottom {
  border-bottom: 0.3125em #FF8815 solid;
  width: 120%;
  position: absolute;
  bottom: 0;
}

.top-header .viewLogo {
  display: flex;
  justify-content: center;
  width: 20vw;
}

.logo {
  height: 3rem;
}

.rightContainer {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  padding-right: 2.5em;
  z-index: 1;
}

.rightContainer .contact {
  margin-right: 1.875em;
}

.rightContainer .contact .span {
  cursor: pointer;
  font-size: 1.125em;
  color: #a796e1;
}

.connectButton {
  border-radius: 0.25em;
  background: radial-gradient(
      123.41% 70.85% at 47.63% 49.99%,
      #558ada 0%,
      #1b68db 100%
  ) !important;
  cursor: pointer;
  height: 2.75em !important;
  padding: 0 1.688em;
  font-size: 1.125em !important;
}

.connectButton span {
  text-decoration: none;

  font-weight: bold;
  font-size: 1.125em;
  line-height: 1.33;
  color: white;
}

.avatar {
  width: 3.125em;
  height: 3.125em;
  border-radius: 1.563em;
  cursor: pointer;
}
.walletBtn {
  font-size: 18px;
  color: white;
  text-decoration: none;
  line-height: 80px;
  height: 80px;
  cursor: pointer;
}
.walletBtn span{
  vertical-align: bottom;
  white-space: nowrap;
}
.walletBtn.active{
  background-image: url('../../assets/main/p1/btn_bg.png');
  background-repeat: repeat-x;
  background-position: 0 17px;
  padding: 0 20px;
}

@media (max-width: 767px) {
  .mobile-header {
    display: flex;
    justify-content: space-between;
    background: rgba(20,16,59,.8);
    box-shadow: 0 1em 1.5em rgba(0,0,0,0.15);
    backdrop-filter: blur(5em);
    z-index: 18;
    height: 4.75em;
    position: fixed;
    padding: 0 5%;
    top: 0;
    left: 0;
    right: 0;
    font-size: 16px;
    align-items: center;
  }
  .logo {
    max-width: 15vw;
  }
  .mobile-menu-icon {

  }
  .nav {
    width: 292px;
    font-size: 16px;
    max-width: 100%;
    background: #261858;
    position: fixed;
    bottom: 0;
    top: 0;
    right: 0;

    transform: translateX(100%);
    display: flex;
    z-index: 17;
    opacity: 0;
    transition: transform linear 0.2s, opacity linear 0.2s;
    padding: 1.5em 1.5em;
    padding-top: 4.75em;

    box-sizing: border-box;
    flex-direction: column;

    &.overflow {
      overflow: auto;
    }
    &.show{
      transform: translateX(0%);
      opacity: 1;
    }

    .connectButton {
      width: 100%;
      border-radius: 0.25em;
      background: radial-gradient(
          123.41% 70.85% at 47.63% 49.99%,
          #558ada 0%,
          #1b68db 100%
      ) !important;
      cursor: pointer;
      height: 2.75em !important;
      padding: 0 1.688em;
      font-size: 1.125em !important;
      &.mobile {
        margin-top: 1.5em;
      }
    }

    .navItem {
      font-weight: bold;
      font-size: 1.125em;
      line-height: 1.5em;
      color: #ffffff;
      padding: 1.5em 0;
      text-decoration: none;
      cursor: pointer;

      &:not(:first-child) {
        border-top: 1px solid #3d2a84;
      }

      &.contact {
        border-top: none;
        color: #a796e1;
        font-weight: normal;
      }
      &.profile {
        flex-direction: row;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-right: 0.75em;
      }
      &.dash {
        border-bottom: 1px solid #3d2a84;
      }
    }

    .navChild {
      transform: translateX(100%);
      position: absolute;
      overflow: auto;
      top: 0;
      width: 100%;
      bottom: 0;
      padding-top: 4.75em;

      display: flex;
      flex-direction: column;
      background: #261858;
      // transition: transform linear 0.15s;
      &.show {
        transform: translateX(0%);
      }
      .navItem {
        font-weight: bold;
        font-size: 1.125em;
        line-height: 1.5em;
        color: #ffffff;
        padding: 1.5em 0;

        &:not(:first-child) {
          border-top: 1px solid #3d2a84;
        }

        &.contact {
          border-top: none;
          color: #a796e1;
          font-weight: normal;
        }

        &.profile {
          flex-direction: row;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .arrowIcon {
            transform: rotate(180deg);
            margin-right: 1.188em;
          }
          .lbl {
            flex: 1;
          }
        }
      }
    }

    .ipCkProfile {
      display: none;
      &:checked {
        ~ .navChild {
          transform: translateX(0%);
        }
      }
    }
  }
}
</style>
