<script lang='ts' setup>
import { modalController } from "@ionic/vue";

const emit = defineEmits<{
  select: [code: string];
}>();

const { t } = useI18n();

const walletStore = useWalletStore();
const { fundingBalances } = storeToRefs(walletStore);

function handleSelect(code: string) {
  emit("select", code);
  modalController.dismiss(code);
}

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

<template>
  <ion-header class="ion-no-border">
    <ion-toolbar class="ion-toolbar">
      <ion-title>{{ t("wallet.selectCurrency.title") }}</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <div class="mt-2 flex flex-col">
      <div v-for="item in fundingBalances" :key="item.assetCode" class="flex items-center px-3 my-3 w-full" @click="handleSelect(item.assetCode)">
        <Icon :icon="item.asset.iconUrl || ''" class="text-3xl" />
        <div class="ml-2 inline-flex gap-2 items-baseline">
          <span class="font-medium text-md">{{ item.assetCode }}</span>
        </div>
      </div>
    </div>
  </ion-content>
</template>

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