<template>
  <div class="q-pa-sm">
    <q-table
      :rows="tasks"
      :columns="columns"
      :grid="$q.screen.xs"
      dense
      row-key="$id"
      flatten
      no-data-label="I didn't find anything for you"
      no-results-label="The filter didn't uncover any results"
      selection="multiple"
      v-model:selected="selected"
      :filter="searchFilter"
      :filter-method="filterRows"
    >
      <template v-slot:top>
        <q-select
          style="width: 250px"
          multiple
          use-chips
          clearable
          label="Skills Filter"
          input-debounce="250"
          :options="skillTagOptions"
          v-model="searchFilter.skillTags"
          option-label="name"
          option-value="$id"
        >
        </q-select>
        <q-select
          style="width: 250px"
          multiple
          use-chips
          clearable
          label="Tag Filter"
          input-debounce="250"
          :options="taskTagOptions"
          v-model="searchFilter.taskTags"
          option-label="name"
          option-value="$id"
        >
          <template v-slot: prepend>
            <q-icon name="wrench"></q-icon>
          </template>
        </q-select>
        <q-space />
        <q-input
          flatten
          debounce="300"
          color="primary"
          clearable
          v-model="searchFilter.title"
        >
          <template v-slot:append>
            <q-icon name="search" />
          </template>
        </q-input>
      </template>
      <template v-slot:header="props">
        <q-tr :props="props">
          <q-th key="desc" auto-width>
            <q-checkbox dense v-model="props.selected"></q-checkbox>
          </q-th>
          <q-th v-for="col in props.cols" :key="col.name" :props="props">
            {{ col.label }}
          </q-th>
        </q-tr>
      </template>

      <template v-slot:body-cell-skills="props">
        <q-td :props="props" class="q-gutter-sm">
          <q-badge
            v-for="skill in props.value"
            :key="skill"
            :color="skill.tagColour"
            text-color="white"
            :label="skill.name"
          />
        </q-td>
      </template>

      <template v-slot:body-cell-tags="props">
        <q-td :props="props" class="q-gutter-sm">
          <q-badge
            v-for="tag in props.value"
            :key="tag"
            :color="tag.colour"
            text-color="white"
            :label="tag.name"
          />
        </q-td>
      </template>
      <template v-slot:body-cell-actions="props">
        <q-td :props="props" class="q-gutter-sm">
          <q-btn
            label="Sign Up"
            size="sm"
            color="primary"
            :to="{ name: 'signup-task', params: { id: props.value } }"
          />
          <q-btn
            label="Edit"
            size="sm"
            color="primary"
            :to="{ name: 'edit-task', params: { id: props.value } }"
          />
        </q-td>
      </template>
      <template v-slot:item="props">
        <div
          class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3 grid-style-transition"
          :style="props.selected ? 'transform: scale(0.95);' : ''"
        >
          <q-card
            bordered
            flat
            :class="
              props.selected
                ? $q.dark.isActive
                  ? 'bg-grey-9'
                  : 'bg-grey-2'
                : ''
            "
          >
            <q-card-section>
              <q-checkbox
                dense
                v-model="props.selected"
                :label="props.row.name"
              />
            </q-card-section>
            <q-separator />
            <q-list dense>
              <q-item
                v-for="col in props.cols.filter((col:Boat) => col.name !== 'desc')"
                :key="col.name"
              >
                <q-item-section>
                  <q-item-label>{{ col.label }}</q-item-label>
                </q-item-section>
                <q-item-section side>
                  <q-item-label caption v-if="col.name === 'skills'">
                    <q-chip
                      size="sm"
                      v-for="skill in col.value"
                      outline
                      color="primary"
                      :key="skill.$id"
                      >{{ skill.name }}</q-chip
                    ></q-item-label
                  >
                  <q-item-label caption v-else-if="col.name === 'tags'">
                    <q-chip
                      size="sm"
                      v-for="tag in col.value"
                      outline
                      color="primary"
                      :key="tag.$id"
                      >{{ tag.name }}</q-chip
                    ></q-item-label
                  >
                  <q-item-label caption v-else-if="col.name === 'actions'">
                    <q-btn
                      label="Sign Up"
                      size="sm"
                      color="primary"
                      :to="{ name: 'signup-task', params: { id: col.value } }"
                    />
                    <q-btn
                      label="Edit"
                      size="sm"
                      color="primary"
                      :to="{ name: 'edit-task', params: { id: col.value } }"
                    />
                  </q-item-label>
                  <q-item-label v-else caption>{{ col.value }}</q-item-label>
                </q-item-section>
              </q-item>
            </q-list>
          </q-card>
        </div>
      </template>
    </q-table>
    <q-page-sticky position="bottom-right" :offset="[18, 18]">
      <q-fab
        v-model="fabShow"
        vertical-actions-align="right"
        color="primary"
        glossy
        icon="keyboard_arrow_up"
        direction="up"
      >
        <q-fab-action
          color="primary"
          :disable="loading"
          label="New Task"
          to="/task/edit"
          icon="add"
        />
        <q-fab-action
          v-if="tasks.length !== 0"
          class="q-ml-sm"
          color="primary"
          :disable="loading"
          label="Delete task(s)"
          @click="deleteTasks"
          icon="delete"
        /> </q-fab
    ></q-page-sticky>
  </div>
