<script lang='ts' setup>
import { eyeOffOutline, eyeOutline } from "ionicons/icons";
import BxTransferAlt from "~icons/bx/transfer-alt";
import IcBaselineBlurCircular from "~icons/ic/baseline-blur-circular";
import IcRoundArrowCircleDown from "~icons/ic/round-arrow-circle-down";
import IcRoundArrowCircleUp from "~icons/ic/round-arrow-circle-up";
import RechargeChannel from "./recharge-channel.vue";

const { t } = useI18n();
const walletStore = useWalletStore();
const { totalAssetValue } = storeToRefs(walletStore);
const rechargeInstance = ref<ModalInstance>();
const totalBalanceVisible = useStorage("total-balances-visible", true);
const totalAsset = computed(() => Number(totalAssetValue.value.totalValueUsd).toFixed(2));

function onCloseModal() {
  rechargeInstance.value?.$el.dismiss(null, "confirm");
}
</script>

<template>
  <div class="flex flex-col gap-1">
    <div class="text-sm text-gray-500 flex items-center gap-2" @click="totalBalanceVisible = !totalBalanceVisible">
      <div>总资产估值</div>
      <ion-icon :icon="totalBalanceVisible ? eyeOffOutline : eyeOutline" />
    </div>
    <div class="flex items-end gap-2">
      <div class="text-2xl font-bold">
        {{ totalBalanceVisible ? totalAsset : Array(totalAsset.toString().length).fill("*").join("") }}
      </div>
      <div class="text-md font-bold">
        USDT
      </div>
    </div>
  </div>

  <div class="flex gap-2 w-full justify-around mt-2">
    <div id="open-recharge-modal" class="flex-col-center">
      <ion-button expand="full" color="success" shape="round" class="w-12 h-12">
        <IcRoundArrowCircleDown slot="icon-only" />
      </ion-button>
      <div class="text-sm font-medium mt-1">
        {{ t("wallet.recharge") }}
      </div>
    </div>

    <div class="flex-col-center" @click="$router.push('/withdraw/index')">
      <ion-button expand="full" color="success" shape="round" class="w-12 h-12">
        <IcRoundArrowCircleUp slot="icon-only" />
      </ion-button>
      <div class="text-sm font-medium mt-1">
        {{ t("wallet.withdraw") }}
      </div>
    </div>

    <div class="flex-col-center" @click="$router.push('/wallet/transfer')">
      <ion-button expand="full" color="success" shape="round" class="w-12 h-12">
        <BxTransferAlt slot="icon-only" />
      </ion-button>
      <div class="text-sm font-medium mt-1">
        划转
      </div>
    </div>

    <div class="flex-col-center" @click="$router.push('/wallet/bill')">
      <ion-button expand="full" color="success" shape="round" class="w-12 h-12">
        <IcBaselineBlurCircular slot="icon-only" />
      </ion-button>
      <div class="text-sm font-medium mt-1">
        账单
      </div>
    </div>
    <!-- <div id="open-recharge-modal" class="flex-col-center">
      <ion-ripple-effect />
      <ion-button shape="round" color="success" size="large">
        <IcRoundArrowCircleDown slot="icon-only" />
      </ion-button>
      <div class="text-center mt-2 text-sm font-medium text-text-500">
        {{ t("wallet.recharge") }}
      </div>
    </div>

    <div class="flex-col-center" @click="handleWithdraw">
      <ion-ripple-effect />
      <ion-button shape="round" color="success" size="large">
        <IcRoundArrowCircleUp slot="icon-only" />
      </ion-button>
      <div class="text-center mt-2 text-sm font-medium text-text-500">
        {{ t("wallet.withdraw") }}
      </div>
    </div> -->
  </div>

  <ion-modal ref="rechargeInstance" class="recharge-channel-modal" trigger="open-recharge-modal" :initial-breakpoint="1" :breakpoints="[0, 1]">
    <RechargeChannel @close="onCloseModal" />
  </ion-modal>
</template>

<style scoped>
.recharge-channel-modal,
.withdraw-channel-modal {
  --height: auto;
}
ion-button {
  --background: var(--ui-background-primary);
}
</style>
