<template>
  <div>
    <div class="header header-top">
      <div class="header-left">
        <div class="header-logo" @click="handlHome">
          <img src="../../assets/img/home/game_logo01.png" alt="" />
        </div>
        <div class="nav">
          <a
            v-for="(nav, i) in navList"
            :class="i === activeIndex ? 'active-nav-item' : 'nav-item'"
            :key="i"
            @click="handNavCurent(nav)"
          >
            {{ nav.name }}
            <div class="dropdown">
              <ul>
                <li v-for="(item, index) in nav.submenu" :key="index">
                  <div
                    class="link-content"
                    @click="openThirdPartyLink(item.link)"
                  >
                    <a
                      class="link-name"
                      :href="item.link"
                      target="_blank"
                      rel="noopener noreferrer"
                      >{{ item.label }}</a
                    >
                  </div>
                </li>
              </ul>
            </div>
          </a>
        </div>
      </div>

      <div class="header-right">
        <div class="immutable-cart" v-if="isCart" @click="myCart">
          <div class="immutable-cart-img">
            <img src="@/assets/img/marketplace/Add shopping cart02.png" alt="">
          </div>
          <div v-if="immutableStore.accessToken" class="immutable-cart-amount">7</div>
        </div>
        <div class="metaMask-login" v-if="!immutableStore.accessToken" @click="immuTableLogin">Login</div>
        <div class="metaMask-login-active" v-else @click="showMenu = !showMenu">
          <div class="matamask">
            <div class="title">{{ formatAddress }}</div>
          </div>
          <div class="menu" v-show="showMenu">
            <div class="menu-item" @click="immuTableLogout">Logout</div>
          </div>
        </div>
      </div>
    </div>
    <div id="wallet"></div>
    <Cart v-show="cartShow" @closeCart="cartShow = false" class="cart-con" />
    <ChainModel></ChainModel>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed, watchEffect, getCurrentInstance, watch } from "vue";
const { proxy } = getCurrentInstance();
import { useChainStore } from "@/store/chain";
import { useAppStore } from "@/store/app";
import { hasMetamask } from "@/utils/chain.util";
import { useRouter, useRoute } from "vue-router";
import ChainModel from "@/components/home/ChainModel.vue";
import { useCopyToClipboard } from "./../../hooks/useCopyToClipboard";
import { PassportWallet } from "@/wallet/passPort"
import { useImmutableStore } from "@/store/immutable"
import { useMarketplaceStore } from "@/store/marketplace"

import Cart from "@/components/cart/index.vue"

const immutableStore = useImmutableStore()
const marketplaceStore = useMarketplaceStore()
const AppModule = useAppStore();
const router = useRouter();
const route = useRoute();
const chain = useChainStore();
const app = useAppStore();
const showMenu = ref(false);
const loginShowMenu = ref(false);
const dropdownVisible = ref(false);
const isCart = ref(false)
const cartShow = ref(false)
const activeIndex = ref(0);
const navList = reactive([
  { id: 0, name: "ABOUT", path: "/about" },
  { id: 1, name: "ASSETS", path: "https://pledge.kingsome.cn/" },
  // { id: 1, name: "planet", path: "https://planet.kingsome.cn/" },
  // {
  //   id: 2,
  //   name: "STAKE",
  //   path: "https://pledge.kingsome.cn",
  // },
  // {
  //   id: 3,
  //   name: "hashrate",
  //   path: "https://pledge.kingsome.cn",
  // },

  {
    id: 4,
    name: "COMMUNITY",
    path: "/stake",
    submenu: [
      { label: "Twitter", link: "https://twitter.com/_CounterFire" },
      {
        label: "Youtube",
        link: "https://youtube.com/c/CryptoElitesBattlegrounds",
      },
      {
        label: "Facebook",
        link: "https://www.facebook.com/profile.php?id=100090965821157&mibextid=LQQJ4d",
      },
      { label: "Medium", link: "https://medium.com/@CounterFire" },

      { label: "Discord", link: "https://discord.com/invite/fNSn2NHUvf" },
    ],
  },
  {
    id: 5,
    name: "EVENT",
    path: "/contact",
    submenu: [
      { label: "Badge", link: "https://badge.counterfire.games/" },
      {
        label: "Gacha",
        link: "https://gacha.counterfire.games/",
      },
    ],
  },
  {
    id: 6,
    name: "MARKETPLACE",
    path: "/marketplace",
  },
  {
    id: 7,
    name: "ASSETS",
    path: "/assets",
  }
]);
function click(event) {
  router.push(event.key);
}


//const { copied, copyToClipboard } = useCopyToClipboard(AppModule.accountId);
const { copied, error, reset, copyToClipboard } = useCopyToClipboard();

const message = copied.value
  ? "Text copied!"
  : "Click the button to copy text.";
const formatAddress = computed(() => {
  const accountId = localStorage.getItem('assessAddress');
  if (!accountId) return "-";
  if (accountId.length >= 10) {
    return `${accountId.substring(0, 6)}......${accountId.slice(-4)}`;
  }
  return accountId;
});

