<script setup lang="ts">
import {useRoute, useRouter} from "vue-router";
import {ref, watch} from "vue";
import {useDebounceFn} from "@vueuse/core";
import log from "loglevel";
import {activityTypes, RuleInput, Rules, useRuleBooksStore} from "@/rules";
import {PlusIcon, TrashIcon} from "@heroicons/vue/24/outline";
import {routeNames} from "@/routes";
import {Dropdown} from "@/components";

const ruleBookId = ref<string>();
const name = ref<string>('');
const ledgerRefs = ref<string[]>([]);
const rules = ref<Rules>({});

const {findById, create, update, refresh} = useRuleBooksStore();
const router = useRouter();

const save = async () => {
  if (!ruleBookId.value) {
    const created = await create({
      name: name.value,
      ledgerRefs: ledgerRefs.value,
      rules: rules.value
    })
    await router.push({ name: routeNames.editRuleBook, params: {ruleBookId: created.ruleBookId}})

  } else {
    await update(ruleBookId.value, {
      name: name.value,
      ledgerRefs: ledgerRefs.value,
      rules: rules.value
    })
  }
}

const addLedgerRef = () => {
  ledgerRefs.value = [...ledgerRefs.value, '']
}
const updateLedgerRef = useDebounceFn((index: number, value: string) => {
  ledgerRefs.value[index] = value;
}, 500);

const removeLedgerRef = (index: number) => {
  ledgerRefs.value = ledgerRefs.value.toSpliced(index, 1)
}

watch(useRoute(), async route => {
  if (route.params.ruleBookId) {
    const promise = refresh(); // FIXME don't call refresh

    const id = typeof route.params.ruleBookId === 'string' ? route.params.ruleBookId : route.params.ruleBookId[0];

    await promise;

    const ruleBook = findById(id);

    ruleBookId.value = id;
    name.value = ruleBook?.name ?? '';
    ledgerRefs.value = [...ruleBook?.ledgerRefs];
    rules.value = {...ruleBook?.rules}; // TODO fully clone rules
    log.info('Loaded rule book:', ruleBook);
  } else {
    ruleBookId.value = undefined;
    name.value = '';
    ledgerRefs.value = [];
    rules.value = {};
    log.info('No rule book to load');
  }
}, { immediate: true })
</script>

<template>
  <div  class="grid mb-2 mt-4">
    <div class="flex flex-col">
      <div class="flex grow border-b-1">
        Name:
        <input class="mb-2 ms-2" type="text" v-model="name" />
      </div>
      <div class="border-b-1">
        Ledgers References:
        <div class="flex flex-wrap items-center">
          <div class="flex items-center mb-2" v-for="(ledgerRef, index) in ledgerRefs" :key="index">
            <input class="me-1" type="text" :value="ledgerRefs[index]" @input="updateLedgerRef(index, ($event.target as HTMLInputElement).value)" />
            <button class="btn-icon me-2" @click="removeLedgerRef(index)"><TrashIcon /></button>
          </div>
          <div class="flex items-center mb-2">
            <button class="btn-icon" @click="addLedgerRef"><PlusIcon /></button>
          </div>
        </div>
      </div>
      <div class="flex flex-col grow border-b-1" v-for="activityType in activityTypes" :key="activityType.key">
        <Dropdown :inline="true" :autoClose="false" class="rule-dropdown">
          <template #button>
            <span>{{ activityType.name }}</span>
          </template>
          <RuleInput :ledgerRefs="ledgerRefs" :activityType="activityType.key" v-model="rules[activityType.key]" />
        </Dropdown>

      </div>
    </div>
    <div class="mt-2 justify-end flex">
      <div>
        <button @click="save">Save</button>
      </div>
    </div>
  </div>
</template>

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

.rule-dropdown :deep(>button) {
  @apply bg-slate-800 hover:bg-slate-800 border-none flex items-center w-full;
}

.rule-dropdown.dropdown-open :deep(>button) {
  @apply bg-slate-800 rounded-b-none;
}
</style>