<script setup>
import {adaptVTableHeader} from "@/store/utils";
import {use_log_store} from "@/store/log";
import {computed, reactive, ref} from "vue";

const headers = adaptVTableHeader([
    'Id',
    'Date',
    'User',
    'Context',
    'Type',
    'Danger'
  ],
  'start',
  false,
  ['danger', 'type', 'user']
)

function danger_level_color(level) {
  switch (level) {
    case 1:
      return 'blue'
    case 2:
      return 'orange'
    case 3:
      return 'red'
  }
}

const log_store = use_log_store()

let data = ref([]);

// This would make it live update, but for now we don't really need that.
// const logs = liveQuery(
//   () => log_store.db.logs.toArray()
// )
// logs.subscribe({
//   next: result => data.value = result
// })

log_store.db.table('logs').toArray().then((res) => data.value = res)

let active_filters = reactive({})

function add_or_remove_filter(key, element) {
  // If the element does not exist on the key, we add it, otherwise we remove it.
  let l = active_filters[key]
  if (l) {
    if (l.includes(element)) {
      const index = l.indexOf(element)
      l.splice(index, 1)
    } else {
      l.push(element)
    }
  } else {
    active_filters[key] = [element,]
  }
}

function is_filtered(key, element) {
  // Checks whether the given element is being filtered out in the given key
  // We consider an element to be filtered out if they are present in active_filters[key]
  const l = active_filters[key]
  if (l) {
    return active_filters[key].includes(element)
  }
  return false
}

function get_unique_values(data, key) {
  const elements = data.map((el) => el[key])
  return [...new Set(elements)]
}

let filtered_data = computed(() => {
  return data.value.filter((el) => {
    for (const key of Object.keys(active_filters)) {
      if (active_filters[key]) {
        if (is_filtered(key, el[key])) {
          return false
        }
      }
    }
    return true
  })
})

</script>

<template>

  <v-row class="pt-2">
    <v-col>
      <v-label text="These logs are generated by the Admin-UI actions, queries executed outside of this
        admin tool, are not logged."/>
    </v-col>
  </v-row>

  <v-row>
    <v-col>

      <v-data-table :headers="headers"
                    :items="filtered_data"
                    :items-per-page="25"
                    density="compact"
                    item-key="name"
                    class="rounded border-sm">

        <template v-slot:[`item.type`]="{ item }">
          <v-chip label>{{ item.type }}</v-chip>
        </template>

        <template v-slot:[`item.danger`]="{ item }">
          <v-chip label
                  :color="danger_level_color(item.danger)"
                  :text="item.danger"/>
        </template>

        <template v-slot:headers="{ items, columns, isSorted, getSortIcon, toggleSort }">
          <tr>
            <template v-for="column in columns" :key="column.key">

              <td v-if="column.filter_special">

                <span class="mr-2">{{ column.title }}</span>

                <v-menu :close-on-content-click="false"
                        transition="scale-transition">

                  <template v-slot:activator="{ props }">
                    <v-btn icon="mdi-filter-variant" flat size="x-small" v-bind="props"/>
                  </template>

                  <v-list>
                    <v-list-item v-for="(item, i) in get_unique_values(data, column.key)"
                                 :key="i">

                      <template v-slot:prepend="{ isActive }">
                        <v-list-item-action start>
                          <v-checkbox-btn :model-value="!is_filtered(column.key, item)"
                                          @click="add_or_remove_filter(column.key, item)"/>
                        </v-list-item-action>
                      </template>

                      <v-list-item-title>{{ item }}</v-list-item-title>

                    </v-list-item>
                  </v-list>
                </v-menu>
              </td>

              <td v-else>
                <span class="mr-2">{{ column.title }}</span>
              </td>

            </template>
          </tr>
        </template>

      </v-data-table>

    </v-col>
  </v-row>
</template>

<style scoped>

</style>
