<template>
  <div v-if="action === 'show' && person !== null">
    <div class="flex-table">
      <person-render-box
        render="bloc"
        :person="person"
        :options="{
          addInfo: true,
          addEntity: false,
          addAltNames: true,
          addAge: true,
          addId: true,
          addLink: false,
          hLevel: 3,
          addCenter: true,
          addNoData: true,
          isMultiline: true,
        }"
        :show-residential-addresses="true"
      />
    </div>
  </div>

  <div v-else-if="props.action === 'edit' || props.action === 'create'">
    <PersonEdit
      :id="props.id"
      :type="props.type"
      :action="props.action"
      :query="props.query"
    />
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { getPerson } from "../../_api/OnTheFly";
import PersonRenderBox from "../Entity/PersonRenderBox.vue";
import PersonEdit from "./PersonEdit.vue";
import type { Person } from "ChillPersonAssets/types";

interface Props {
  id: number;
  type?: string;
  action: "show" | "edit" | "create";
  query?: string;
}

const props = withDefaults(defineProps<Props>(), { query: "" });

const person = ref<Person | null>(null);

function loadData(): void {
  if (props.id === undefined || props.id === null) {
    return;
  }
  const idNum = props.id;
  if (!Number.isFinite(idNum)) {
    return;
  }
  getPerson(idNum as number).then((p) => {
    person.value = p;
  });
}

onMounted(() => {
  if (props.action !== "create") {
    loadData();
  }
});
</script>
