<template>
  <DataTable
    :value="attendances"
    :paginator="true"
    :rows="10"
    :rows-per-page-options="[5, 10, 20, 50]"
    :total-records="totalRecords"
    class="p-datatable-sm"
    :loading="loading"
    data-key="id"
    current-page-report-template="Showing {first} to {last} of {totalRecords}"
    responsive-layout="scroll"
    @page="onPageChange"
  >
    <!-- Column for Name -->
    <Column
      field="title"
      header="Name"
      sortable
    >
      <template #body="slotProps">
        <RouterLink
          :to="{
            name: 'AttendanceSheetList',
            params: {
              node: route.params.node,
              id: slotProps.data.id,
            },
            query: {
              cid: route.query.cid,
              sid: route.query.sid,
              gid: route.query.gid,
            },
          }"
          class="text-blue-500 underline"
        >
          {{ slotProps.data.title }}
        </RouterLink>
      </template>
    </Column>

    <!-- Column for Description -->
    <Column
      field="description"
      header="Description"
      sortable
    >
      <template #body="slotProps">
        <div v-html="slotProps.data.description"></div>
      </template>
    </Column>

    <!-- Column for # attended -->
    <Column
      field="results.length"
      header="# attended"
      sortable
    >
      <template #body="slotProps">
        <center>{{ slotProps.data.results ? slotProps.data.results.length : 0 }}</center>
      </template>
    </Column>

    <!-- Column for Detail -->
    <Column header="Detail">
      <template #body="slotProps">
        <div class="flex gap-2 justify-center">
          <Button
            icon="pi pi-pencil"
            class="p-button-rounded p-button-sm p-button-info"
            @click="onEdit(slotProps.data)"
            tooltip="Edit"
          />
          <Button
            :icon="getVisibilityIcon(slotProps.data)"
            class="p-button-rounded p-button-sm"
            :class="getVisibilityClass(slotProps.data)"
            @click="onView(slotProps.data)"
            :tooltip="getVisibilityTooltip(slotProps.data)"
          />
          <Button
            icon="pi pi-trash"
            class="p-button-rounded p-button-sm p-button-danger"
            @click="onDelete(slotProps.data)"
            tooltip="Delete"
          />
        </div>
      </template>
    </Column>
  </DataTable>
</template>
<script setup>
import { useRoute } from "vue-router"

const route = useRoute()

const props = defineProps({
  attendances: {
    type: Array,
    required: true,
  },
  loading: {
    type: Boolean,
    default: false,
  },
  totalRecords: {
    type: Number,
    default: 0,
  },
})

const emit = defineEmits(["edit", "view", "delete", "pageChange"])

const onEdit = (attendance) => emit("edit", attendance)
const onView = (attendance) => emit("view", attendance)
const onDelete = (attendance) => emit("delete", attendance)
const onPageChange = (event) => emit("pageChange", event)

const getVisibilityIcon = (attendance) => {
  const visibility = attendance.resourceLinkListFromEntity?.[0]?.visibility || 0
  return visibility === 2 ? "pi pi-eye" : "pi pi-eye-slash"
}

const getVisibilityClass = (attendance) => {
  const visibility = attendance.resourceLinkListFromEntity?.[0]?.visibility || 0
  return visibility === 2 ? "p-button-success" : "p-button-warning"
}

const getVisibilityTooltip = (attendance) => {
  const visibility = attendance.resourceLinkListFromEntity?.[0]?.visibility || 0
  return visibility === 2 ? "Visible" : "Hidden"
}
</script>
