<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">
                            <a v-if="options.addLink === true" :href="getUrl">
                                <!-- use person-text here to avoid code duplication ? TODO -->
                                <span class="firstname">{{
                                    person.firstName
                                }}</span>
                                <span class="lastname">{{
                                    person.lastName
                                }}</span>
                                <span
                                    v-if="person.suffixText"
                                    class="suffixtext"
                                    >&nbsp;{{ person.suffixText }}</span
                                >
                                <span
                                    v-if="
                                        person.altNames &&
                                        options.addAltNames == true
                                    "
                                    class="altnames"
                                >
                                    <span
                                        :class="'altname altname-' + altNameKey"
                                        >{{ altNameLabel }}</span
                                    >
                                </span>
                            </a>

                            <!-- use person-text here to avoid code duplication ? TODO -->
                            <span class="firstname">{{
                                person.firstName
                            }}</span>
                            <span class="lastname">{{ person.lastName }}</span>
                            <span v-if="person.suffixText" class="suffixtext"
                                >&nbsp;{{ person.suffixText }}</span
                            >
                            <span v-if="person.deathdate" class="deathdate">
                                (‡)</span
                            >
                            <span
                                v-if="
                                    person.altNames &&
                                    options.addAltNames == true
                                "
                                class="altnames"
                            >
                                <span
                                    :class="'altname altname-' + altNameKey"
                                    >{{ altNameLabel }}</span
                                >
                            </span>

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

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

                        <p v-if="options.addInfo === true" class="moreinfo">
                            <gender-icon-render-box
                                v-if="person.gender"
                                :gender="person.gender"
                            />
                            <time
                                v-if="person.birthdate && !person.deathdate"
                                :datetime="person.birthdate"
                                :title="birthdate"
                            >
                                {{
                                    $t(
                                        person.gender
                                            ? `renderbox.birthday.${person.gender.genderTranslation}`
                                            : "renderbox.birthday.neutral",
                                    ) +
                                    " " +
                                    $d(birthdate, "text")
                                }}
                            </time>

                            <time
                                v-else-if="person.birthdate && person.deathdate"
                                :datetime="person.deathdate"
                                :title="person.deathdate"
                            >
                                {{ $d(birthdate) }} - {{ $d(deathdate) }}
                            </time>

                            <time
                                v-else-if="person.deathdate"
                                :datetime="person.deathdate"
                                :title="person.deathdate"
                            >
                                {{
                                    $t("renderbox.deathdate") + " " + deathdate
                                }}
                            </time>

                            <span
                                v-if="options.addAge && person.birthdate"
                                class="age"
                                >{{
                                    $tc("renderbox.years_old", person.age)
                                }}</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">
                                        {{
                                            $t(
                                                "renderbox.household_without_address",
                                            )
                                        }}
                                    </p>
                                    <a
                                        v-if="options.addHouseholdLink === true"
                                        :href="getCurrentHouseholdUrl"
                                        :title="
                                            $t(
                                                'persons_associated.show_household_number',
                                                {
                                                    id: person.current_household_id,
                                                },
                                            )
                                        "
                                    >
                                        <span
                                            class="badge rounded-pill bg-chill-beige"
                                        >
                                            <i
                                                class="fa fa-fw fa-home"
                                            /><!--{{ $t('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">
                                        {{ $t("renderbox.no_data") }}
                                    </p>
                                </li>

                                <template
                                    v-if="
                                        this.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"
                                                >{{
                                                    $t(
                                                        "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>
                                                {{
                                                    $t("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.address"
                                                :address="
                                                    addr.hostPerson.address
                                                "
                                                :is-multiline="isMultiline"
                                            />
                                        </div>
                                        <div
                                            v-else-if="addr.hostThirdParty"
                                            class="mt-3"
                                        >
                                            <p>
                                                {{
                                                    $t("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">
                                        {{ $t("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">
                                        {{ $t("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">
                                        {{ $t("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">
                                        {{ $t("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="$t('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="$t('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>
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";

export default {
    name: "PersonRenderBox",
    components: {
        AddressRenderBox,
        GenderIconRenderBox,
        BadgeEntity,
        PersonText,
        ThirdPartyText,
    },
    props: {
        person: {
            required: true,
        },
        options: {
            type: Object,
            required: false,
        },
        render: {
            type: String,
        },
        returnPath: {
            type: String,
        },
        showResidentialAddresses: {
            type: Boolean,
            default: false,
        },
    },
    computed: {
        isMultiline: function () {
            if (this.options.isMultiline) {
                return this.options.isMultiline;
            } else {
                return false;
            }
        },
        birthdate: function () {
            if (
                this.person.birthdate !== null ||
                this.person.birthdate === "undefined"
            ) {
                return ISOToDate(this.person.birthdate.datetime);
            } else {
                return "";
            }
        },
        deathdate: function () {
            if (
                this.person.deathdate !== null ||
                this.person.birthdate === "undefined"
            ) {
                return new Date(this.person.deathdate.datetime);
            } else {
                return "";
            }
        },
        altNameLabel: function () {
            let altNameLabel = "";
            this.person.altNames.forEach(
                (altName) => (altNameLabel += altName.label),
            );
            return altNameLabel;
        },
        altNameKey: function () {
            let altNameKey = "";
            this.person.altNames.forEach(
                (altName) => (altNameKey += altName.key),
            );
            return altNameKey;
        },
        getUrl: function () {
            return `/fr/person/${this.person.id}/general`;
        },
        getCurrentHouseholdUrl: function () {
            let returnPath = this.returnPath
                ? `?returnPath=${this.returnPath}`
                : ``;
            return `/fr/person/household/${this.person.current_household_id}/summary${returnPath}`;
        },
    },
};
</script>

<style lang="scss" scoped>
@import "ChillMainAssets/module/bootstrap/shared";
@import "ChillPersonAssets/chill/scss/mixins";
@import "ChillMainAssets/chill/scss/chill_variables";

.lastname:before {
    content: " ";
}

div.flex-table {
    div.item-bloc {
        div.item-row {
            div.item-col:first-child {
                width: 33%;
            }

            @include media-breakpoint-down(sm) {
                div.item-col:first-child {
                    width: unset;
                }
            }

            div.item-col:last-child {
                justify-content: flex-start;
            }
        }
    }
}

.age {
    margin-left: 0.5em;

    &:before {
        content: "(";
    }

    &:after {
        content: ")";
    }
}
</style>
