<template>
  <teleport to="#add-persons" v-if="isComponentVisible">
    <div class="flex-bloc concerned-groups" :class="getContext">
      <persons-bloc
        v-for="bloc in contextPersonsBlocs"
        :key="bloc.key"
        :bloc="bloc"
        :bloc-width="getBlocWidth"
        :set-persons-in-bloc="setPersonsInBloc"
      />
    </div>
    <div
      v-if="getContext === 'accompanyingCourse' && suggestedEntities.length > 0"
    >
      <ul class="list-suggest add-items inline">
        <li
          v-for="(p, i) in suggestedEntities"
          @click="addSuggestedEntity(p)"
          :key="`suggestedEntities-${i}`"
        >
          <person-text v-if="p.type === 'person'" :person="p" />
          <span v-else>{{ p.text }}</span>
        </li>
      </ul>
    </div>

    <ul class="record_actions">
      <li class="add-persons">
        <add-persons
          :buttonTitle="trans(ACTIVITY_ADD_PERSONS)"
          :modalTitle="trans(ACTIVITY_ADD_PERSONS)"
          v-bind:key="addPersons.key"
          v-bind:options="addPersonsOptions"
          @addNewPersons="addNewPersons"
          ref="addPersons"
        >
        </add-persons>
      </li>
    </ul>
  </teleport>
</template>

<script>
import { mapState, mapGetters } from "vuex";
import AddPersons from "ChillPersonAssets/vuejs/_components/AddPersons.vue";
import PersonsBloc from "./ConcernedGroups/PersonsBloc.vue";
import PersonText from "ChillPersonAssets/vuejs/_components/Entity/PersonText.vue";
import {
  ACTIVITY_BLOC_PERSONS,
  ACTIVITY_BLOC_PERSONS_ASSOCIATED,
  ACTIVITY_BLOC_THIRDPARTY,
  ACTIVITY_BLOC_USERS,
  ACTIVITY_ADD_PERSONS,
  trans,
} from "translator";

export default {
  name: "ConcernedGroups",
  components: {
    AddPersons,
    PersonsBloc,
    PersonText,
  },
  setup() {
    return {
      trans,
      ACTIVITY_ADD_PERSONS,
    };
  },
  data() {
    return {
      personsBlocs: [
        {
          key: "persons",
          title: trans(ACTIVITY_BLOC_PERSONS),
          persons: [],
          included: false,
        },
        {
          key: "personsAssociated",
          title: trans(ACTIVITY_BLOC_PERSONS_ASSOCIATED),
          persons: [],
          included: window.activity
            ? window.activity.activityType.personsVisible !== 0
            : true,
        },
        {
          key: "personsNotAssociated",
          title: "activity.bloc_persons_not_associated",
          persons: [],
          included: window.activity
            ? window.activity.activityType.personsVisible !== 0
            : true,
        },
        {
          key: "thirdparty",
          title: trans(ACTIVITY_BLOC_THIRDPARTY),
          persons: [],
          included: window.activity
            ? window.activity.activityType.thirdPartiesVisible !== 0
            : true,
        },
        {
          key: "users",
          title: trans(ACTIVITY_BLOC_USERS),
          persons: [],
          included: window.activity
            ? window.activity.activityType.usersVisible !== 0
            : true,
        },
      ],
      addPersons: {
        key: "activity",
      },
    };
  },
  computed: {
    isComponentVisible() {
      return window.activity
        ? window.activity.activityType.personsVisible !== 0 ||
            window.activity.activityType.thirdPartiesVisible !== 0 ||
            window.activity.activityType.usersVisible !== 0
        : true;
    },
    ...mapState({
      persons: (state) => state.activity.persons,
      thirdParties: (state) => state.activity.thirdParties,
      users: (state) => state.activity.users,
      accompanyingCourse: (state) => state.activity.accompanyingPeriod,
    }),
    ...mapGetters(["suggestedEntities"]),
    getContext() {
      return this.accompanyingCourse ? "accompanyingCourse" : "person";
    },
    contextPersonsBlocs() {
      return this.personsBlocs.filter((bloc) => bloc.included !== false);
    },
    addPersonsOptions() {
      let optionsType = [];
      if (window.activity) {
        if (window.activity.activityType.personsVisible !== 0) {
          optionsType.push("person");
        }
        if (window.activity.activityType.thirdPartiesVisible !== 0) {
          optionsType.push("thirdparty");
        }
        if (window.activity.activityType.usersVisible !== 0) {
          optionsType.push("user");
        }
      } else {
        optionsType = ["person", "thirdparty", "user"];
      }
      return {
        type: optionsType,
        priority: null,
        uniq: false,
        button: {
          size: "btn-sm",
        },
      };
    },
    getBlocWidth() {
      return Math.round(100 / this.contextPersonsBlocs.length) + "%";
    },
  },
  mounted() {
    this.setPersonsInBloc();
  },
  methods: {
    setPersonsInBloc() {
      let groups;
      if (this.accompanyingCourse) {
        groups = this.splitPersonsInGroups();
      }
      this.personsBlocs.forEach((bloc) => {
        if (this.accompanyingCourse) {
          switch (bloc.key) {
            case "personsAssociated":
              bloc.persons = groups.personsAssociated;
              bloc.included = true;
              break;
            case "personsNotAssociated":
              bloc.persons = groups.personsNotAssociated;
              bloc.included = true;
              break;
          }
        } else {
          switch (bloc.key) {
            case "persons":
              bloc.persons = this.persons;
              bloc.included = true;
              break;
          }
        }
        switch (bloc.key) {
          case "thirdparty":
            bloc.persons = this.thirdParties;
            break;
          case "users":
            bloc.persons = this.users;
            break;
        }
      }, groups);
    },
    splitPersonsInGroups() {
      let personsAssociated = [];
      let personsNotAssociated = this.persons;
      let participations = this.getCourseParticipations();
      this.persons.forEach((person) => {
        participations.forEach((participation) => {
          if (person.id === participation.id) {
            //console.log(person.id);
            personsAssociated.push(person);
            personsNotAssociated = personsNotAssociated.filter(
              (p) => p !== person,
            );
          }
        });
      });
      return {
        personsAssociated: personsAssociated,
        personsNotAssociated: personsNotAssociated,
      };
    },
    getCourseParticipations() {
      let participations = [];
      this.accompanyingCourse.participations.forEach((participation) => {
        if (!participation.endDate) {
          participations.push(participation.person);
        }
      });
      return participations;
    },
    addNewPersons({ selected, modal }) {
      console.log("@@@ CLICK button addNewPersons", selected);
      selected.forEach((item) => {
        this.$store.dispatch("addPersonsInvolved", item);
      }, this);
      this.$refs.addPersons.resetSearch(); // to cast child method
      modal.showModal = false;
      this.setPersonsInBloc();
    },
    addSuggestedEntity(person) {
      this.$store.dispatch("addPersonsInvolved", {
        result: person,
        type: "person",
      });
      this.setPersonsInBloc();
    },
  },
};
</script>

<style lang="scss" scoped></style>
