<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";
import AccountWithReconciled from "../components/AccountWithReconciled.vue";

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

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);
</script>

<template>
  <div
    :class="[ExpandMenu ? 'md:w-72' : 'md:w-36', ShowMenu ? '' : 'hidden']"
    class="md:block flex-shrink-0 w-full bg-gray-500 border-r-4 border-black"
  >
    <div class="flex flex-col mt-14 md:mt-0">
      <span
        class="m-2 p-1 px-3 h-10 overflow-hidden"
        :class="[ExpandMenu ? 'text-2xl' : 'text-md']"
      >
        <router-link
          to="/dashboard"
          style="font-size: 150%"
        >⌂</router-link>
        {{ CurrentBudgetName }}
      </span>
      <span class="bg-gray-100 dark:bg-gray-700 p-2 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-slate-200 dark:bg-slate-700 my-2 p-2 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"
          :key="account.ID"
          class="flex flex-row justify-between"
        >
          <AccountWithReconciled :account="account" />
          <Currency
            :class="ExpandMenu ? 'md:inline' : 'md:hidden'"
            :value="account.ClearedBalance"
          />
        </div>
      </li>
      <li class="bg-slate-200 dark:bg-slate-700 my-2 p-2 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"
          :key="account.ID"
          class="flex flex-row justify-between"
        >
          <AccountWithReconciled :account="account" />
          <Currency
            :class="ExpandMenu ? 'md:inline' : 'md:hidden'"
            :value="account.ClearedBalance"
          />
        </div>
      </li>
      <!--
    <li class="bg-slate-100 dark:bg-slate-800 my-2 p-2 px-3">
      <div class="flex flex-row justify-between font-bold">
        <span>Closed Accounts</span>
      </div>
      + Add Account
    </li>
      -->
      <!--<li>
      <router-link :to="'/budget/'+CurrentBudgetID+'/accounts'">Edit accounts</router-link>
      </li>-->
      <li class="bg-red-100 dark:bg-slate-600 my-2 p-2 px-3">
        <router-link :to="'/budget/' + CurrentBudgetID + '/settings'">
          Budget-Settings
        </router-link>
      </li>
      <!--<li><router-link to="/admin">Admin</router-link></li>-->
    </div>
  </div>
</template>