async function login(type) {

  if (!chain.logined) {
    //没有登录情况下执行登录

    await chain.chainManager.login(type);
    // console.log("logined:", chain.chainManager.isLogined);
    chain.logined = chain.chainManager.isLogined;
  }
}
const handlLogin = () => {
  loginShowMenu.value = !loginShowMenu.value;
};
const logout = async () => {
  await chain.chainManager.logout();
  window.location.reload();
  // console.log("logined:", chain.chainManager.isLogined);
  chain.logined = chain.chainManager.isLogined;
  window.location.reload();
};
const handlHome = () => {
  router.push("/");
};

function handNavCurent(nav) {
  activeIndex.value = nav.id;
  if (nav.id == 1) {
    window.open(nav.path, "_blank");
  } else if(nav.id == 0) {
    router.push(nav.path);
  } else if(nav.id == 6) {
    router.push(nav.path);
  } else if(nav.id == 7) {
    router.push(nav.path);
  }
  // if (nav.id == 1 || nav.id == 2 || nav.id == 3) {
  //   window.open(nav.path, "_blank");
  // } else if (nav.id == 5 || nav.id == 6) {
  //   dropdownVisible.value = true;
  // } else {
  //   router.push(nav.path);
  // }
}
function openThirdPartyLink(url) {
  window.open(url, "_blank");
}
const handleCopy = () => {
  const accountId = AppModule.accountId;
  reset();
  copyToClipboard(accountId).then(() => {
    // if (copied.value) {
    //   message.success("Copy successful!");
    // }
  });
};
watchEffect(() => {
  const index = navList.findIndex(
    (navItem) => route.path.slice(0, 5) === navItem.path.slice(0, 5)
  );
  activeIndex.value = index !== -1 ? index : "";
});

//  --------------------------------
const immuTableLogin = async () => {
  try{
      const walletLogin = await new PassportWallet().connect()
      immutableStore.accessToken = walletLogin.accessToken
      immutableStore.accounts = walletLogin.accounts[0]
      localStorage.setItem('assessToken', walletLogin.accessToken)
      localStorage.setItem('assessAddress', walletLogin.accounts[0])
      // console.log(walletLogin)
      /*
        accessToken
        accounts
        profile:

      */
      // loginShowMenu.value = !loginShowMenu.value;
      // const list = await new PassportWallet().beginSellERC721({
      //   contractAddress: '',
      //   tokenId: ''
      // });
      // console.log(list)
  } catch (e) {
    console.log(e);
  }
}

const immuTableLogout = async () => {
  try {
    await new PassportWallet().logout()
  } catch (e) {
    console.log(e)
  }
}


// 购物车
const myCart = async () => {
  if(immutableStore.accessToken) {
    cartShow.value = true
  } else {
    immuTableLogin()
  }
}

watch(() => route.path,(newPath, oldPath) => { 
  if(newPath == '/marketplace' || newPath == '/assets') {
    isCart.value = true
  } else {
    isCart.value = false
  }
})

</script>

<style lang="scss" scoped>
.header {
  position: fixed;
  z-index: 19;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
  // opacity: .6;
  width: 100%;
  height: 84px;
  display: flex;
  align-items: center;
  padding-right: 11px;
  justify-content: space-between;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -2px rgba(0, 0, 0, 0.1);
  .header-left {
    display: flex;
    align-items: center;
  }
  .header-logo {
    margin-left: 64px;
    width: 194px;
    cursor: pointer;
    height: 62px;
    img {
      width: 100%;
    }
  }

  .nav {
    padding-left: 83px;
    display: flex;
    justify-content: space-between;
    // width: 830px;
    a {
      padding-top: 27px;
      padding-bottom: 27px;
    }

    .nav-item {
      font-size: 32px;
      position: relative;
      padding-left: 21px;
      padding-right: 21px;
      transition-property: color;
      transition-duration: 0.15s;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
      font-family: "Anton";
      line-height: 30px;
      color: #bb7fff !important;
      cursor: pointer;
      .dropdown {
        position: absolute;
        top: 84px;
        left: 50%;
        width: 100%;
        background: rgba(0, 0, 0, 0.84);
        border-radius: 0px 0px 12px 12px;
        z-index: 1;
        opacity: 0;
        transform: translate(-50%, 0%);
        visibility: hidden;
        transition: all 0.3s ease-out;
      }

      .dropdown ul {
        list-style: none;
        margin: 0;
        padding: 0;
      }
      .dropdown li {
        // padding-top: 10px;
        // padding-bottom: 10px;
        padding-left: 20px;
        padding-right: 20px;
        cursor: pointer;
      }
      .link-content {
        display: flex;
        //  width: 150px;
        text-align: center;
        align-items: center;
        justify-content: space-between;
      }
      .link-label {
        font-size: 16px;
        font-family: Arial;
        font-weight: 400;
        text-align: center;
        color: #ffffff;
      }
      .dropdown li a {
        font-size: 16px;
        font-family: Arial;
        font-weight: 400;
        color: #ffffff;
        padding-top: 10px;
        padding-bottom: 10px;
        text-align: center; /* ensure text is centered */
        width: 100%; /* make it span the full width */
        display: block;
        cursor: pointer;
      }
      .dropdown li span {
        font-size: 15px;
        font-family: Arial;
        font-weight: 400;
        color: #ffffff;
      }
    }
    .duration-200 {
      transition-duration: 0.2s;
    }
    .nav-item:hover {
      transition-property: color;
      transition-duration: 0.15s;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
      font-family: "Anton";
      background-color: #bb7fff;
      border-radius: 42px;
      color: #000000 !important;
    }
    .nav-item:hover .dropdown {
      opacity: 1;
      visibility: visible;
    }

    .active-nav-item {
      font-size: 32px;
      font-family: "Anton";
      position: relative;
      padding-left: 21px;
      padding-right: 21px;
      line-height: 30px;
      background-color: #bb7fff;
      border-radius: 42px;
      transition-property: color;
      transition-duration: 0.3s;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
      color: #000000 !important;
      .dropdown {
        position: absolute;
        top: 84px;
        left: 50%;
        width: 100%;
        background: rgba(0, 0, 0, 0.84);
        border-radius: 0px 0px 12px 12px;
        z-index: 1;
        opacity: 0;
        transform: translate(-50%, 0%);
        visibility: hidden;
        transition: all 0.3s ease-out;
      }
      .dropdown ul {
        list-style: none;
        margin: 0;
        padding: 0;
      }
      .dropdown li {
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 20px;
        padding-right: 20px;
        cursor: pointer;
      }
      .link-content {
        display: flex;
        //  width: 150px;
        align-items: center;
        justify-content: space-between;
      }
      .link-label {
        font-size: 16px;
        font-family: Arial;
        font-weight: 400;
        text-align: center;
        color: #ffffff;
      }
      .dropdown li a {
        font-size: 16px;
        font-family: Arial;
        font-weight: 400;
        color: #ffffff;
      }
      .dropdown li span {
        font-size: 15px;
        font-family: Arial;
        font-weight: 400;
        color: #ffffff;
      }
    }
  }
}

