<script setup lang="ts">

import {computed, ref} from "vue";
import BudgetView from "@/components/budgets/BudgetView.vue";
import BudgetView2 from "@/components/budgets/BudgetView2.vue";
import ToggleSwitch from "primevue/toggleswitch";
import {useUserStore} from "@/stores/userStore";

const userStore = useUserStore();
const newVersion = computed(() => {
  return userStore.settings["budgetViewVersion"] == "2" ? true : false;
})

const changeViewVersion = (version: string) => {
  userStore.settings["budgetViewVersion"] = version
}
</script>

<template>

  <div class="bg-gray-100 flex flex-row gap-2 pl-4 pt-2">
    <span :class="!newVersion? 'font-bold': ''">Старая версия</span>
    <ToggleSwitch v-model="newVersion" @click="changeViewVersion(!newVersion ? '2' : '1')"/>
      <span :class="newVersion?  'font-bold': ''">Новая версия</span>
  </div>
  <BudgetView v-if="!newVersion"/>
  <BudgetView2 v-else/>
</template>

<style scoped>

</style>