<template>
  <div class="item-bloc">
    <div class="item-row">
      <div class="item-col">
        <div>
          <person-render-box
            render="badge"
            :options="{}"
            :person="conc.person"
          />
          <span v-if="isHolder" class="badge bg-primary holder">
            {{ $t("household_members_editor.holder") }}
          </span>
        </div>
        <div v-if="conc.person.birthdate !== null">
          {{
            $t("person.born", {
              gender: conc.person.gender.genderTranslation,
            })
          }}
        </div>
      </div>
      <div class="item-col">
        <ul class="list-content fa-ul">
          <li>
            <i class="fa fa-li fa-map-marker" />
            <span class="chill-no-data-statement">Sans adresse</span>
          </li>
        </ul>
      </div>
    </div>

    <div class="item-row comment">
      <comment-editor v-model="comment" />
    </div>

    <div class="item-row participation-details">
      <div v-if="conc.position.allowHolder" class="action">
        <button
          class="btn"
          :class="{
            'btn-primary': isHolder,
            'btn-secondary': !isHolder,
          }"
          @click="toggleHolder"
        >
          {{
            $t(
              isHolder
                ? "household_members_editor.is_holder"
                : "household_members_editor.is_not_holder",
            )
          }}
        </button>
      </div>

      <div>
        <button @click="removePosition" class="btn btn-outline-primary">
          {{
            $t("household_members_editor.remove_position", {
              position: conc.position.label.fr,
            })
          }}
        </button>
      </div>

      <div>
        <button
          v-if="conc.allowRemove"
          @click="removeConcerned"
          class="btn btn-primary"
        >
          {{ $t("household_members_editor.remove_concerned") }}
        </button>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.drag-icon {
  height: 1.1em;
  margin-right: 0.5em;
}
div.participation-details {
  display: flex;
  flex-direction: row !important;
  justify-content: flex-end;

  .action {
    align-self: flex-start;
    margin-right: auto;
  }
}

.holder {
  display: inline;
  vertical-align: super;
  font-size: 0.6em;
}
</style>

<script>
import { mapGetters } from "vuex";
import PersonRenderBox from "ChillPersonAssets/vuejs/_components/Entity/PersonRenderBox.vue";
import CommentEditor from "ChillMainAssets/vuejs/_components/CommentEditor/CommentEditor.vue";

export default {
  name: "MemberDetails",
  components: {
    PersonRenderBox,
    CommentEditor,
  },
  props: ["conc"],
  computed: {
    ...mapGetters(["concByPersonId"]),
    classicEditor: () => ClassicEditor,
    editorConfig: () => classicEditorConfig,
    isHolder() {
      return this.conc.holder;
    },
    comment: {
      get() {
        return this.conc.comment;
      },
      set(text) {
        console.log("set comment");
        console.log("comment", text);

        this.$store.dispatch("setComment", {
          conc: this.conc,
          comment: text,
        });
      },
    },
  },
  methods: {
    toggleHolder() {
      this.$store.dispatch("toggleHolder", this.conc);
    },
    removePosition() {
      this.$store.dispatch("removePosition", this.conc);
    },
    removeConcerned() {
      this.$store.dispatch("removeConcerned", this.conc);
    },
  },
};
</script>
