<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" />
          {{ trans(RENDERBOX_NEW_HOUSEHOLD) }}
        </div>
        <div v-else class="h4">
          <i class="fa fa-home" />
          {{ trans(RENDERBOX_HOUSEHOLD_NUMBER, { number: household.id }) }}
        </div>
      </div>
      <div class="item-col">
        <ul class="list-content">
          <!-- member part -->
          <li
            v-if="hasCurrentMembers"
            class="members"
            :title="trans(RENDERBOX_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="trans(RENDERBOX_CURRENT_MEMBERS)">
            <p class="chill-no-data-statement">
              {{ trans(RENDERBOX_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">{{
              trans(RENDERBOX_NO_CURRENT_ADDRESS)
            }}</span>
          </li>
        </ul>
      </div>
    </div>
  </section>
</template>
<script setup>
import { computed } from "vue";
import PersonRenderBox from "ChillPersonAssets/vuejs/_components/Entity/PersonRenderBox.vue";
import AddressRenderBox from "ChillMainAssets/vuejs/_components/Entity/AddressRenderBox.vue";
import {
  trans,
  RENDERBOX_NEW_HOUSEHOLD,
  RENDERBOX_HOUSEHOLD_NUMBER,
  RENDERBOX_CURRENT_MEMBERS,
  RENDERBOX_NO_MEMBERS_YET,
  RENDERBOX_NO_CURRENT_ADDRESS,
} from "translator";

const props = defineProps({
  household: { type: Object, required: true },
  isAddressMultiline: { type: Boolean, default: false },
});

const isMultiline = computed(() =>
  typeof props.isAddressMultiline !== "undefined"
    ? props.isAddressMultiline
    : false,
);

function hasCurrentMembers() {
  return props.household.current_members_id.length > 0;
}

function currentMembers() {
  let members = props.household.members
    .filter((m) => props.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 (props.household.new_members !== undefined) {
    props.household.new_members
      .map((m) => {
        m.is_new = true;
        return m;
      })
      .forEach((m) => {
        members.push(m);
      });
  }

  return members;
}

function currentMembersLength() {
  return props.household.current_members_id.length;
}

function isHouseholdNew() {
  return !Number.isInteger(props.household.id);
}

function hasAddress() {
  return props.household.current_address !== null;
}
defineExpose(currentMembersLength);
</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>
