<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="this.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="this.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="hasParent">
                                    <i class="fa fa-li fa-hand-o-right" />
                                    <b class="me-2">{{ $t("child_of") }}</b>
                                    <on-the-fly
                                        :type="thirdparty.parent.type"
                                        :id="thirdparty.parent.id"
                                        :button-text="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>
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";

export default {
    name: "ThirdPartyRenderBox",
    components: {
        AddressRenderBox,
        Confidential,
        BadgeEntity,
    },
    // To avoid components recursively invoking eachother resolve OnTheFly component here
    beforeCreate() {
        this.$options.components.OnTheFly =
            require("ChillMainAssets/vuejs/OnTheFly/components/OnTheFly").default;
    },
    i18n: {
        messages: {
            fr: {
                children: "Personnes de contact: ",
                child_of: "Contact de: ",
            },
        },
    },
    props: ["thirdparty", "options"],
    computed: {
        isMultiline: function () {
            if (this.options.isMultiline) {
                return this.options.isMultiline;
            } else {
                return false;
            }
        },
        hasParent() {
            return !(
                this.thirdparty.parent === null ||
                this.thirdparty.parent === undefined
            );
        },
        getProfession() {
            let profession = [];
            if (this.hasParent && this.thirdparty.profession) {
                profession.push(this.thirdparty.profession);
                return profession;
            }

            if (!this.hasParent && this.thirdparty.category) {
                profession = this.thirdparty.category.map(
                    (category) => category.text,
                );
            }

            return profession;
        },
        /* TODO need backend normalizer to serve children without circular reference
    hasChildren() {
        //console.log(this.thirdparty.activeChildren.length > 0)
        return false
    } */
    },
};
</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>
