<template>
  <FCollapse class="f-collapse-history">
    <template v-slot:header>
      <div class="collapse-header">
        <div class="collapse-header-row1">
          <div><span class="subheader2">Tax</span> {{ props.taxRate }} %</div>
          <div class="position-id">
            <span class="subheader2">ID</span> <span class="number-small">{{ props.id }}</span>
          </div>
          <FTag v-if="isSnatched" class="snatched-tag">⚡ Snatched</FTag>
        </div>
        <div class="collapse-header-row2">
          <div class="collapse-amount">
            <span class="number-small">{{ compactNumber(props.amount) }}</span>
            <span class="caption"> $KRK</span>
          </div>
          <div v-if="isSnatched && relativeClosedAt" class="snatched-time">{{ relativeClosedAt }}</div>
        </div>
      </div>
    </template>
    <div class="history-body">
      <div>
        <span class="subheader2">Tax paid</span><span class="number-small">{{ compactNumber(props.taxPaid) }}</span
        ><span class="caption"> $KRK</span>
      </div>
      <div>
        <span class="subheader2">Profit</span
        ><span class="number-small">{{ typeof profit === 'string' ? profit : compactNumber(profit) }}</span
        ><span v-if="profit !== '—'" class="caption"> $KRK</span>
      </div>
      <template v-if="isSnatched">
        <div v-if="payoutKrk !== null">
          <span class="subheader2">Payout</span><span class="number-small">{{ payoutKrk }}</span
          ><span class="caption"> $KRK</span>
        </div>
        <div class="history-position-link">
          <RouterLink :to="{ name: 'position', params: { id: props.id.toString() } }">View position details →</RouterLink>
        </div>
      </template>
    </div>
  </FCollapse>
</template>

<script setup lang="ts">
import type { Position } from '@/composables/usePositions';
import FCollapse from '@/components/fcomponents/FCollapse.vue';
import FTag from '@/components/fcomponents/FTag.vue';
import { RouterLink } from 'vue-router';
import { compactNumber, formatWei } from 'kraiken-lib/format';
import { relativeTime } from '@/utils/helper';
import { calculateClosedPositionProfit } from 'kraiken-lib/position';
import { computed } from 'vue';

const props = defineProps<{
  taxRate: number;
  taxPaid: number;
  id: bigint;
  amount: number;
  position: Position;
}>();

const isSnatched = computed(() => props.position.snatched > 0);

const profit = computed(() => {
  if (!props.position.totalSupplyEnd) {
    return '—';
  }
  return calculateClosedPositionProfit(props.position.totalSupplyInit, props.position.totalSupplyEnd, props.position.share);
});

const payoutKrk = computed(() => {
  if (!props.position.payout) return null;
  return formatWei(props.position.payout, 18, 4);
});

const relativeClosedAt = computed(() => {
  if (!props.position.closedAt) return null;
  return relativeTime(props.position.closedAt) || null;
});
</script>

<style lang="sass">
@use 'collapse'
.f-collapse
  &.f-collapse-history
    .collapse-header, .collapsableDiv
      margin-right: 32px
    .collapse-header
      width: 100%
      display: flex
      flex-direction: column
      gap: 8px
      .collapse-header-row1
        display: flex
        flex-direction: row
        gap: 16px
        align-items: center
        .position-id
          margin-left: auto
        .snatched-tag
          border-color: #f59e0b
          color: #f59e0b
      .collapse-header-row2
        display: flex
        justify-content: space-between
        align-items: center
        .snatched-time
          font-size: 12px
          color: #9A9898
    .history-body
      display: flex
      flex-direction: column
      gap: 8px
      padding: 8px 0
      .history-position-link
        margin-top: 4px
        a
          color: #7550AE
          text-decoration: none
          font-size: 13px
          &:hover
            text-decoration: underline
</style>
