<script setup>
import { computed } from "vue";
import DataTable from "primevue/datatable";
import Column from "primevue/column";
import strings from "../strings.js";
import { WEEKDAYS as WEEKDAY_KEYS } from "../composables/useHoursApi.js";
import { addCalendarDaysIso } from "../composables/useHourWeekNavigate.js";

const props = defineProps({
  weekMondayIso: { type: String, required: true },
  lines: {
    /** @type {import('vue').PropType<Array<Record<string, unknown>>>} */
    type: Array,
    required: true,
  },
  registry: { type: Object, required: true },
});

/** @param {Record<string, unknown>} line */
function resolveLabel(line) {
  switch (line.registration_type) {
    case "internal": {
      const c = props.registry.internalCategories?.find((x) => Number(x.id) === Number(line.internal_category_id));

      return c ? `${strings.quickInternal}: ${c.name}` : `Internal (#${line.internal_category_id})`;
    }
    case "customer": {
      const c = props.registry.customers?.find((x) => Number(x.id) === Number(line.customer_id));

      return c ? `${strings.quickCustomer}: ${c.name}` : `Customer (#${line.customer_id})`;
    }
    case "project": {
      const p = props.registry.projects?.find((x) => Number(x.id) === Number(line.hour_project_id));

      return p ? `${strings.quickProject}: ${p.name}` : `Project (#${line.hour_project_id})`;
    }
    case "task": {
      const t = line._taskPickList?.find((x) => Number(x.id) === Number(line.hour_task_id));
      const name = t?.title ?? `#${line.hour_task_id}`;

      return `${strings.quickTask}: ${name}`;
    }

    default:
      return `${line.registration_type}`;
  }
}

const rows = computed(() => {
  /** @type {Array<{ id: string; date: string; target: string; hours: number; description: string; status: string }>} */
  const out = [];

  props.lines.forEach((line, lnIx) => {
    WEEKDAY_KEYS.forEach((d, ix) => {
      const iso = addCalendarDaysIso(props.weekMondayIso, ix);
      const durations = /** @type {Record<string, number>} */ (line?.durations ?? {});
      const hrs = typeof durations[d] === "number" ? durations[d] : Number(durations[d]) || 0;

      if (hrs <= 0) {
        return;
      }

      out.push({
        id: `${String(line?.id ?? "n-" + lnIx)}-${d}`,
        date: iso,
        target: resolveLabel(line),
        hours: hrs,
        description: String(line.description ?? ""),
        status: String(line.line_approval_status ?? ""),
      });
    });
  });

  out.sort((a, b) => (a.date < b.date ? -1 : a.date > b.date ? 1 : 0));

  return out;
});
</script>

<template>
  <div class="surface-card border-round-xl border border-surface-200 dark:border-surface-700 p-3 overflow-auto">
    <DataTable :value="rows" striped-rows size="small" class="text-sm">
      <Column field="date" header="Date" />
      <Column field="target" header="Target" />
      <Column field="hours" header="Hours" />
      <Column field="description" :header="strings.quickDescription" />
      <Column field="status" :header="strings.approvalStatus" />
    </DataTable>
  </div>
</template>
