<template>
  <div class="q-pa-md">
    <q-table
      :rows="tasks"
      :columns="columns"
      row-key="$id"
      no-data-label="I didn't find anything for you"
      no-results-label="The filter didn't uncover any results"
    >
      <template v-slot:top>
        <q-btn
          color="primary"
          :disable="loading"
          label="New Task"
          to="/task/new"
        />
        <q-btn
          v-if="tasks.length !== 0"
          class="q-ml-sm"
          color="primary"
          :disable="loading"
          label="Delete task(s)"
          @click="deleteTask"
        />
        <q-space />
        <q-input
          borderless
          dense
          debounce="300"
          color="primary"
          v-model="filter"
        >
          <template v-slot:append>
            <q-icon name="search" />
          </template>
        </q-input>
      </template>
    </q-table>
  </div>
</template>

<script setup lang="ts">
import { defineProps, ref } from 'vue';
import { useTaskStore, Task } from 'src/stores/task';
import type { QTableProps } from 'quasar';

const loading = ref(false); // Placeholder
const columns = <QTableProps['columns']>[
  {
    name: 'title',
    required: true,
    label: 'Title',
    align: 'left',
    field: 'title',
    sortable: true,
  },
  {
    name: 'description',
    align: 'left',
    label: 'Description',
    field: 'description',
    sortable: false,
  },
  {
    name: 'status',
    align: 'left',
    label: 'Status',
    field: 'status',
    sortable: true,
  },
];

const props = defineProps<{ tasks: Task[] }>();
const taskStore = useTaskStore();
taskStore.fetchTaskTags();
taskStore.fetchSkillTags();

function newTask() {
  return;
}
function deleteTask() {
  return;
}
const filter = ref('');
</script>
