<template>
  <div v-if="render === 'bloc'" class="item-bloc">
    <section class="chill-entity entity-person">
      <div class="item-row entity-bloc">
        <div class="item-col">
          <div class="entity-label">
            <div :class="'denomination h' + options.hLevel">
              <template v-if="options.addLink === true">
                <a v-if="options.addLink === true" :href="getUrl">
                  <span>{{ person.text }}</span>
                  <span v-if="person.deathdate" class="deathdate"> (‡)</span>
                </a>
              </template>
              <template v-else>
                <span>{{ person.text }}</span>
                <span v-if="person.deathdate" class="deathdate"> (‡)</span>
              </template>
              <badge-entity
                v-if="options.addEntity === true"
                :entity="person"
                :options="{ displayLong: options.entityDisplayLong }"
              />
            </div>

            <p>
              <span v-if="options.addId == true" :title="person.personId"
                ><i class="bi bi-info-circle"></i> {{ person.personId }}</span
              >
            </p>

            <p v-if="options.addInfo === true" class="moreinfo">
              <gender-icon-render-box
                v-if="person.gender"
                :gender="person.gender"
              />
              <span v-if="person.birthdate">
                {{
                  trans(RENDERBOX_BIRTHDAY_STATEMENT, {
                    gender: toGenderTranslation(person.gender),
                    birthdate: ISOToDate(person.birthdate?.datetime),
                  })
                }}
              </span>
              <span v-if="options.addAge && person.birthdate" class="age">
                ({{ trans(RENDERBOX_YEARS_OLD, { n: person.age }) }})
              </span>
            </p>

            <p>
              <span v-if="person.deathdate">
                {{
                  trans(RENDERBOX_DEATHDATE_STATEMENT, {
                    gender: toGenderTranslation(person.gender),
                    deathdate: ISOToDate(person.deathdate?.datetime),
                  })
                }}
              </span>
            </p>
          </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="person.current_household_id">
                  <i class="fa fa-li fa-map-marker" />
                  <address-render-box
                    v-if="person.current_household_address"
                    :address="person.current_household_address"
                    :is-multiline="isMultiline"
                  />
                  <p v-else class="chill-no-data-statement">
                    {{ trans(RENDERBOX_HOUSEHOLD_WITHOUT_ADDRESS) }}
                  </p>
                  <a
                    v-if="options.addHouseholdLink === true"
                    :href="getCurrentHouseholdUrl"
                  >
                    <span class="badge rounded-pill bg-chill-beige">
                      <i
                        class="fa fa-fw fa-home"
                      /><!--{{ trans(PERSONS_ASSOCIATED_SHOW_HOUSEHOLD) }}-->
                    </span>
                  </a>
                </li>
                <li v-else-if="options.addNoData">
                  <i class="fa fa-li fa-map-marker" />
                  <p class="chill-no-data-statement">
                    {{ trans(RENDERBOX_NO_DATA) }}
                  </p>
                </li>

                <template
                  v-if="
                    showResidentialAddresses &&
                    (person.current_residential_addresses || []).length > 0
                  "
                >
                  <li
                    v-for="(addr, i) in person.current_residential_addresses"
                    :key="i"
                  >
                    <i class="fa fa-li fa-map-marker" />
                    <div v-if="addr.address">
                      <span class="item-key">
                        {{ trans(RENDERBOX_RESIDENTIAL_ADDRESS) }}:
                      </span>
                      <div style="margin-top: -1em">
                        <address-render-box
                          :address="addr.address"
                          :is-multiline="isMultiline"
                        />
                      </div>
                    </div>
                    <div v-else-if="addr.hostPerson" class="mt-3">
                      <p>{{ trans(RENDERBOX_LOCATED_AT) }}:</p>
                      <span class="chill-entity entity-person badge-person">
                        <person-text
                          v-if="addr.hostPerson"
                          :person="addr.hostPerson"
                        />
                      </span>

                      <address-render-box
                        v-if="addr.hostPerson?.current_household_address"
                        :address="addr.hostPerson.current_household_address"
                        :is-multiline="isMultiline"
                      />
                    </div>
                    <div v-else-if="addr.hostThirdParty" class="mt-3">
                      <p>{{ trans(RENDERBOX_LOCATED_AT) }}:</p>
                      <span class="chill-entity entity-person badge-thirdparty">
                        <third-party-text
                          v-if="addr.hostThirdParty"
                          :thirdparty="addr.hostThirdParty"
                        />
                      </span>
                      <address-render-box
                        v-if="addr.hostThirdParty.address"
                        :address="addr.hostThirdParty.address"
                        :is-multiline="isMultiline"
                      />
                    </div>
                  </li>
                </template>

                <li v-if="person.email">
                  <i class="fa fa-li fa-envelope-o" />
                  <a :href="'mailto: ' + person.email">{{ person.email }}</a>
                </li>
                <li v-else-if="options.addNoData">
                  <i class="fa fa-li fa-envelope-o" />
                  <p class="chill-no-data-statement">
                    {{ trans(RENDERBOX_NO_DATA) }}
                  </p>
                </li>

                <li v-if="person.mobilenumber">
                  <i class="fa fa-li fa-mobile" />
                  <a :href="'tel: ' + person.mobilenumber">
                    {{ person.mobilenumber }}
                  </a>
                </li>
                <li v-else-if="options.addNoData">
                  <i class="fa fa-li fa-mobile" />
                  <p class="chill-no-data-statement">
                    {{ trans(RENDERBOX_NO_DATA) }}
                  </p>
                </li>
                <li v-if="person.phonenumber">
                  <i class="fa fa-li fa-phone" />
                  <a :href="'tel: ' + person.phonenumber">
                    {{ person.phonenumber }}
                  </a>
                </li>
                <li v-else-if="options.addNoData">
                  <i class="fa fa-li fa-phone" />
                  <p class="chill-no-data-statement">
                    {{ trans(RENDERBOX_NO_DATA) }}
                  </p>
                </li>

                <li
                  v-if="
                    person.centers !== undefined &&
                    person.centers.length > 0 &&
                    options.addCenter
                  "
                >
                  <i class="fa fa-li fa-long-arrow-right" />
                  <template v-for="c in person.centers">
                    {{ c.name }}
                  </template>
                </li>
                <li v-else-if="options.addNoData">
                  <i class="fa fa-li fa-long-arrow-right" />
                  <p class="chill-no-data-statement">
                    {{ trans(RENDERBOX_NO_DATA) }}
                  </p>
                </li>
                <slot name="custom-zone" />
              </ul>
            </div>
          </div>
        </div>
      </div>

      <slot name="end-bloc" />
    </section>
  </div>

  <span
    v-if="render === 'badge'"
    class="chill-entity entity-person badge-person"
  >
    <a v-if="options.addLink === true" :href="getUrl">
      <span
        v-if="options.isHolder"
        class="fa-stack fa-holder"
        :title="trans(RENDERBOX_HOLDER)"
      >
        <i class="fa fa-circle fa-stack-1x text-success" />
        <i class="fa fa-stack-1x">T</i>
      </span>

      <person-text :person="person" />
    </a>
    <span v-else>
      <span
        v-if="options.isHolder"
        class="fa-stack fa-holder"
        :title="trans(RENDERBOX_HOLDER)"
      >
        <i class="fa fa-circle fa-stack-1x text-success" />
        <i class="fa fa-stack-1x">T</i>
      </span>
      <person-text :person="person" />
    </span>
    <slot name="post-badge" />
  </span>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { ISOToDate } from "ChillMainAssets/chill/js/date";
