<script lang='ts' setup>
import type { DepositFiatBody } from "@/api/types";
import { loadingController, toastController } from "@ionic/vue";
import { client, safeClient } from "@/api";
import { AssetCodeEnum, PaymentChannelEnum } from "@/api/enum";

const { t } = useI18n();

const form = ref<DepositFiatBody>({
  amount: "",
  assetCode: AssetCodeEnum.USDT,
  paymentChannel: PaymentChannelEnum.FIAT,
});
const inputInstance = useTemplateRef<InputInstance>("inputInstance");
const router = useRouter();

function markTouched() {
  inputInstance.value?.$el.classList.add("ion-touched");
}
function validate(value: string) {
  inputInstance.value?.$el.classList.remove("ion-valid");
  inputInstance.value?.$el.classList.remove("ion-invalid");

  if (value === "") {
    return false;
  }
  const isNumber = numberPattern.test(value);

  isNumber ? inputInstance.value?.$el.classList.add("ion-valid") : inputInstance.value?.$el.classList.add("ion-invalid");

  return isNumber;
}

async function onSubmit() {
  const loading = await loadingController.create({
    message: t("recharge.fiat.submitting"),
  });
  await loading.present();
  await safeClient(client.api.deposit.fiat.post(form.value)).finally(async () => {
    const toast = await toastController.create({
      message: t("recharge.fiat.submitSuccess"),
      duration: 1500,
      position: "bottom",
    });

    await toast.present();
    loading.dismiss();
    router.back();
  });
}
</script>

<template>
  <ion-page>
    <IonHeader>
      <ion-toolbar class="ion-toolbar">
        <ion-buttons slot="start">
          <ui-back-button />
        </ion-buttons>
        <ion-title>{{ t("recharge.fiat.title") }}</ion-title>
      </ion-toolbar>
    </IonHeader>
    <IonContent :fullscreen="true" class="ion-padding">
      <div class="flex flex-col gap-5">
        <ui-input-label
          :label="t('recharge.fiat.bankAccount')"
          model-value="74321329321312"
          type="number"
          readonly
          disabled
        />

        <ion-radio-group v-model="form.assetCode">
          <ion-label class="text-sm">
            {{ t("recharge.fiat.chooseCurrency") }}
          </ion-label>
          <ion-item v-for="item in AssetCodeEnum" :key="item">
            <ion-radio :value="item" justify="space-between">
              {{ item }}
            </ion-radio>
          </ion-item>
        </ion-radio-group>

        <!-- <ion-select v-model="form.assetCode" label="Select Currency" placeholder="Select One" label-placement="floating">
          <ion-select-option v-for="item in AssetCodeEnum" :key="item" :value="item">
            {{ item }}
          </ion-select-option>
        </ion-select> -->

        <ui-input-label
          ref="inputInstance"
          v-model="form.amount"
          :label="t('recharge.fiat.amount')"
          :placeholder="t('recharge.fiat.enterAmount')"
          type="number"
          inputmode="numeric"
          :error-text="t('recharge.fiat.validAmountError')"
          @ion-input="validate($event.target.value as string)"
          @ion-blur="markTouched"
        />

        <ion-note>{{ t("recharge.fiat.note") }}</ion-note>

        <ion-button expand="block" shape="round" color="success" @click="onSubmit">
          {{ t("recharge.fiat.submit") }}
        </ion-button>
      </div>
    </IonContent>
  </ion-page>
</template>

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