import { defineComponent } from 'vue';
import './index.less';
import ConnectFox from '@/assets/svg/header/connectFox.svg';
import { useFoxDialog } from '@/store/dialog';
import { useFoxWallet } from '@/store/FoxWallet';
import Foxwallet from '@/components/Foxwallet';
import { getDeviceWidth, getCurrentDevice } from '@/utils/tool';
import { useI18n } from 'vue-i18n';
export default defineComponent({
  setup(props) {
    const { $state: foxDialog } = useFoxDialog();
    // 钱包地址
    const { $state: userAddress } = useFoxWallet();
    const imgs = {
      ConnectedSvg: new URL(
        '@/assets/svg/header/connected.svg',
        import.meta.url
      ).href,
    };
    const { t } = useI18n();
    const openDialog = () => {
      if (userAddress.address) {
        return;
      }
      foxDialog.dialog = !foxDialog.dialog;
    };
    const getText = () => {
      if (!userAddress.address) {
        if (getDeviceWidth() <= 400) {
          return t('header.connect');
        }
        return t('header.connectWallet');
      } else {
        // 已连接
        return userAddress.MaskAddress;
      }
    };
    return () => (
      <div>
        {getCurrentDevice() && userAddress.address ? (
          <img src={imgs.ConnectedSvg} alt="" />
        ) : (
          <div class="custom-fox-wallet-box" onClick={openDialog}>
            <div class="icon">
              {userAddress.address ? (
                <img src={imgs.ConnectedSvg} alt="" />
              ) : (
                <ConnectFox></ConnectFox>
              )}
            </div>
            <div class="text">{getText()}</div>
          </div>
        )}
        <Foxwallet></Foxwallet>
      </div>
    );
  },
});
