<script lang='ts' setup>
import type { RefresherCustomEvent } from "@ionic/vue";
import type { EaringsSummaryData } from "@/api/types";
import { client, safeClient } from "@/api";
import Overview from "./components/overview.vue";
import Recent from "./components/recent.vue";
import RevenueSource from "./components/revenue-source.vue";
import Trend from "./components/trend.vue";

const { t } = useI18n();
const { vibrate } = useHaptics();

const data = ref<EaringsSummaryData | null>(null);

async function fetchData() {
  const { data: fetchData } = await safeClient(client.api.earnings.summary.post({
    now: new Date(),
  }));
  data.value = fetchData.value;
}

function handleRefresh(event: RefresherCustomEvent) {
  vibrate();
  fetchData().finally(() => {
    event.target.complete();
  });
}

onMounted(() => {
  fetchData();
});
</script>

<template>
  <ion-page>
    <ion-header class="ion-no-border">
      <ion-toolbar class="ion-toolbar">
        <ui-back-button slot="start" />
        <ion-title>{{ t("asset.revenue.monthlyRevenue") }}</ion-title>
      </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="container">
        <Overview :data="data" />
        <Trend />
        <RevenueSource :data="data" />
        <Recent :data="data" />
      </div>
    </ion-content>
  </ion-page>
</template>

<style lang='css' scoped>
.container {
  --title-font-size: 16px;
}
</style>