</template>

<script setup lang="ts">
import { computed, defineProps, ref } from 'vue';
import { useTaskStore, Task, SkillTag, TaskTag } from 'src/stores/task';
import { QTableProps, date, useQuasar } from 'quasar';
import { Boat, useBoatStore } from 'src/stores/boat';

const selected = ref([]);
const loading = ref(false); // Placeholder
const fabShow = ref(false);
const columns = <QTableProps['columns']>[
  {
    name: 'title',
    required: true,
    label: 'Title',
    align: 'left',
    field: 'title',
    sortable: true,
  },
  {
    name: 'due_date',
    align: 'left',
    label: 'Due Date',
    field: 'due_date',
    format: (val) => date.formatDate(val, 'MMM DD, YYYY'),
    sortable: true,
  },
  {
    name: 'status',
    align: 'left',
    label: 'Status',
    field: 'status',
    sortable: true,
  },
  {
    name: 'skills',
    align: 'left',
    label: 'Skills',
    field: (row) =>
      row.required_skills.map((s: string) => taskStore.getSkillById(s)),
    sortable: false,
  },
  {
    name: 'tags',
    align: 'left',
    label: 'Tags',
    field: (row) => row.tags.map((s: string) => taskStore.getTaskTagById(s)),
    sortable: false,
  },
  {
    name: 'boat',
    align: 'left',
    label: 'Boat',
    field: (row) =>
      useBoatStore().boats.find((boat) => boat.$id === row.boat)?.name,
    sortable: true,
  },
  {
    name: 'volunteers',
    align: 'left',
    label: "People Req'd",
    field: 'volunteers_required',
    sortable: false,
  },
  {
    name: 'signedup',
    align: 'left',
    label: 'Signed Up',
    field: (row) => row.volunteers.length,
    sortable: false,
  },
  {
    name: 'depends',
    align: 'left',
    label: 'Dependent Tasks',
    field: 'depends_on',
    format: (val) => {
      return (
        val
          .map((t: string) => taskStore.getTaskById(t))
          .filter((t: Task) => t)
          .map((t: Task) => t.title)
          .join(', ') || null
      );
    },
  },
  { name: 'actions', align: 'center', label: 'Actions', field: '$id' },
];

defineProps<{ tasks: Task[] }>();
const taskStore = useTaskStore();
const $q = useQuasar();

interface SearchObject {
  title: string;
  skillTags: SkillTag[];
  taskTags: TaskTag[];
}

const searchFilter = ref<SearchObject>({
  title: '',
  skillTags: [],
  taskTags: [],
});

const skillTagOptions = ref<SkillTag[]>(taskStore.skillTags);
const taskTagOptions = ref<TaskTag[]>(taskStore.taskTags);

// function onRowClick(evt: Event, row: Task) {
//   router.push({ name: 'edit-task', params: { id: row.$id } });
// }
// TODO: Implement server side search
const filterRows = computed(
  () => (rows: readonly Task[], terms: SearchObject) => {
    return rows
      .filter((row) =>
        terms.title
          ? row.title.toLowerCase().includes(terms.title.toLowerCase())
          : true
      )
      .filter((row) =>
        terms.skillTags && terms.skillTags.length > 0
          ? row.required_skills.some((req_skill) =>
              terms.skillTags.map((t) => t.$id).includes(req_skill)
            )
          : true
      )
      .filter((row) =>
        terms.taskTags && terms.taskTags.length > 0
          ? row.tags.some((tag) =>
              terms.taskTags.map((t) => t.$id).includes(tag)
            )
          : true
      );
  }
);

function deleteTasks() {
  confirmDelete(selected.value);
}
function confirmDelete(tasks: Task[]) {
  $q.dialog({
    title: 'Confirm',
    message:
      'You are about to delete ' + tasks.length + ' tasks.  Are you sure?',
    cancel: true,
    persistent: true,
  }).onOk(() => {
    selected.value.map((task: Task) => {
      taskStore.deleteTask(task);
      return;
    });
  });
}
</script>
