<template>
  <div class="item-bloc col">
    <section class="chill-entity entity-thirdparty">
      <div class="item-row entity-bloc">
        <div class="item-col">
          <div class="entity-label">
            <div :class="'denomination h' + options.hLevel">
              <a v-if="options.addLink === true" href="#">
                <span class="name">{{ thirdparty.text }}</span>
              </a>
              <span class="name" v-else>{{ thirdparty.text }}</span>

              <span
                v-if="options.addId === true"
                class="id-number"
                :title="'n° ' + thirdparty.id"
              >
                {{ thirdparty.id }}
              </span>

              <badge-entity
                v-if="options.addEntity === true"
                :entity="thirdparty"
                :options="{
                  displayLong: options.entityDisplayLong,
                }"
              />
            </div>

            <p v-if="options.addInfo === true" class="moreinfo" />
          </div>
        </div>

        <div class="item-col">
          <div class="float-button bottom">
            <div class="box">
              <div class="action">
                <slot name="record-actions" />
              </div>
              <ul class="list-content fa-ul">
                <li v-if="getProfession.length > 0">
                  <i class="fa fa-li fa-id-card" />
                  <p>
                    <span>{{ getProfession[0] }}</span>
                  </p>
                </li>
                <li v-if="isThirdpartyChild(props.thirdparty)">
                  <i class="fa fa-li fa-hand-o-right" />
                  <b class="me-2">{{ trans(THIRDPARTY_MESSAGES_CHILD_OF) }}</b>
                  <on-the-fly
                    :type="props.thirdparty.parent.type"
                    :id="props.thirdparty.parent.id"
                    :button-text="props.thirdparty.parent.text"
                    :display-badge="'true' === 'true'"
                    action="show"
                  />
                </li>
                <!-- TODO hasChildren
                    NB: we cannot call on-the-fly from RenderBox. See error message in previous version of this file.
                -->
              </ul>
              <div v-if="thirdparty.contactDataAnonymous">
                <confidential :position-btn-far="false">
                  <template #confidential-content>
                    <ul class="list-content fa-ul">
                      <li v-if="thirdparty.address">
                        <i class="fa fa-li fa-map-marker" />
                        <address-render-box
                          :address="thirdparty.address"
                          :is-multiline="isMultiline"
                        />
                      </li>
                      <li v-if="thirdparty.telephone">
                        <i class="fa fa-li fa-mobile" />
                        <a :href="'tel: ' + thirdparty.telephone">{{
                          thirdparty.telephone
                        }}</a>
                      </li>
                      <li v-if="thirdparty.telephone2">
                        <i class="fa fa-li fa-mobile" />
                        <a :href="'tel: ' + thirdparty.telephone2">{{
                          thirdparty.telephone2
                        }}</a>
                      </li>
                      <li v-if="thirdparty.email">
                        <i class="fa fa-li fa-envelope-o" />
                        <a :href="'mailto: ' + thirdparty.email">{{
                          thirdparty.email
                        }}</a>
                      </li>
                    </ul>
                  </template>
                </confidential>
              </div>
              <ul v-else class="list-content fa-ul">
                <li v-if="thirdparty.address">
                  <i class="fa fa-li fa-map-marker" />
                  <address-render-box
                    :address="thirdparty.address"
                    :is-multiline="isMultiline"
                  />
                </li>
                <li v-if="thirdparty.telephone">
                  <i class="fa fa-li fa-mobile" />
                  <a :href="'tel: ' + thirdparty.telephone">{{
                    thirdparty.telephone
                  }}</a>
                </li>
                <li v-if="thirdparty.telephone2">
                  <i class="fa fa-li fa-mobile" />
                  <a :href="'tel: ' + thirdparty.telephone2"
                    >{{ thirdparty.telephone2 }}
                  </a>
                </li>
                <li v-if="thirdparty.email">
                  <i class="fa fa-li fa-envelope-o" />
                  <a :href="'mailto: ' + thirdparty.email">{{
                    thirdparty.email
                  }}</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <slot name="end-bloc" />
    </section>
  </div>
</template>

<script setup lang="ts">
import { computed, defineAsyncComponent } from "vue";
import AddressRenderBox from "ChillMainAssets/vuejs/_components/Entity/AddressRenderBox.vue";
import Confidential from "ChillMainAssets/vuejs/_components/Confidential.vue";
import BadgeEntity from "ChillMainAssets/vuejs/_components/BadgeEntity.vue";
import {
  isThirdpartyChild,
  isThirdpartyCompany,
  Thirdparty,
} from "../../../types";
import { localizeString } from "ChillMainAssets/lib/localizationHelper/localizationHelper";
import OnTheFly from "ChillMainAssets/vuejs/OnTheFly/components/OnTheFly.vue";
import { THIRDPARTY_MESSAGES_CHILD_OF, trans } from "translator";

// Async to avoid recursive resolution issues
/*
const OnTheFly = defineAsyncComponent(() =>
  import("ChillMainAssets/vuejs/OnTheFly/components/OnTheFly.vue")
);
 */

interface RenderOptions {
  addInfo?: boolean;
  addEntity?: boolean;
  addId?: boolean;
  addLink?: boolean;
  hLevel?: number;
  entityDisplayLong?: boolean;
  isMultiline?: boolean;
}

const props = defineProps<{ thirdparty: Thirdparty; options: RenderOptions }>();

const isMultiline = computed<boolean>(
  () => props.options?.isMultiline ?? false,
);

const hasParent = computed<boolean>(() => {
  return isThirdpartyChild(props.thirdparty);
});

const getProfession = computed<string[]>(() => {
  const t = props.thirdparty;
  const prof: string[] = [];

  if (!isThirdpartyCompany(t)) {
    prof.push(t.profession);
  }

  if (!isThirdpartyChild(t)) {
    for (const c of t.category) {
      prof.push(localizeString(c.name));
    }
  }

  return prof;
});
</script>

<style lang="scss">
.name {
  &:before {
    content: " ";
  }

  &.tparty-parent {
    font-weight: bold;
    font-variant: all-small-caps;
  }
}

.list-professions {
  &::after {
    content: " | ";
  }

  &:last-child::after {
    content: "";
  }
}
</style>
