<template>
    <div class="connector-connect-button">
      <div v-if="visibleWallet" :style="hiddenWalletDisplay">
        <SimpleConnectButton />
      </div>
      <div
        v-if="hiddenIndividualCenter && url.length"
        :class="{ 'img-box': true, marginLeft: visibleWallet && !visibleWalletStyle }"
      >
        <img :src="url" @click="goToNewUrl" />
      </div>
    </div>
  </template>
  
  <script setup>
  import { watch, defineProps, ref, computed, PropType } from 'vue';
  
  import {
    SimpleConnectButton,
    useNetworks,
    ConnectButton,
    useWalletConnect,
  } from '@cverse/core-connector-beta';
  import { getConnectorNetworks, getConnectorNetworksByChainIdList } from '@cverse/core-config-beta';
  import { UserService } from '@cverse/core-lib-beta';
  import { goToNewUrlByWebId } from './comFn/index';
  
  const { setAvailableNetworks } = useNetworks();
  
  let { walletConnect, walletConnectRefresh, watchWalletConnect } = useWalletConnect();
  
  const props = defineProps({
    webGid: {
      type: [Number, String],
    },
    mainNetworks: {
      type: Object,
    },
    testNetworks: {
      type: Object,
    },
    visibleWallet: {
      type: Boolean,
      default: true,
    },
    visibleWalletStyle: {
      type: Boolean,
      default: false,
    },
    hiddenIndividualCenter: {
      type: Boolean,
      default: true,
    },
  });
  
  
  // // console.log("---- ConnectButton setAvailableNetworks", setAvailableNetworks);
  // setAvailableNetworks(connectorNetworks.networks);
  // // console.log("---- ConnectButton setAvailableNetworks", connectorNetworks);
  
  walletConnectRefresh();
  
  const url = ref('');
  // const wallet = computed(() => {
  //   return window?.walletConnect?.value
  // })
  
  const hiddenWalletDisplay = computed(() => {
    const displayValue = props.visibleWalletStyle ? 'none' : '';
    return {
      display: displayValue,
    };
  });
  
  const setAvailableNetworksFn = (mainNetworks = [], testNetworks = []) => {
    // 如果配置了则按配置的来，否则使用默认
    let mainNetworksData = mainNetworks;
    let testNetworksData = testNetworks;
  
    let connectorNetworks = getConnectorNetworksByChainIdList(mainNetworksData, testNetworksData);
    if (connectorNetworks) {
      setAvailableNetworks(connectorNetworks.networks);
    }
    // console.log("---- ConnectButton setAvailableNetworks", connectorNetworks);
  };
  
  if (useWalletConnect && watchWalletConnect) {
    watchWalletConnect(async (walletConnect) => {
      if (walletConnect.walletConnected) {
        let userService = new UserService(walletConnect.address);
        let res = await userService.getUserDetail();
  
        if (res.avatar && res.avatar.length) {
          url.value = res.avatar;
        } else {
          url.value = 'https://s3.ap-east-1.amazonaws.com/res.chaosverse.io/profile/profile00035.png';
        }
      }
    });
  }
  
  watch(
    () => [props.mainNetworks, props.testNetworks],
    ([newMainNetworks, newTestNetworks]) => {
      // 如果配置了则按配置的来，否则使用默认
      let mainNetworksData = newMainNetworks !== undefined ? newMainNetworks : [42161];
      let testNetworksData = newTestNetworks !== undefined ? newTestNetworks : [4];
  
      setAvailableNetworksFn(mainNetworksData, testNetworksData);
    },
    { deep: true, immediate: true },
  );
  
  const goToNewUrl = () => {
    goToNewUrlByWebId(props.webGid);
  };
  </script>
  
  <style scoped lang="less">
  .connector-connect-button {
    display: flex;
    justify-content: center;
    align-items: center;
  
    .img-box {
      width: 28px;
      height: 28px;
  
      img {
        border-radius: 50%;
        width: 100%;
        height: 100%;
        object-fit: cover;
        cursor: pointer;
      }
    }
  
    .marginLeft {
      margin-left: 24px;
    }
  }
  </style>
  