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

  <div class="alert alert-info" v-if="!hasHousehold">
    {{ $t("household_members_editor.household.no_household_choose_one") }}
  </div>
  <template v-else>
    <current-household />
  </template>

  <div v-if="hasHouseholdSuggestion" class="householdSuggestions my-5">
    <h4 class="mb-3">
      {{ $t("household_members_editor.household.household_suggested") }}
    </h4>
    <p>
      {{
        $t("household_members_editor.household.household_suggested_explanation")
      }}
    </p>
    <div class="accordion" id="householdSuggestions">
      <div class="accordion-item">
        <h2 class="accordion-header" id="heading_household_suggestions">
          <button
            v-if="!showHouseholdSuggestion"
            class="accordion-button collapsed"
            type="button"
            data-bs-toggle="collapse"
            aria-expanded="false"
            @click="toggleHouseholdSuggestion"
          >
            {{
              $tc(
                "household_members_editor.show_household_suggestion",
                countHouseholdSuggestion,
              )
            }}
          </button>
          <button
            v-if="showHouseholdSuggestion"
            class="accordion-button"
            type="button"
            data-bs-toggle="collapse"
            aria-expanded="true"
            @click="toggleHouseholdSuggestion"
          >
            {{ $t("household_members_editor.hide_household_suggestion") }}
          </button>
          <!-- disabled bootstrap behaviour:  data-bs-target="#collapse_household_suggestions" aria-controls="collapse_household_suggestions" -->
        </h2>
        <div
          class="accordion-collapse"
          id="collapse_household_suggestions"
          aria-labelledby="heading_household_suggestions"
          data-bs-parent="#householdSuggestions"
        >
          <div v-if="showHouseholdSuggestion">
            <div class="flex-table householdSuggestionList">
              <div
                v-for="(s, i) in getSuggestions"
                class="item-bloc"
                :key="`householdSuggestions-${i}`"
              >
                <household-render-box :household="s.household" />
                <ul class="record_actions">
                  <li>
                    <button
                      class="btn btn-sm btn-choose"
                      @click="selectHousehold(s.household)"
                    >
                      {{ $t("household_members_editor.select_household") }}
                    </button>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <ul class="record_actions">
    <li v-if="hasHousehold">
      <button @click="resetMode" class="btn btn-sm btn-misc">
        {{ $t("household_members_editor.household.reset_mode") }}
      </button>
    </li>
    <li v-if="!hasHousehold" class="add-persons">
      <add-persons
        modal-title="Chercher un ménage existant"
        button-title="Chercher un ménage existant"
        :key="addPersons.key"
        :options="addPersons.options"
        @add-new-persons="pickHouseholdFound"
        ref="pickHousehold"
      >
        <!-- to cast child method -->
      </add-persons>
    </li>
    <li v-if="!hasHousehold">
      <button @click="setModeNew" class="btn btn-sm btn-create">
        {{ $t("household_members_editor.household.create_household") }}
      </button>
    </li>
    <li v-if="isModeLeaveAllowed && !hasHousehold">
      <button @click="setModeLeave" class="btn btn-sm btn-misc">
        <i class="fa fa-sign-out" />
        {{ $t("household_members_editor.household.leave") }}
      </button>
    </li>
  </ul>
</template>

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

export default {
  name: "Household",
  components: {
    AddPersons,
    CurrentHousehold,
    HouseholdRenderBox,
  },
  emits: ["readyToGo"],
  data() {
    return {
      addPersons: {
        key: "household_find",
        options: {
          type: ["household"],
          priority: null,
          uniq: true,
          button: {
            size: "btn-sm",
            type: "btn-search",
          },
        },
      },
      addAddress: {
        key: "household_new",
        options: {
          useDate: {
            validFrom: false,
            validTo: false,
          },
          onlyButton: true,
          button: {
            text: {
              create: "household_members_editor.household.set_address",
              edit: "household_members_editor.household.update_address",
            },
          },
          title: {
            create: "household_members_editor.household.create_new_address",
            edit: "household_members_editor.household.update_address_title",
          },
        },
      },
    };
  },
  computed: {
    ...mapGetters([
      "isModeNewAllowed",
      "isModeLeaveAllowed",
      "getSuggestions",
      "hasHousehold",
      "isHouseholdNew",
      "hasHouseholdSuggestion",
      "countHouseholdSuggestion",
      "filterHouseholdSuggestionByAccompanyingPeriod",
      "hasAddressSuggestion",
      "countAddressSuggestion",
      "filterAddressesSuggestion",
      "hasHouseholdAddress",
      "isModeLeave",
      "getAddressContext",
    ]),
    ...mapState([
      "household",
      "showHouseholdSuggestion",
      "showAddressSuggestion",
      "mode",
    ]),
    household() {
      return this.$store.state.household;
    },
    allowHouseholdSearch() {
      return false;
      return (
        this.$store.state.allowHouseholdSearch &&
        !this.$store.getters.hasHousehold
      );
    },
    isHouseholdNewDesactivated() {
      return (
        this.$store.state.mode !== null && !this.$store.getters.isHouseholdNew
      );
    },
    isHouseholdLeaveDesactivated() {
      return (
        this.$store.state.mode !== null && this.$store.state.mode !== "leave"
      );
    },
  },
  methods: {
    setModeNew() {
      this.$store.dispatch("createHousehold");
      this.$emit("readyToGo");
    },
    setModeLeave() {
      this.$store.dispatch("forceLeaveWithoutHousehold");
      this.$emit("readyToGo");
    },
    resetMode() {
      this.$store.commit("resetMode");
    },
    addressChanged(payload) {
      console.log("addressChanged", payload);
      this.$store.dispatch("setHouseholdNewAddress", payload.address);
    },
    selectHousehold(h) {
      this.$store.dispatch("selectHousehold", h);
      this.$emit("readyToGo");
    },
    pickHouseholdFound({ selected, modal }) {
      selected.forEach(function (item) {
        this.selectHousehold(item.result);
      }, this);
      this.$refs.pickHousehold.resetSearch(); // to cast child method
      modal.showModal = false;
    },
    removeHouseholdAddress() {
      this.$store.commit("removeHouseholdAddress");
    },
    toggleHouseholdSuggestion() {
      this.$store.commit("toggleHouseholdSuggestion");
    },
  },
};
</script>

<style lang="scss" scoped>
.filtered {
  filter: grayscale(1) opacity(0.6);
}

.filteredButActive {
  filter: grayscale(1) opacity(0.6);
  &:hover {
    filter: unset;
  }
}

div#household_members_editor div,
div.householdSuggestionList {
  &.flex-table {
    margin: 0;
    div.item-bloc div.item-row div.item-col {
      &:first-child {
        width: 25%;
      }
      &:last-child {
        display: initial;
      }
    }
  }
}
</style>
