<template>
  <template v-for="(container, index) in data.containers" :key="index">
    <h4>{{ localizeString(container.layer.name) }}</h4>
    <ul>
      <li v-for="(unit, index) in container.units" :key="index">
        {{ unit.unitName }} ({{ unit.unitRefId }})
      </li>
    </ul>
  </template>
</template>

<script lang="ts" setup>
import {
  Address,
  GeographicalUnitLayer,
  SimpleGeographicalUnit,
} from "../../../../types";
import {
  getGeographicalUnitsByAddress,
  getAllGeographicalUnitLayers,
} from "../../../../lib/api/address";
import { onMounted, reactive } from "vue";
import { localizeString } from "ChillMainAssets/lib/localizationHelper/localizationHelper";

export interface AddressDetailsGeographicalLayersProp {
  address: Address;
}

interface GeographicalUnitContainer {
  layer: GeographicalUnitLayer;
  units: SimpleGeographicalUnit[];
}

const props = defineProps<AddressDetailsGeographicalLayersProp>();

const data: {
  containers: GeographicalUnitContainer[];
} = reactive({
  containers: [],
});

onMounted(async () => {
  const [units, layers] = (await Promise.all([
    getGeographicalUnitsByAddress(props.address),
    getAllGeographicalUnitLayers(),
  ])) as [SimpleGeographicalUnit[], GeographicalUnitLayer[]];

  for (let layer of layers) {
    let us = units.filter((u) => u.layerId === layer.id);
    if (us.length > 0) {
      data.containers.push({
        layer,
        units: us,
      });
    }
  }
});
</script>

<style scoped></style>
