<script lang="ts" setup>
import { computed } from "vue";
import Currency from "../components/Currency.vue"
import { useBudgetsStore } from "../stores/budget"
import { Account, useAccountStore } from "../stores/budget-account"
import { useSettingsStore } from "../stores/settings"

const ExpandMenu = computed(() => useSettingsStore().Menu.Expand);

const budgetStore = useBudgetsStore();
const CurrentBudgetName = computed(() => budgetStore.CurrentBudgetName);
const CurrentBudgetID = computed(() => budgetStore.CurrentBudgetID);

const accountStore = useAccountStore();
const OnBudgetAccounts = computed(() => accountStore.OnBudgetAccounts);
const OffBudgetAccounts = computed(() => accountStore.OffBudgetAccounts);
const OnBudgetAccountsBalance = computed(() => accountStore.OnBudgetAccountsBalance);
const OffBudgetAccountsBalance = computed(() => accountStore.OffBudgetAccountsBalance);

function isRecentlyReconciled(account : Account) {
  const now = new Date().getTime();
  const recently = 7 * 24 * 60 * 60 * 1000;
  return new Date(now - recently).getTime() < account.LastReconciled.getTime();
}

function getAccountName(account : Account) {
  const reconciledMarker = isRecentlyReconciled(account) ? "" : " *";
  return account.Name + reconciledMarker;
}
</script>

<template>
  <div class="flex flex-col">
    <span class="m-1 p-1 px-3 text-xl">
      <router-link to="/dashboard">⌂</router-link>
      {{CurrentBudgetName}}
    </span>
    <span class="bg-orange-200 dark:bg-orange-700 rounded-lg m-1 p-1 px-3 flex flex-col">
      <router-link :to="'/budget/'+CurrentBudgetID+'/budgeting'">Budget</router-link><br />
      <!--<router-link :to="'/budget/'+CurrentBudgetID+'/reports'">Reports</router-link>-->
      <!--<router-link :to="'/budget/'+CurrentBudgetID+'/all-accounts'">All Accounts</router-link>-->
    </span>
    <li class="bg-orange-200 dark:bg-orange-700 rounded-lg m-1 p-1 px-3">
      <div class="flex flex-row justify-between font-bold">
        <span>On-Budget Accounts</span>
        <Currency :class="ExpandMenu?'md:inline':'md:hidden'" :value="OnBudgetAccountsBalance" />
      </div>
      <div v-for="account in OnBudgetAccounts" class="flex flex-row justify-between">
        <router-link :to="'/budget/'+CurrentBudgetID+'/account/'+account.ID">{{getAccountName(account)}}</router-link>
        <Currency :class="ExpandMenu?'md:inline':'md:hidden'" :value="account.ClearedBalance" />
      </div>
    </li>
    <li class="bg-red-200 dark:bg-red-800 rounded-lg m-1 p-1 px-3">
      <div class="flex flex-row justify-between font-bold">
        <span>Off-Budget Accounts</span>
        <Currency :class="ExpandMenu?'md:inline':'md:hidden'" :value="OffBudgetAccountsBalance" />
      </div>
      <div v-for="account in OffBudgetAccounts" class="flex flex-row justify-between">
        <router-link :to="'/budget/'+CurrentBudgetID+'/account/'+account.ID">{{getAccountName(account)}}</router-link>
        <Currency :class="ExpandMenu?'md:inline':'md:hidden'" :value="account.ClearedBalance" />
      </div>
    </li>
    <!--<li class="bg-red-200 dark:bg-red-800 rounded-lg m-1 p-1 px-3">
      <div class="flex flex-row justify-between font-bold">
        <span>Closed Accounts</span>
      </div>
    </li>-->
    <!--<li>
      <router-link :to="'/budget/'+CurrentBudgetID+'/accounts'">Edit accounts</router-link>
    </li>-->
    <li class="bg-red-200 dark:bg-red-800 rounded-lg m-1 p-1 px-3">
      + Add Account
    </li>
    <li class="bg-red-200 dark:bg-red-800 rounded-lg m-1 p-1 px-3">
      <router-link :to="'/budget/'+CurrentBudgetID+'/settings'">Budget-Settings</router-link>
    </li>
    <!--<li><router-link to="/admin">Admin</router-link></li>-->
  </div>        
</template>