import AddressRenderBox from "ChillMainAssets/vuejs/_components/Entity/AddressRenderBox.vue";
import GenderIconRenderBox from "ChillMainAssets/vuejs/_components/Entity/GenderIconRenderBox.vue";
import BadgeEntity from "ChillMainAssets/vuejs/_components/BadgeEntity.vue";
import PersonText from "ChillPersonAssets/vuejs/_components/Entity/PersonText.vue";
import ThirdPartyText from "ChillThirdPartyAssets/vuejs/_components/Entity/ThirdPartyText.vue";
import {
  trans,
  RENDERBOX_HOLDER,
  RENDERBOX_NO_DATA,
  RENDERBOX_DEATHDATE_STATEMENT,
  RENDERBOX_HOUSEHOLD_WITHOUT_ADDRESS,
  RENDERBOX_RESIDENTIAL_ADDRESS,
  RENDERBOX_LOCATED_AT,
  RENDERBOX_BIRTHDAY_STATEMENT,
  // PERSONS_ASSOCIATED_SHOW_HOUSEHOLD_NUMBER,
  RENDERBOX_YEARS_OLD,
} from "translator";
import { Person } from "ChillPersonAssets/types";
import { toGenderTranslation } from "ChillMainAssets/lib/api/genderHelper";

interface RenderOptions {
  addInfo?: boolean;
  addEntity?: boolean;
  addAltNames?: boolean;
  addAge?: boolean;
  addId?: boolean;
  addLink?: boolean;
  hLevel?: number;
  entityDisplayLong?: boolean;
  addCenter?: boolean;
  addNoData?: boolean;
  isMultiline?: boolean;
  isHolder?: boolean;
  addHouseholdLink?: boolean;
}

interface Props {
  person: Person;
  options?: RenderOptions;
  render?: "bloc" | "badge";
  returnPath?: string;
  showResidentialAddresses?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  render: "bloc",
  options: () => ({
    addInfo: true,
    addEntity: false,
    addAltNames: true,
    addAge: true,
    addId: true,
    addLink: false,
    hLevel: 3,
    entityDisplayLong: true,
    addCenter: true,
    addNoData: true,
    isMultiline: true,
    isHolder: false,
    addHouseholdLink: true,
  }),
});

const isMultiline = computed<boolean>(() => {
  return props.options?.isMultiline || false;
});

const getUrl = computed<string>(() => {
  return `/fr/person/${props.person.id}/general`;
});

const getCurrentHouseholdUrl = computed<string>(() => {
  const returnPath = props.returnPath ? `?returnPath=${props.returnPath}` : ``;
  return `/fr/person/household/${props.person.current_household_id}/summary${returnPath}`;
});
</script>
