<script lang='ts' setup>
import type { TradableData } from "@/api/types";
import dayjs from "dayjs";
import { client, safeClient } from "@/api";

const props = defineProps<{
  data: TradableData | null;
}>();

const { t } = useI18n();
const tradingViewInst = useTemplateRef<HTMLDivElement>("tradingViewInst");
const { data: tickerData } = safeClient(client.api.market_data.pairs.ticker.get({
  query: { symbol: props.data?.asset?.tradingPairsAsBase[0].symbol || "" },
}));

useTradingView(tradingViewInst, {
  type: "Area",
  data: async () => {
    const { data } = safeClient(client.api.market_cap.history.get({
      query: { symbol: props.data?.asset?.tradingPairsAsBase[0].symbol || "" },
    }));
    return data.value?.map(item => ({
      time: dayjs(item.ts).format("YYYY-MM-DD"),
      value: item.marketCapUsd,
    })) || [];
  },
  weightChartOptions: {
    height: 150,
    rightPriceScale: {
      visible: false,
    },
    leftPriceScale: {
      visible: false,
    },
  },
});
</script>

<template>
  <div class="mt-2">
    <div ref="tradingViewInst" />

    <div class="mt-5">
      <div class="font-semibold">
        {{ t("tradeTokenized.base.tokenInfo") }}
      </div>

      <div class="item">
        <div class="label">
          {{ t("tradeTokenized.base.tokenSymbol") }}
        </div>
        <div class="value">
          {{ data?.assetCode }}
        </div>
      </div>
      <div class="item">
        <div class="label">
          {{ t("tradeTokenized.base.relatedAsset") }}
        </div>
        <div class="value">
          {{ data?.product?.name }}
        </div>
      </div>
      <div class="item">
        <div class="label">
          {{ t("tradeTokenized.base.totalSupply") }}
        </div>
        <div class="value">
          {{ Number(data?.totalSupply).toString() }}
        </div>
      </div>
      <div class="item">
        <div class="label">
          {{ t("tradeTokenized.base.marketCap") }}
        </div>
        <div class="value">
          ${{ Number(data?.product?.estimatedValue).toString() }}
        </div>
      </div>
      <div class="item">
        <div class="label">
          {{ t("tradeTokenized.base.volume24h") }}
        </div>
        <div class="value">
          $500000
        </div>
      </div>
      <div class="item">
        <div class="label">
          {{ t("tradeTokenized.base.createTime") }}
        </div>
        <div class="value">
          {{ useDateFormat(data?.createdAt, 'YYYY/MM/DD') }}
        </div>
      </div>
    </div>

    <div class="mt-5 space-y-4">
      <div class="font-semibold">
        {{ t("tradeTokenized.base.marketData") }}
      </div>
      <div class="flex items-center gap-2">
        <Icon icon="hugeicons:trade-up" class="text-success" />
        <div class="text-sm">
          {{ t("tradeTokenized.base.priceChange") }}
        </div>
      </div>

      <div class="item">
        <div class="label">
          {{ t("tradeTokenized.base.hours24") }}
        </div>
        <div class="value">
          {{ tickerData?.changePercent || '-' }}%
        </div>
      </div>
      <div class="item">
        <div class="label">
          {{ t("tradeTokenized.base.days7") }}
        </div>
        <div class="value">
          -%
        </div>
      </div>
      <div class="item">
        <div class="label">
          {{ t("tradeTokenized.base.days30") }}
        </div>
        <div class="value">
          -%
        </div>
      </div>
    </div>
  </div>
</template>

<style lang='css' scoped>
@reference "tailwindcss";

.label {
  @apply text-(--ion-text-color-step-300) mb-1 text-sm;
}
.item {
  @apply flex justify-between items-center mt-3;
}
.value {
  @apply text-sm font-semibold;
}
</style>
