<script setup lang="ts">
import {Ledger, systemLedger, useLedgersStore} from "@/ledger/ledger.ts";
import {storeToRefs} from "pinia";
import {computed} from "vue";

interface Props {
  ledgers?: Ledger[];
}

const props = defineProps<Props>()
const ledger = defineModel<Ledger>();
const {ledgers: allLedgers} = storeToRefs(useLedgersStore());

const ledgersToUse = computed(() => props.ledgers || allLedgers);
const ledgerId = computed({
  get: () => ledger.value?.ledgerId,
  set: value => ledger.value = ledgersToUse.value.find(l => l.ledgerId === value)
})

</script>

<template>
  <select v-model="ledgerId" :class="{'system-ledger': ledger === systemLedger}">
    <option v-for="l in ledgersToUse" :key="l.ledgerId" :value="l.ledgerId" :class="{'system-ledger': l === systemLedger}">{{ l.name }}</option>
  </select>
</template>

<style scoped>
@reference "@/style.css";

.system-ledger {
  @apply text-emerald-400;
}
</style>