<script lang='ts' setup>
import type { Treaty } from "@elysiajs/eden";
import { alertController, toastController } from "@ionic/vue";
import { client, safeClient } from "@/api";
import { orderStatusMap, tradeWayConfig } from "../config";

type Item = Treaty.Data<typeof client.api.spot_order.list.get>["data"][number];

const props = defineProps<{ item: Item; showCancel?: boolean }>();
const emit = defineEmits<{ refresh: [] }>();
const { t } = useI18n();

const currentTradeWay = computed(() => {
  return tradeWayConfig.find(item => item.value === props.item.orderType);
});

async function cancelOrder(orderId: string) {
  const alert = await alertController.create({
    header: t("trade.orders.cancelConfirm"),
    message: t("trade.orders.cancelMessage"),
    buttons: [
      {
        text: t("trade.orders.cancel"),
        role: "cancel",
      },
      {
        text: t("common.confirm"),
        role: "destructive",
        handler: async () => {
          await safeClient(client.api.spot_order.cancel.post({ orderId }));
          emit("refresh");
          await alert.dismiss();
          const toast = await toastController
            .create({
              message: t("trade.orders.cancelSuccess"),
              duration: 2000,
              position: "bottom",
              color: "success",
            });
          await toast.present();
        },
      },
    ],
  });

  await alert.present();
}
</script>

<template>
  <div class="flex justify-between items-center mb-3">
    <div class="flex items-center gap-2">
      <span
        class="px-2 py-0.5 rounded text-[11px] font-semibold"
        :class="item.side === 'buy'
          ? 'bg-success/10 text-(--ion-color-success)'
          : 'bg-danger/10 text-(--ion-color-danger)'"
      >
        {{ item.side === 'buy' ? t('trade.buy') : t('trade.sell') }}
      </span>
      <span class="text-sm font-medium">{{ item.symbol }}</span>
      <ion-badge :color="orderStatusMap[item.status]?.color" class="text-[10px] px-1.5 py-0.5">
        {{ t(`trade.status.${item.status === 'partial_filled' ? 'partialFilled' : item.status}`) }}
      </ion-badge>
    </div>
    <button
      v-if="showCancel && item.status !== 'filled'"
      class="px-3 py-1 bg-transparent border border-(--ion-color-danger) text-(--ion-color-danger) rounded-md text-xs transition-all active:bg-(--ion-color-danger) active:text-white"
      @click="cancelOrder(item.id)"
    >
      {{ t('trade.orders.cancel') }}
    </button>
  </div>

  <div class="grid grid-cols-2 gap-2 mb-2">
    <div class="flex justify-between text-xs">
      <span class="text-(--ion-text-color-step-400)">{{ t(`trade.orderType.${currentTradeWay?.value}`) }}</span>
      <span class="text-(--ion-text-color) font-medium">{{ item.orderType === 'limit' ? Number(item.price).toString() : '-' }}</span>
    </div>
    <div class="flex justify-between text-xs">
      <span class="text-(--ion-text-color-step-400)">{{ t('trade.confirm.quantity') }}</span>
      <span class="text-(--ion-text-color) font-medium">{{ Number(item.quantity).toString() }}</span>
    </div>
    <div class="flex justify-between text-xs">
      <span class="text-(--ion-text-color-step-400)">{{ t('trade.orders.filled') }}</span>
      <span class="text-(--ion-text-color) font-medium">{{ Number(item.price).toString() }}</span>
    </div>
    <div class="flex justify-between text-xs">
      <span class="text-(--ion-text-color-step-400)">{{ t('trade.orders.total') }}</span>
      <span class="text-(--ion-text-color) font-medium">{{ Number(item.totalAmount).toString() }} USDT</span>
    </div>
  </div>

  <div class="pt-2">
    <span class="text-[11px] text-(--ion-text-color-step-500)">{{ useDateFormat(item.createdAt, 'YYYY/MM/DD HH:mm:ss') }}</span>
  </div>
</template>

<style lang='css' scoped></style>
