<script setup lang="ts">
import { getNoteReferences, setActiveNote, findNotes, deleteNote } from '@/composables/useNotes'
import { formatDate } from '@/utils/helpers'

const notesWithReferences = computed(() => {
  return findNotes(filter.value).map((note) => ({
    ...note,
    references: getNoteReferences(note)
  }))
})

const selectedNotes = ref<{ [key: string]: Boolean }>({})
const countSelectedNotes = computed<number>(
  () => Object.entries(selectedNotes.value).filter(([, selected]) => Boolean(selected)).length
)

const toggleRow = (note: Note) => {
  if (!note.isRoot) selectedNotes.value[note.id] = !selectedNotes.value[note.id]
}

const filter = ref<string>('')

const deleteSelectedNotes = (closeModal: () => void) => {
  closeModal()
  const notesToDelete = Object.entries(selectedNotes.value)
    .filter(([, selected]) => Boolean(selected))
    .map(([id]) => id)
  notesToDelete.forEach((noteId) => deleteNote(noteId))
  selectedNotes.value = {}
}
</script>
<template>
  <div class="flex flex-col gap-2 overflow-x-auto">
    <div class="flex items-center gap-2">
      <div class="flex items-center">
        <span class="whitespace-nowrap">
          {{ notesWithReferences.length }} {{ notesWithReferences.length === 1 ? 'note' : 'notes' }}
        </span>
        <template v-if="countSelectedNotes > 0">
          <span class="mx-1">|</span>
          <div class="whitespace-nowrap font-semibold">{{ countSelectedNotes }} selected</div>
        </template>
      </div>
      <Modal v-if="countSelectedNotes > 0">
        <template #activator="{ open }">
          <button class="btn-toolbar btn-sm btn" @click="open">Delete</button>
        </template>
        <template #default>Are you sure you want to delete the selected notes?</template>
        <template #actions="{ close }">
          <button class="btn-primary btn-sm btn" @click="deleteSelectedNotes(close)">
            Delete selected notes
          </button>
          <button class="btn-sm btn" @click="close">Close</button>
        </template>
      </Modal>
      <input
        type="text"
        placeholder="Start typing to filter"
        class="input-bordered input input-sm my-1 ml-auto mr-1 max-w-xs flex-grow"
        v-model="filter"
      />
    </div>
    <table class="table-compact table w-full">
      <thead>
        <tr>
          <th class="w-[48px]"></th>
          <th>Note title</th>
          <th class="w-[75px]">Words</th>
          <th class="w-[100px]">References</th>
          <th class="w-[150px]">Modified</th>
        </tr>
      </thead>
      <tbody>
        <tr
          v-for="note in notesWithReferences"
          :key="note.id"
          class="hover hover:cursor-pointer"
          @click="setActiveNote(note.id)"
        >
          <th @click.stop="toggleRow(note)" class="text-center">
            <label>
              <input
                type="checkbox"
                class="checkbox-primary checkbox checkbox-sm border-secondary"
                :checked="Boolean(selectedNotes[note.id])"
                :disabled="note.isRoot"
              />
            </label>
          </th>
          <td>
            <i class="fas fa-fw fa-home mr-1 text-secondary" v-if="note.isRoot" />
            {{ note.title }}
          </td>
          <td>{{ note.wordCount }}</td>
          <td>
            <div class="badge" v-if="note.references.length > 0">
              <i data-v-41bbc26f="" class="fas fa-fw fa-sign-out-alt mr-1"></i>
              {{ note.references.length }}
            </div>
          </td>
          <td>{{ formatDate(note.modified) }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
