<template>
  <div
    class="bg-neutral-10 border border-neutral-300 rounded-xl px-4 w-full h-full"
  >
    <div class="flex justify-between items-center my-2 flex-wrap">
      <p class="h2">{{ tableTitle }}&nbsp;({{ tableData.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="tableData"
        dataKey="label"
        breakpoint="0"
        tableClass="w-full !border-separate !border-spacing-x-2 !table-auto text-sm"
        @row-select="onRowSelect"
      >
        <ColumnGroup type="header">
          <Row>
            <Column
              selectionMode="single"
              headerClass="w-8 !p-2 !bg-neutral-10 !border-neutral-500 sticky top-0 left-0 z-10 bg-neutral-10"
            ></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"
            />
          </Row>
        </ColumnGroup>
        <Column selectionMode="single" 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="Occurrence Ratio"
          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/ActOcc Activity
 *   occurrences filter table with single-row radio selection.
 */

import { ref, watch } from "vue";

const props = defineProps({
  tableTitle: {
    type: String,
    required: true,
  },
  tableData: {
    type: Array,
    required: true,
  },
  tableSelect: {
    type: [Object, Array],
    default: null,
  },
  progressWidth: {
    type: Function,
    required: false,
  },
});

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

const select = ref(null);
const metaKey = ref(true);

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

/**
 * Emits the selected row to the parent component.
 * @param {Event} e - The row selection event.
 */
function onRowSelect(e) {
  emit("on-row-select", e);
}
</script>
