<template>
  <current-household />

  <h2>
    {{ $t("household_members_editor.positioning.persons_to_positionnate") }}
  </h2>

  <div class="list-household-members flex-table">
    <div v-for="conc in concerned" class="item-bloc" :key="conc.person.id">
      <div class="pick-position item-row">
        <div class="person">
          <!-- <h3>{{ conc.person.text }}</h3> -->
          <h3><person-text :person="conc.person" /></h3>
        </div>
        <div class="holder">
          <button
            class="btn"
            :disabled="!allowHolderForConcerned(conc)"
            :class="{
              'btn-outline-chill-green': !conc.holder,
              'btn-chill-green': conc.holder,
            }"
            @click="toggleHolder(conc)"
          >
            {{ $t("household_members_editor.positioning.holder") }}
          </button>
        </div>
        <div
          v-for="(position, i) in positions"
          :key="`position-${i}`"
          class="position"
        >
          <button
            class="btn"
            :class="{
              'btn-primary': conc.position === position,
              'btn-outline-primary': conc.position !== position,
            }"
            @click="moveToPosition(conc.person.id, position.id)"
          >
            {{ localizeString(position.label) }}
          </button>
        </div>
      </div>
      <div class="item-row">
        <div class="col-12">
          <h6>
            {{ $t("household_members_editor.positioning.comment") }}
          </h6>
          <person-comment :conc="conc" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";
import CurrentHousehold from "./CurrentHousehold";
import PersonComment from "./PersonComment";
import PersonText from "../../_components/Entity/PersonText.vue";
import { localizeString } from "ChillMainAssets/lib/localizationHelper/localizationHelper";

export default {
  name: "Positioning",
  components: {
    CurrentHousehold,
    PersonComment,
    PersonText,
  },
  computed: {
    ...mapState(["concerned"]),
    ...mapGetters([
      "persons",
      "concUnpositionned",
      "positions",
      "concByPosition",
    ]),
    allPersonsPositionnated() {
      return (
        this.$store.getters.persons.length > 0 &&
        this.$store.getters.concUnpositionned.length === 0
      );
    },
    allowHolderForConcerned: () => (conc) => {
      console.log("allow holder for concerned", conc);
      if (conc.position === null) {
        return false;
      }

      return conc.position.allowHolder;
    },
  },
  methods: {
    localizeString,
    moveToPosition(person_id, position_id) {
      this.$store.dispatch("markPosition", { person_id, position_id });
    },
    toggleHolder(conc) {
      console.log("toggle holder", conc);
      this.$store.dispatch("toggleHolder", conc);
    },
  },
};
</script>

<style lang="scss" scoped>
.pick-position {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;

  .person {
    margin-right: auto;
  }
  .holder {
    margin-right: 1.2rem;
  }
}
</style>
