<script lang='ts' setup>
import { toastController } from "@ionic/vue";
import CryptocurrencyColorNuls from "~icons/cryptocurrency-color/nuls";
import { client, safeClient } from "@/api";

const props = defineProps<{
  id: string;
}>();

const { data } = safeClient(client.api.rwa.subscription.available_editions({ editionId: props.id }).get());
const model = useTemplateRef<ModalInstance>("model");

async function handleSubscribe(val: number) {
  await safeClient(client.api.rwa.subscription.apply.post({
    editionId: props.id,
    quantity: String(val),
  }));
  const toast = await toastController.create({
    message: "申购成功",
    duration: 2000,
    position: "bottom",
    color: "success",
  });

  await toast.present();
  model.value?.$el.dismiss();
}
</script>

<template>
  <ion-page>
    <ion-header class="ion-no-border">
      <ion-toolbar class="ui-toolbar">
        <ion-back-button slot="start" text="" />
        <ion-title>
          {{ data?.product.code }}
        </ion-title>
      </ion-toolbar>
      <ui-tabs size="small" class="px-4">
        <ui-tab-pane name="overview" title="Overview" />
        <ui-tab-pane name="moment" title="Moment" />
      </ui-tabs>
    </ion-header>
    <ion-content :fullscreen="true" class="ion-padding">
      <div class="mt-5">
        <div class="flex items-center space-x-2">
          <CryptocurrencyColorNuls class="text-2xl" />
          <div class="mr-2 text-lg font-semibold">
            {{ data?.product.name }}
          </div>
        </div>
        <ion-grid class="mt-5 text-sm space-y-5">
          <ion-row>
            <ion-col>
              <div class="label">
                产品编号
              </div>
              <div>{{ data?.product.code }}</div>
            </ion-col>
            <ion-col>
              <div class="label">
                估值
              </div>
              <div>${{ formatAmount(data?.product.estimatedValue) }}</div>
            </ion-col>
          </ion-row>
          <ion-row>
            <ion-col>
              <div class="label">
                单价
              </div>
              <div>${{ formatAmount(data?.unitPrice) }}</div>
            </ion-col>
            <ion-col>
              <div class="label">
                总发行量
              </div>
              <div>{{ Number(data?.totalSupply) }}份</div>
            </ion-col>
          </ion-row>
          <ion-row>
            <ion-col>
              <div class="label">
                每人限量
              </div>
              <div>{{ Number(data?.perUserLimit) }}份</div>
            </ion-col>
            <ion-col>
              <div class="label">
                发行时间
              </div>
              <div>{{ useDateFormat(data?.launchDate || '', 'YYYY/MM/DD') }}</div>
            </ion-col>
          </ion-row>
          <ion-row>
            <ion-col>
              <div class="label">
                认购截止时间
              </div>
              <div>{{ useDateFormat(data?.subscriptionDeadline || '', 'YYYY/MM/DD') }}</div>
            </ion-col>
          </ion-row>
        </ion-grid>

        <div class="mt-5">
          <div class="font-semibold">
            About
          </div>
          <div class="text-xs mt-2">
            {{ data?.product.description || 'No description available.' }}
          </div>
        </div>
      </div>
    </ion-content>

    <ion-footer>
      <ion-toolbar class="ion-padding-horizontal ui-toolbar">
        <div class="flex justify-center my-2 gap-5">
          <ion-button id="open-modal" shape="round" expand="block" color="success">
            申购
          </ion-button>

          <ion-modal ref="model" trigger="open-modal" :initial-breakpoint="0.4" :breakpoints="[0, 0.4]">
            <subscribe-rwa :unit-price="Number(data?.unitPrice || 0)" :max="Number(data?.perUserLimit || 0)" @subscribed="handleSubscribe" />
          </ion-modal>
        </div>
      </ion-toolbar>
    </ion-footer>
  </ion-page>
</template>

<style scoped>
@reference "tailwindcss";

.label {
  @apply text-gray-500 mb-1;
}

ion-button {
  width: 100%;
  min-height: 40px;
}

ion-button::part(native) {
  min-height: 40px;
}
</style>
