<script lang='ts' setup>
import type { DepositFiatBody } from "@/api/types";
import { loadingController, modalController, toastController } from "@ionic/vue";
import { chevronForwardOutline } from "ionicons/icons";
import { client, safeClient } from "@/api";
import { AssetCodeEnum, PaymentChannelEnum } from "@/api/enum";
import { getCryptoIcon } from "@/config/crypto";
import SelectCurrency from "../withdraw/components/select-currency.vue";

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 openSelectCurrency() {
  const modal = await modalController.create({
    component: SelectCurrency,
    componentProps: {
      onSelect: (code: string) => {
        form.value.assetCode = code;
      },
    },
    breakpoints: [0, 0.8],
    initialBreakpoint: 0.8,
    handle: true,
  });
  await modal.present();
}

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-label class="block text-sm font-medium">
          {{ t("recharge.fiat.chooseCurrency") }}
        </ion-label>
        <div
          class="flex items-center justify-between bg-faint rounded-2xl p-4 cursor-pointer"
          @click="openSelectCurrency"
        >
          <div class="flex items-center gap-3">
            <component :is="getCryptoIcon(form.assetCode)" class="w-8 h-8" />
            <span class="text-base font-medium">{{ form.assetCode }}</span>
          </div>
          <ion-icon :icon="chevronForwardOutline" class="text-text-400" />
        </div>

        <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>
