<template>
  <h2 class="mt-4">
    {{ $t("household_members_editor.concerned.title") }}
  </h2>

  <div v-if="noPerson">
    <div class="alert alert-info">
      {{ $t("household_members_editor.concerned.add_at_least_onePerson") }}
    </div>
  </div>
  <div v-else>
    <p>
      {{
        $t("household_members_editor.concerned.persons_will_be_moved")
      }}&nbsp;:
    </p>

    <ul class="list-suggest remove-items inline">
      <li v-for="c in concerned" :key="c.person.id" @click="removeConcerned(c)">
        <span><person-text :person="c.person" /></span>
      </li>
    </ul>

    <div
      class="alert alert-info"
      v-if="concernedPersonsWithHouseholds.length > 0"
    >
      <p>
        {{ $t("household_members_editor.concerned.persons_with_household") }}
      </p>
      <ul v-for="c in concernedPersonsWithHouseholds" :key="c.person.id">
        <li>
          {{ c.person.text }}
          {{
            $t(
              "household_members_editor.concerned.already_belongs_to_household",
            )
          }}
          <a
            target="_blank"
            :href="this.makeHouseholdLink(c.person.current_household_id)"
            >{{ c.person.current_household_id }}</a
          >.
        </li>
      </ul>
    </div>
  </div>

  <ul class="record_actions">
    <li class="add-persons">
      <add-persons
        button-title="household_members_editor.concerned.add_persons"
        modal-title="household_members_editor.concerned.search"
        :key="addPersons.key"
        :options="addPersons.options"
        @add-new-persons="addNewPersons"
        ref="addPersons"
      >
        <!-- to cast child method -->
      </add-persons>
    </li>
  </ul>
</template>

<style lang="scss">
.move_to {
  .move_hint {
    text-align: center;
    display: inline-block;
    padding: 0.4rem 0.5rem;
  }
}
</style>

<script>
import { mapState, mapGetters } from "vuex";
import AddPersons from "ChillPersonAssets/vuejs/_components/AddPersons.vue";
import PersonText from "ChillPersonAssets/vuejs/_components/Entity/PersonText.vue";

export default {
  name: "Concerned",
  components: {
    AddPersons,
    PersonText,
  },
  computed: {
    ...mapState(["concerned", "household"]),
    ...mapGetters(["persons"]),
    noPerson() {
      return this.$store.getters.persons.length === 0;
    },
    concernedPersonsWithHouseholds() {
      if (this.$store.state.household) {
        return this.$store.state.concerned.filter(
          (c) =>
            c.person.current_household_id !== null &&
            c.person.current_household_id !== this.$store.state.household.id,
        );
      } else {
        return [];
      }
    },
  },
  data() {
    return {
      addPersons: {
        key: "household_members_editor_concerned",
        options: {
          type: ["person"],
          priority: null,
          uniq: false,
        },
      },
    };
  },
  methods: {
    addNewPersons({ selected, modal }) {
      selected.forEach(function (item) {
        this.$store.dispatch("addConcerned", item.result);
      }, this);
      this.$refs.addPersons.resetSearch(); // to cast child method
      modal.showModal = false;
    },
    removeConcerned(concerned) {
      console.log("removedconcerned", concerned);

      if (!concerned.allowRemove) {
        return;
      }

      this.$store.dispatch("removePerson", concerned.person);
    },
    makeHouseholdLink(id) {
      return `/fr/person/household/${id}/summary`;
    },
  },
};
</script>
