<template>
    <section class="chill-entity entity-household">
        <div class="item-row">
            <div class="item-col">
                <!-- identifier -->
                <div v-if="isHouseholdNew()" class="h4">
                    <i class="fa fa-home" />
                    {{ $t("new_household") }}
                </div>
                <div v-else class="h4">
                    <i class="fa fa-home" />
                    {{ $t("household_number", { number: household.id }) }}
                </div>
            </div>
            <div class="item-col">
                <ul class="list-content">
                    <!-- member part -->
                    <li
                        v-if="hasCurrentMembers"
                        class="members"
                        :title="$t('current_members')"
                    >
                        <span
                            v-for="m in currentMembers()"
                            :key="m.id"
                            class="m"
                            :class="{ is_new: m.is_new === true }"
                        >
                            <person-render-box
                                render="badge"
                                :person="m.person"
                                :options="{
                                    isHolder: m.holder,
                                    addLink: true,
                                }"
                            >
                                <template #post-badge v-if="m.is_new === true">
                                    <span class="post-badge is_new"
                                        ><i class="fa fa-sign-in"
                                    /></span>
                                </template>
                            </person-render-box>
                        </span>
                    </li>
                    <li v-else class="members" :title="$t('current_members')">
                        <p class="chill-no-data-statement">
                            {{ $t("no_members_yet") }}
                        </p>
                    </li>

                    <!-- address part -->
                    <li v-if="hasAddress()">
                        <address-render-box
                            :address="household.current_address"
                            :is-multiline="isMultiline"
                        />
                    </li>
                    <li v-else>
                        <span class="chill-no-data-statement">{{
                            $t("no_current_address")
                        }}</span>
                    </li>
                </ul>
            </div>
        </div>
    </section>
</template>

<script>
import PersonRenderBox from "ChillPersonAssets/vuejs/_components/Entity/PersonRenderBox.vue";
import AddressRenderBox from "ChillMainAssets/vuejs/_components/Entity/AddressRenderBox.vue";

const i18n = {
    messages: {
        fr: {
            household_number: "Ménage n°{number}",
            current_members: "Membres actuels",
            no_current_address: "Sans adresse actuellement",
            new_household: "Nouveau ménage",
            no_members_yet: "Aucun membre actuellement",
            holder: "titulaire",
        },
    },
};

export default {
    name: "HouseholdRenderBox",
    props: ["household", "isAddressMultiline"],
    components: {
        PersonRenderBox,
        AddressRenderBox,
    },
    i18n,
    computed: {
        isMultiline() {
            return typeof this.isAddressMultiline !== "undefined"
                ? this.isAddressMultiline
                : false;
        },
    },
    methods: {
        hasCurrentMembers() {
            return this.household.current_members_id.length > 0;
        },
        currentMembers() {
            let members = this.household.members
                .filter((m) => this.household.current_members_id.includes(m.id))
                .sort((a, b) => {
                    const orderA = a.position ? a.position.ordering : 0;
                    const orderB = b.position ? b.position.ordering : 0;

                    if (orderA < orderB) {
                        return -1;
                    }
                    if (orderA > orderB) {
                        return 1;
                    }
                    if (a.holder && !b.holder) {
                        return -1;
                    }
                    if (!a.holder && b.holder) {
                        return 1;
                    }
                    return 0;
                });

            if (this.household.new_members !== undefined) {
                this.household.new_members
                    .map((m) => {
                        m.is_new = true;
                        return m;
                    })
                    .forEach((m) => {
                        members.push(m);
                    });
            }

            return members;
        },
        currentMembersLength() {
            return this.household.current_members_id.length;
        },
        isHouseholdNew() {
            return !Number.isInteger(this.household.id);
        },
        hasAddress() {
            return this.household.current_address !== null;
        },
    },
};
</script>

<style lang="scss">
section.chill-entity {
    &.entity-household {
        ul.list-content li::marker {
            content: "";
        }

        .members {
            .post-badge.is_new {
                margin-left: 0.5rem;
                color: var(--bs-chill-green);
            }
        }
    }
}
</style>
