<script setup lang="ts">
import { AccountApiClient, type Account } from '@/api/account'
import HomeModule from '@/components/HomeModule.vue'
import { computed, onMounted, ref } from 'vue'
import 'chartjs-adapter-date-fns'
import type { Currency } from '@/api/data'
import { AnalyticsApiClient } from '@/api/analytics'
import type { TimeFrame } from './analytics/util'
import FormGroup from '@/components/common/form/FormGroup.vue'
import FormControl from '@/components/common/form/FormControl.vue'
import { startOfMonth, startOfYear, sub } from 'date-fns'
import { useRoute } from 'vue-router'
import CategorySpendPieChart from './analytics/CategorySpendPieChart.vue'
import BalanceTimeSeriesChart from './analytics/BalanceTimeSeriesChart.vue'

const route = useRoute()
const analyticsApi = computed(() => {
  return new AnalyticsApiClient(route)
})

const accounts = ref<Account[]>([])

const currency = ref<Currency>()
const timeFrame = ref<TimeFrame>({})

interface AnalyticsChartType {
  id: string
  name: string
}

const AnalyticsChartTypes: AnalyticsChartType[] = [
  { id: 'account-balances', name: 'Account Balances' },
  { id: 'category-spend', name: 'Category Spend' },
]

const selectedChart = ref<AnalyticsChartType>(AnalyticsChartTypes[0])

const availableCurrencies = computed(() => {
  const currencies: Currency[] = []
  for (const acc of accounts.value) {
    if (currencies.findIndex((c) => c.code === acc.currency.code) === -1) {
      currencies.push(acc.currency)
    }
  }
  return currencies
})

onMounted(async () => {
  const api = new AccountApiClient(route)
  accounts.value = await api.getAccounts()
  if (accounts.value.length > 0) {
    currency.value = accounts.value[0].currency
  }
})
</script>
<template>
  <HomeModule title="Analytics">
    <FormGroup>
      <FormControl label="Chart">
        <select v-model="selectedChart">
          <option
            v-for="ct in AnalyticsChartTypes"
            :key="ct.id"
            :value="ct"
          >
            {{ ct.name }}
          </option>
        </select>
      </FormControl>
    </FormGroup>

    <BalanceTimeSeriesChart
      v-if="currency && selectedChart.id === 'account-balances'"
      title="Account Balances"
      :currency="currency"
      :time-frame="timeFrame"
      :api="analyticsApi"
    />

    <CategorySpendPieChart
      v-if="currency && selectedChart.id === 'category-spend'"
      :currency="currency"
      :api="analyticsApi"
      :time-frame="timeFrame"
    />

    <FormGroup>
      <FormControl label="Currency">
        <select
          v-model="currency"
          :disabled="availableCurrencies.length < 2"
        >
          <option
            v-for="currency in availableCurrencies"
            :key="currency.code"
            :value="currency"
          >
            {{ currency.code }}
          </option>
        </select>
      </FormControl>
      <FormControl label="Time Frame">
        <select v-model="timeFrame">
          <option
            :value="{}"
            selected
          >
            All Time
          </option>
          <option :value="{ start: sub(new Date(), { days: 30 }) }">Last 30 days</option>
          <option :value="{ start: startOfMonth(new Date()) }">This Month</option>
          <option :value="{ start: startOfYear(new Date()) }">Year to Date</option>
        </select>
      </FormControl>
    </FormGroup>
  </HomeModule>
</template>
