<template>
  <v-row no-gutters class="px-5 pt-4">
    <!-- Anyone affected/injured -->
    <v-col cols="12" class="border-b pb-5 mb-5 mt-1">
      <p class="mb-2" style="font-size: 17px; font-weight: 600">
        Anyone affected/injured?
      </p>
      <p
        v-if="affectedEntities?.anyoneAffectedValue == 'no'"
        class="my-1 text-h6 text-capitalize"
      >
        {{ affectedEntities?.anyoneAffectedValue }}
      </p>

      <v-data-table
        v-else
        :headers="injuredTableHeader"
        :items="affectedEntities?.affectedInjured"
        fixed-header
        hide-default-footer
        :hide-default-header="false"
        items-per-page="100"
        style="max-height: calc(100vh - (200px))"
        class="border mt-5"
      >
        <template #header.nric>
          <div class="d-flex align-center">
            NRIC
            <v-icon
            v-if="isShowEyeIcon"
              class="cursor-pointer ml-1"
              size="18"
              color="blue"
              @click="isShowNRIC = !isShowNRIC"
            >
              {{ isShowNRIC ? "mdi-eye-off-outline" : "mdi-eye-outline" }}
            </v-icon>
          </div>
        </template>
        <template #item.nric="{ value }">
          <tr>
            {{
              maskedNric(value)
            }}
          </tr>
        </template>
      </v-data-table>
    </v-col>

    <!-- Anyone damage to property -->
    <v-col cols="12" class="pb-5 mb-5 mt-1">
      <p class="mb-2" style="font-size: 17px; font-weight: 600">
        Anyone damage to property?
      </p>
      <p
        v-if="affectedEntities?.anyUnitAffectedValue == 'no'"
        class="my-1 text-h6 text-capitalize"
      >
        {{ affectedEntities?.anyUnitAffectedValue }}
      </p>

      <v-data-table
        v-else
        :headers="damagePropertyTableHeader"
        :items="affectedEntities?.anyoneDamageToProperty"
        fixed-header
        hide-default-footer
        :hide-default-header="false"
        items-per-page="100"
        style="max-height: calc(100vh - (200px))"
        class="border mt-5"
      >
      </v-data-table>
    </v-col>
  </v-row>
</template>

<script lang="ts" setup>
definePageMeta({
  middleware: ["01-auth", "02-org"],
  memberOnly: true,
});

// imports

// utilities

// props
const props = defineProps({
  affectedEntities: {
    type: Object as PropType<Record<string, any> | null>,
    required: true,
  },
  isShowEyeIcon: {
    type: Boolean,
    required: true,
  },
});

// emits

// state
const injuredTableHeader = [
  {
    title: "Name",
    value: "name",
  },
  {
    title: "NRIC/WP No.",
    value: "nric",
  },
  {
    title: "Contact Number",
    value: "contact",
  },
  {
    title: "Block / Level / Unit Location",
    value: "incidentLocation",
  },
  {
    title: "Remarks",
    value: "remarks",
  },
];

const damagePropertyTableHeader = [
  {
    title: "Description",
    value: "description",
  },
  {
    title: "Block / Level / Unit",
    value: "blkLevelUnit",
  },
  {
    title: "Name",
    value: "name",
  },
  {
    title: "Contact Number",
    value: "contact",
  },
];

const isShowNRIC = ref(false);

const maskedNric = (nric: string) => {
  if (!nric) return "";
  if (isShowNRIC.value) return nric;
  return nric[0] + "*".repeat(nric.length - 5) + nric.slice(-4);
};
</script>
