<template>
  <div class="container tpartycontainer">
    <div class="tparty-identification">
      <span
        v-if="
          (isThirdpartyChild(item.result) ||
            isThirdpartyContact(item.result)) &&
          item.result.profession
        "
        class="profession"
        >{{ item.result.profession }}</span
      >
      <span class="name"> {{ item.result.text }}&nbsp; </span>
      <span class="location">
        <template v-if="hasAddress">
          {{ getAddress?.text }} -
          {{ getAddress?.postcode?.name }}
        </template>
      </span>
    </div>
    <div
      class="tpartyparent"
      v-if="isThirdpartyChild(item.result) && null !== item.result.parent"
    >
      <span class="name"> &gt; {{ item.result.parent.text }} </span>
    </div>
  </div>

  <div class="right_actions">
    <badge-entity :entity="item.result" :options="{ displayLong: true }" />
    <a
      v-if="item.result.type === 'thirdparty' && item.result.kind === 'company'"
      class="btn btn-tpchild"
      @click="emit('triggerAddContact', { parent: item.result })"
      ><i class="bi bi-person-fill-add"></i
    ></a>
    <on-the-fly type="thirdparty" :id="item.result.id" action="show" />
  </div>
</template>

<script lang="ts" setup>
import { computed, ref } from "vue";
import OnTheFly from "ChillMainAssets/vuejs/OnTheFly/components/OnTheFly.vue";
import BadgeEntity from "ChillMainAssets/vuejs/_components/BadgeEntity.vue";
import { makeFetch } from "ChillMainAssets/lib/api/apiMethods";
import { useToast } from "vue-toast-notification";
import { Result, Suggestion } from "ChillPersonAssets/types";
import {
  isThirdpartyChild,
  isThirdpartyContact,
  Thirdparty,
  ThirdpartyCompany,
} from "./../../../../../../ChillThirdPartyBundle/Resources/public/types";

interface TypeThirdPartyProps {
  item: Suggestion & { result: Thirdparty };
}

const props = defineProps<TypeThirdPartyProps>();

const emit =
  defineEmits<
    (e: "triggerAddContact", payload: { parent: ThirdpartyCompany }) => void
  >();

const onTheFly = ref<InstanceType<typeof OnTheFly> | null>(null);
const toast = useToast();

const hasAddress = computed(() => {
  if (props.item.result.address !== null) {
    return true;
  }
  if (
    isThirdpartyChild(props.item.result) &&
    props.item.result.parent !== null
  ) {
    return props.item.result.parent.address !== null;
  }

  return false;
});

const getAddress = computed(() => {
  if (props.item.result.address !== null) {
    return props.item.result.address;
  }
  if (
    isThirdpartyChild(props.item.result) &&
    props.item.result.parent !== null &&
    props.item.result.parent.address !== null
  ) {
    return props.item.result.parent.address;
  }
  return null;
});

// i18n config (if needed elsewhere)
const i18n = {
  messages: {
    fr: {
      thirdparty: {
        contact: "Personne physique",
        company: "Personne morale",
        child: "Personne de contact",
      },
    },
  },
};
defineExpose({
  i18n,
});
</script>

<style lang="scss" scoped>
.tpartycontainer {
  .tpartyparent {
    .name {
      font-weight: bold;
      font-variant: all-small-caps;
    }
  }
  .tparty-identification {
    span:not(.name) {
      margin-left: 0.5em;
      opacity: 0.5;
      font-size: 90%;
      font-style: italic;
    }
    .profession {
      font-weight: 800;
      color: black;
      font-style: normal !important;
    }
  }
}
</style>
