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

const props = defineProps<{
  unitPrice: number;
  max: number;
}>();

const emit = defineEmits<{
  (e: "subscribed", value: number): void;
}>();

const { t } = useI18n();

const walletStore = useWalletStore();
await walletStore.syncFundingBalances();
const { fundingBalances } = storeToRefs(walletStore);
const currentUSDTBalance = computed(() => fundingBalances.value[0]?.available || 0);

const num = ref<number | null>(null);

async function handleSubscribe() {
  if (!num.value || num.value <= 0) {
    const toast = await toastController.create({
      message: t("market.subscribeRwa.enterQuantityError"),
      duration: 2000,
      position: "bottom",
      color: "warning",
    });
    await toast.present();
    return;
  }
  emit("subscribed", num.value);
}
</script>

<template>
  <div class="space-y-5 mt-3 ion-padding">
    <div>{{ t('market.subscribeRwa.title') }}</div>

    <ion-input
      v-model="num"
      :placeholder="t('market.subscribeRwa.maxSubscribePlaceholder', { max })"
      type="number"
      inputmode="numeric"
      :max="max"
    />

    <div class="mt-4 text-sm color-(--ion-text-color-secondary)">
      {{ t('market.subscribeRwa.unitPrice') }}: ${{ unitPrice }}
    </div>

    <div class="mt-4 text-sm color-(--ion-text-color-secondary)">
      {{ t('market.subscribeRwa.availableBalance') }}: ${{ Number(currentUSDTBalance) }}
    </div>

    <ion-button expand="block" class="mt-6" color="success" shape="round" @click="handleSubscribe">
      {{ t('market.subscribeRwa.confirmSubscribe') }}
    </ion-button>
  </div>
</template>

<style scoped>
@reference "tailwindcss";

ion-input {
  @apply rounded-lg;
  --padding-start: 16px;
  --padding-end: 16px;
  border: 1px solid var(--ion-color-light-shade);
}
</style>
