<template>
  <CustomConnect :style="style" />
</template>

<script setup>
import { watch, defineProps } from "vue";

import {
  CustomConnect,
  useNetworks,
  useWalletConnect,
} from "@cverse/core-connector-beta";
import { getConnectorNetworksByChainIdList } from "@cverse/core-config-beta";

const { setAvailableNetworks } = useNetworks();

let { walletConnectRefresh } = useWalletConnect();

const props = defineProps({
  mainNetworks: {
    type: Object,
  },
  testNetworks: {
    type: Object,
  },
  style: {
    type: Object,
  },
});

walletConnectRefresh();

const setAvailableNetworksFn = (mainNetworks = [], testNetworks = []) => {
  // 如果配置了则按配置的来，否则使用默认
  let mainNetworksData = mainNetworks;
  let testNetworksData = testNetworks;

  let connectorNetworks = getConnectorNetworksByChainIdList(
    mainNetworksData,
    testNetworksData
  );
  if (connectorNetworks) {
    setAvailableNetworks(connectorNetworks.networks);
  }
};

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 }
);
</script>
