<script setup lang="ts">
import { AccountApiClient, AccountHistoryItemType, type Account, type AccountHistoryItem, type AccountHistoryJournalEntryItem, type AccountHistoryValueRecordItem } from '@/api/account';
import type { PageRequest } from '@/api/pagination';
import { onMounted, ref, type Ref } from 'vue';
import ValueRecordHistoryItem from './ValueRecordHistoryItem.vue';
import JournalEntryHistoryItem from './JournalEntryHistoryItem.vue';
import { useRoute, useRouter } from 'vue-router';
import AppButton from '../common/AppButton.vue';
import AppBadge from '../common/AppBadge.vue';
import HistoryItemDivider from './HistoryItemDivider.vue';
import { getSelectedProfile } from '@/api/profile';

const route = useRoute()
const router = useRouter()
const props = defineProps<{ account: Account }>()
const historyItems: Ref<AccountHistoryItem[]> = ref([])
const canLoadMore = ref(true)
const nextPage: Ref<PageRequest> = ref({ page: 1, size: 10, sorts: [{ attribute: 'timestamp', dir: 'DESC' }] })

onMounted(async () => {
  await loadNextPage()
})

async function loadNextPage() {
  const api = new AccountApiClient(route)
  try {
    const page = await api.getHistory(props.account.id, nextPage.value)
    historyItems.value.push(...page.items)
    canLoadMore.value = !page.isLast
    if (canLoadMore.value) {
      nextPage.value.page++
    }
  } catch (err) {
    console.error(err)
    historyItems.value = []
    canLoadMore.value = false
    nextPage.value.page = 1
  }
}

async function loadAll() {
  while (canLoadMore.value) {
    await loadNextPage()
  }
}

function reload() {
  nextPage.value.page = 1
  canLoadMore.value = true
  historyItems.value = []
  loadNextPage()
}

function asVR(i: AccountHistoryItem): AccountHistoryValueRecordItem {
  return i as AccountHistoryValueRecordItem
}

function asJE(i: AccountHistoryItem): AccountHistoryJournalEntryItem {
  return i as AccountHistoryJournalEntryItem
}

function canView(item: AccountHistoryItem) {
  return item.type === AccountHistoryItemType.JOURNAL_ENTRY ||
    item.type === AccountHistoryItemType.VALUE_RECORD
}

function viewItem(item: AccountHistoryItem) {
  const profile = getSelectedProfile(route)
  if (item.type === AccountHistoryItemType.VALUE_RECORD) {
    router.push(`/profiles/${profile}/accounts/${props.account.id}/value-records/${asVR(item).valueRecordId}`)
  } else if (item.type === AccountHistoryItemType.JOURNAL_ENTRY) {
    router.push(`/profiles/${getSelectedProfile(route)}/transactions/${asJE(item).transactionId}`)
  }
}

defineExpose({ reload })
</script>
<template>
  <div>
    <div v-for="item, idx in historyItems" :key="idx">
      <div class="history-item">
        <!-- The main body on the left. -->
        <div style="flex-grow: 1;">
          <div class="font-mono font-size-xsmall text-muted" style="margin-bottom: 0.25rem;">
            {{ new Date(item.timestamp).toLocaleString() }}
          </div>

          <ValueRecordHistoryItem v-if="item.type === AccountHistoryItemType.VALUE_RECORD" :item="asVR(item)"
            :account-id="account.id" />

          <JournalEntryHistoryItem v-if="item.type === AccountHistoryItemType.JOURNAL_ENTRY" :item="asJE(item)" />
        </div>
        <!-- A "view item" button on the right. -->
        <div>
          <AppButton icon="eye" size="sm" @click="viewItem(item)" v-if="canView(item)">View</AppButton>
        </div>
      </div>

      <HistoryItemDivider v-if="idx + 1 < historyItems.length" />
    </div>
    <div class="align-center">
      <AppButton size="md" @click="loadNextPage()" v-if="canLoadMore">Load more history...</AppButton>
      <AppButton size="sm" @click="loadAll()" theme="secondary" v-if="canLoadMore">Load all</AppButton>
      <AppBadge v-if="!canLoadMore">This is the start of this account's history.</AppBadge>
    </div>
  </div>
</template>
<style lang="css">
.history-item {
  padding: 0 0.5rem;
  margin: 1rem 0;
  display: flex;
  justify-content: space-between;
}
</style>
