<template>
  <span v-if="shortlist">
    <span v-for="person in firstPersons" class="me-1" :key="person.id">
      <on-the-fly
        :type="person.type"
        :id="person.id"
        :buttonText="person.textAge"
        :displayBadge="'true' === 'true'"
        action="show"
      ></on-the-fly>
    </span>
    <span v-if="hasMoreThanShortListPerson">
      <a
        class="showMore carousel-control"
        role="button"
        data-bs-target="#ACHeaderSlider"
        data-bs-slide="next"
        >{{ $t("more_x", { x: countMoreThanShortListPerson }) }}</a
      >
    </span>
  </span>
  <span v-else>
    <span
      v-for="([pk, persons], h) in personsByHousehold"
      :class="{ household: pk > -1, 'no-household': pk === -1 }"
      :key="h.id"
    >
      <a v-if="pk !== -1" :href="householdLink(pk)">
        <i
          class="fa fa-home fa-fw text-light"
          :title="
            $t('persons_associated.show_household_number', {
              id: pk,
            })
          "
        ></i>
      </a>
      <span v-for="person in persons" class="me-1" :key="person.id">
        <on-the-fly
          :type="person.type"
          :id="person.id"
          :buttonText="person.textAge"
          :displayBadge="true"
          action="show"
        ></on-the-fly>
      </span>
    </span>
  </span>
</template>

<script>
import OnTheFly from "ChillMainAssets/vuejs/OnTheFly/components/OnTheFly";

export default {
  name: "PersonsAssociated",
  components: {
    OnTheFly,
  },
  props: ["accompanyingCourse", "shortlist"],
  data() {
    return {
      showAllPersons: false,
      maxTotalPersons: 2,
      nbShortList: 3,
    };
  },
  computed: {
    participations() {
      return this.accompanyingCourse.participations.filter(
        (p) => p.endDate === null,
      );
    },
    persons() {
      return this.participations.map((p) => p.person);
    },
    firstPersons() {
      return this.participations.slice(0, 3).map((p) => p.person);
    },
    hasMoreThanShortListPerson() {
      return this.participations.length > 3;
    },
    countMoreThanShortListPerson() {
      return this.participations.length - 3;
    },
    resources() {
      return this.accompanyingCourse.resources;
    },
    requestor() {
      return this.accompanyingCourse.requestor;
    },
    personsByHousehold() {
      const households = new Map();
      this.accompanyingCourse.participations
        .filter((part) => part.endDate === null)
        .map((part) => part.person)
        .forEach((person) => {
          if (!households.has(person.current_household_id || -1)) {
            households.set(person.current_household_id || -1, []);
          }
          households.get(person.current_household_id || -1).push(person);
        });

      return households;
    },
  },
  methods: {
    householdLink(id) {
      return `/fr/person/household/${id}/summary`;
    },
  },
};
</script>

<style lang="scss" scoped>
.showMore {
  cursor: pointer;
  color: white;
}
span.household {
  display: inline-block;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  margin-right: 0.3em;
  padding: 5px;
}
</style>
