<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 legerId = computed({
  get: () => ledger.value?.ledgerId,
  set: value => ledger.value = ledgersToUse.value[ledgersToUse.value.findIndex(x => x.value === value)]
})

</script>

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

<style scoped>
@reference "tailwindcss";

.system-ledger {
  @apply text-emerald-400;
}

</style>