<script setup lang="ts">
import type { RefresherCustomEvent } from "@ionic/vue";
import { notificationsOutline, scanOutline, settingsOutline } from "ionicons/icons";
import IconParkOutlineApplicationMenu from "~icons/icon-park-outline/application-menu";
import IconParkOutlineScanCode from "~icons/icon-park-outline/scan-code";
import IconParkOutlineSettingOne from "~icons/icon-park-outline/setting-one";
import MaterialSymbolsNotificationsOutline from "~icons/material-symbols/notifications-outline";
import Asset from "./components/asset.vue";
import IssuingAsset from "./components/issuing-asset.vue";
import MyRevenue from "./components/my-revenue.vue";
import TradeSettings from "./components/trade-settings.vue";
import UserInfo from "./components/user-info.vue";
import WalletCard from "./components/wallet-card.vue";

const { vibrate } = useHaptics();
const walletStore = useWalletStore();
const { open } = useQRScanner();

async function handleRefresh(event: RefresherCustomEvent) {
  vibrate();
  await walletStore.initializeWallet();
  setTimeout(() => {
    event.target.complete();
  }, 500);
}

// 处理扫描二维码
async function handleScan() {
  vibrate();
  const result = await open({
    title: "扫描二维码",
  });

  if (result) {
    console.log("扫描结果:", result.text);
    // TODO: 根据扫描结果进行相应处理
    // 例如：跳转到对应页面、显示信息等
  }
}
</script>

<template>
  <ion-page>
    <ion-header class="ion-no-border">
      <ion-toolbar class="ion-toolbar">
        <ion-button slot="start" fill="clear" class="z-1" @click="$router.push('/global-menu')">
          <IconParkOutlineApplicationMenu slot="icon-only" />
        </ion-button>
        <div slot="end">
          <ion-button fill="clear" @click="handleScan">
            <IconParkOutlineScanCode slot="icon-only" />
          </ion-button>
          <ion-button fill="clear" @click="$router.replace('/layout/notify')">
            <MaterialSymbolsNotificationsOutline slot="icon-only" />
          </ion-button>
          <ion-button fill="clear" router-link="/system-settings">
            <IconParkOutlineSettingOne slot="icon-only" />
          </ion-button>
        </div>
      </ion-toolbar>
    </ion-header>
    <ion-content :fullscreen="true" class="ion-padding">
      <ion-refresher slot="fixed" @ion-refresh="handleRefresh($event)">
        <ion-refresher-content />
      </ion-refresher>

      <div class="flex flex-col space-y-5">
        <UserInfo />
        <WalletCard />
        <Asset />
        <!-- <IssuingAsset />
        <MyRevenue />
        <TradeSettings /> -->
      </div>
    </ion-content>
  </ion-page>
</template>

<style scoped></style>
