<template>
  <div class="bg-neutral-10 border border-neutral-300 rounded-xl px-4 h-full">
    <div class="flex justify-between items-center my-2">
      <p class="h2">{{ tableTitle }}&nbsp;({{ data.length }})</p>
    </div>
    <!-- Table -->
    <div
      class="overflow-y-auto overflow-x-auto scrollbar -mx-2 h-[calc(100%_-_64px)]"
    >
      <DataTable
        v-model:selection="select"
        :value="data"
        breakpoint="0"
        tableClass="w-full !border-separate !border-spacing-x-2 !table-auto text-sm"
        @row-select="onRowSelect"
        @row-unselect="onRowUnselect"
        @row-select-all="onRowSelectAll"
        @row-unselect-all="onRowUnelectAll"
      >
        <ColumnGroup type="header">
          <Row>
            <Column
              selectionMode="multiple"
              headerClass="w-8 !p-2 !bg-neutral-10 !border-neutral-500 sticky top-0 left-0 z-10 bg-neutral-10 allCheckboxAct"
            ></Column>
            <Column
              field="label"
              header="Activity"
              headerClass="!bg-neutral-10 !border-neutral-500 !py-2 sticky top-0 left-0 z-10 bg-neutral-10"
              sortable
            />
            <Column
              field="occurrences_base"
              header="Occurrences"
              headerClass="!bg-neutral-10 !border-neutral-500 !py-2 sticky top-0 left-0 z-10 bg-neutral-10"
              sortable
              :colspan="3"
            />
            <Column
              field="cases_base"
              headerClass="!bg-neutral-10 !border-neutral-500 !py-2 sticky top-0 left-0 z-10 bg-neutral-10"
              header="Cases with Activity"
              sortable
              :colspan="3"
            />
          </Row>
        </ColumnGroup>
        <Column selectionMode="multiple" bodyClass="!p-2 !border-0"></Column>
        <Column
          field="label"
          header="Activity"
          bodyClass="break-words !py-2 !border-0"
        ></Column>
        <Column header="Progress" bodyClass="!py-2 !border-0 min-w-[96px]">
          <template #body="slotProps">
            <div class="h-4 w-full bg-neutral-300 rounded-sm overflow-hidden">
              <div
                class="h-full bg-primary"
                :style="progressWidth(slotProps.data.occ_value)"
              ></div>
            </div>
          </template>
        </Column>
        <Column
          field="occurrences"
          header="Occurrences"
          bodyClass="!text-right !py-2 !border-0"
        ></Column>
        <Column
          field="occurrence_ratio"
          header="O2"
          bodyClass="!text-right !py-2 !border-0"
        ></Column>
        <Column header="Progress" bodyClass="!py-2 !border-0 min-w-[96px]">
          <template #body="slotProps">
            <div class="h-4 w-full bg-neutral-300 rounded-sm overflow-hidden">
              <div
                class="h-full bg-primary"
                :style="progressWidth(slotProps.data.case_value)"
              ></div>
            </div>
          </template>
        </Column>
        <Column
          field="cases"
          header="Cases with Activity"
          bodyClass="!text-right !py-2 !border-0"
        ></Column>
        <Column
          field="case_ratio"
          header="C2"
          bodyClass="!text-right !py-2 !border-0"
        ></Column>
      </DataTable>
    </div>
  </div>
</template>

<script setup>
// The Lucia project.
// Copyright 2023-2026 DSP, inc.  All rights reserved.
// Authors:
//   chiayin.kuo@dsp.im (chiayin), 2023/1/31
/**
 * @module components/Discover/Map/Filter/ActOccCase Activity
 *   occurrences and cases filter table with multi-row checkbox
 *   selection.
 */

import { ref, watch } from "vue";

const props = defineProps([
  "tableTitle",
  "tableData",
  "tableSelect",
  "progressWidth",
]);

const emit = defineEmits(["on-row-select"]);

const select = ref(null);
const data = ref(props.tableData);

watch(
  () => props.tableSelect,
  (newval) => {
    select.value = newval;
  },
);

/** Emits the current selection when a row is selected. */
function onRowSelect() {
  emit("on-row-select", select.value);
}

/** Emits the current selection when a row is unselected. */
function onRowUnselect() {
  emit("on-row-select", select.value);
}

/**
 * Handles select-all rows action.
 * @param {Event} e - The select-all event with data property.
 */
function onRowSelectAll(e) {
  select.value = e.data;
  emit("on-row-select", select.value);
}

/**
 * Handles unselect-all rows action.
 * @param {Event} e - The unselect-all event.
 */
function onRowUnelectAll(e) {
  select.value = null;
  emit("on-row-select", select.value);
}
</script>
