<script lang='ts' setup>
import { eyeOffOutline, eyeOutline } from "ionicons/icons";

const { t } = useI18n();
const walletStore = useWalletStore();
const { fundingBalances, totalAssetValue } = storeToRefs(walletStore);
const fundingBalanceVisible = useStorage("funding-balances-visible", true);

onMounted(() => {
  walletStore.syncFundingBalances();
});
</script>

<template>
  <ion-page>
    <ion-header class="ion-no-border">
      <ion-toolbar class="ion-toolbar">
        <ui-back-button slot="start" />
        <ion-title>{{ t('wallet.funding.title') }}</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content :fullscreen="true">
      <div class="flex flex-col gap-1 ion-padding border-b border-text-900 mb-2">
        <div class="text-sm text-gray-500 flex items-center gap-2" @click="fundingBalanceVisible = !fundingBalanceVisible">
          <div class="text-md">
            {{ t('wallet.funding.totalAssets') }}
          </div>
          <ion-icon :icon="fundingBalanceVisible ? eyeOffOutline : eyeOutline" />
        </div>
        <div class="flex items-end gap-2">
          <div class="text-2xl font-bold">
            {{ fundingBalanceVisible ? totalAssetValue.fundingValueUsd : Array(totalAssetValue.fundingValueUsd.toString().length).fill("*").join("") }}
          </div>
          <div class="text-md font-bold">
            USDT
          </div>
        </div>
      </div>

      <div class="ion-padding-horizontal text-md font-semibold my-4">
        {{ t('wallet.funding.assets') }}
      </div>

      <ion-list lines="none" class="space-y-5 mt-2!">
        <ion-item v-for="asset, i in fundingBalances" :key="i" @click="$router.push(`/asset_record/${asset.assetCode}/funding`)">
          <div class="flex items-center space-x-3 flex-1">
            <Icon :icon="asset.asset.iconUrl || ''" class="w-8 h-8" />

            <div class="space-y-1">
              <div class="font-medium text-md">
                {{ asset.assetCode }}
              </div>
              <div class="text-xs text-text-500 font-semibold">
                {{ t('wallet.funding.total') }}: ${{ Number(asset.total).toFixed(2) }}
              </div>
              <div class="text-xs text-text-500 font-semibold">
                {{ t('wallet.funding.frozen') }}: ${{ Number(asset.frozen).toFixed(2) }}
              </div>
            </div>
          </div>
          <div class="w-fit font-bold">
            ${{ Number(asset.available).toFixed(2) }}
          </div>
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-page>
</template>

<style lang='css' scoped></style>