.header-right {
  // width: 228px;
  // position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  // right: 11px;

  .metaMask-logo {
    width: 60px;
    height: 60px;
    margin-left: 10px;
    margin-right: 30px;
    // padding-right:10px;
  }
  .metaMask-login {
    width: 205px;
    height: 68px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #BB7FFF;
    cursor: pointer;
    background: #2d2738;
    font-size: 24px;
    font-family: "Poppins";
    font-weight: 400;
    border: 2px solid #A767FF;
    position: relative;
    border-radius: 34px;
    .menu {
      position: absolute;
      top: 75px;
      right: 0px;
      width: 218px;
      z-index: 1;
      text-align: center;
      padding: 5px 0;
      background-color: #252636;
      border-radius: 30px;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
      list-style: none;
      border: 2px solid #A767FF;
      transition: all 0.3s ease-out;
    }
    li {
      margin: 5px 0;
    }

    .menu-item {
      padding-left: 8px;
      padding-top: 10px;
      padding-bottom: 10px;
      color: #f5f5f5;
      display: flex;
      font-size: 18px;
      font-weight: 400;
      .login-icon {
        width: 28px;
        margin-right: 3px;
        height: 28px;
      }
      .title {
        margin-right: 10px;
      }
    }
    a:hover {
      background-color: #f5f5f5;
    }
  }
  .metaMask-login-active {
    width: 218px;
    height: 68px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    cursor: pointer;
    background: #2d2738;
    font-size: 20px;
    font-family: "Poppins";
    font-weight: 400;
    color: #BB7FFF;
    border: 2px solid #A767FF;
    border-radius: 34px;
    .menu {
      position: absolute;
      top: 75px;
      right: 0px;
      width: 218px;
      z-index: 1;
      text-align: center;
      padding: 10px 0;
      background-color: #252636;
      border-radius: 30px;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
      border: 2px solid #A767FF;
      list-style: none;

      transition: all 0.3s ease-out;
    }
    li {
      margin: 5px 0;
     
    }

    .menu-item {
      padding: 5px 15px;
      color: #f5f5f5;
      display: flex;
      font-size: 18px;
      font-weight: 400;
      // padding-top: 10px;
      justify-content: center;
      .title {
        margin-right: 10px;
      }
    }
    a:hover {
      background-color: #f5f5f5;
    }
  }
  .immutable-cart {
    color: #fff;
    position: relative;
    margin-right: 10px;
    cursor: pointer;
    .immutable-cart-img {
      width: 53px;
      height: 49px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .immutable-cart-amount {
      position: absolute;
      top: 0;
      right: 0;
      width: 25px;
      height: 25px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: red;
      border-radius: 50%;
      font-size: 18px;
    }
  }
  .immutable-login {
    width: 120px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #bb7fff;
    border-radius: 26px;
  }
}

.link-name {
  position: relative;
  .link-img {
    position: absolute;
    top: 24px;
    right: -18px;
  }
}
.cart-con {
  position: absolute;
  right: 0;
  top: 84px;
  background: #1e1b23;
  z-index: 999;
}
</style>
