<template>
   <teleport to="#social-issues-acc">
      
      <div class="container">
         <div class="col-4 clear">
            <label>{{ $t('activity.social_issues') }}</label>
         </div>
         <div class="col-8">
            
            <check-social-issue
               v-for="issue in socialIssuesList"
               v-bind:key="issue.id"
               v-bind:issue="issue"
               v-bind:selection="socialIssuesSelected"
               @updateSelected="updateIssuesSelected">
            </check-social-issue>
            
            <div class="my-3">
            <VueMultiselect
               name="otherIssues"
               label="text"
               track-by="id"
               open-direction="bottom"
               v-bind:close-on-select="true"
               v-bind:preserve-search="false"
               v-bind:reset-after="true"
               v-bind:hide-selected="true"
               v-bind:taggable="false"
               v-bind:multiple="false"
               v-bind:searchable="true"
               v-bind:allow-empty="true" 
               v-bind:show-labels="false"
               v-bind:loading="issueIsLoading"
               v-bind:placeholder="$t('activity.choose_other_social_issue')"
               v-bind:options="socialIssuesOther"
               v-model="value"
               @select="addIssueInList">
            </VueMultiselect>
            </div>
            
         </div>
      </div>

      <div class="container">
         <div class="col-4 clear">
            <label>{{ $t('activity.social_actions') }}</label>
         </div>
         <div class="col-8">
            
            <div v-if="actionIsLoading === true">
               <i class="chill-green fa fa-circle-o-notch fa-spin fa-lg"></i>
            </div>
            
            <check-social-action
               v-if="socialIssuesSelected.length || socialActionsSelected.length"
               v-for="action in socialActionsList"
               v-bind:key="action.id"
               v-bind:action="action"
               v-bind:selection="socialActionsSelected"
               @updateSelected="updateActionsSelected">
            </check-social-action>
            
            <span v-else class="inline-choice chill-no-data-statement mt-3">
               {{ $t('activity.select_first_a_social_issue') }}
            </span>
            
         </div>
      </div>
      
   </teleport>
</template>

<script>
import { readonly } from 'vue';
import VueMultiselect from 'vue-multiselect';
import CheckSocialIssue from './SocialIssuesAcc/CheckSocialIssue.vue';
import CheckSocialAction from './SocialIssuesAcc/CheckSocialAction.vue';
import { getSocialIssues, getSocialActionByIssue } from '../api.js';

export default {
   name: "SocialIssuesAcc",
   components: {
      CheckSocialIssue,
      CheckSocialAction,
      VueMultiselect
   },
   data() {
      return {
         issueIsLoading: false,
         actionIsLoading: false
      }
   },
   computed: {
      socialIssuesList() {
         return this.$store.state.activity.accompanyingPeriod.socialIssues;
      },
      socialIssuesSelected() {
         return this.$store.state.activity.socialIssues;
      },
      socialIssuesOther() {
         return this.$store.state.socialIssuesOther;
      },
      socialActionsList() {
         return this.$store.state.socialActionsList;
      },
      socialActionsSelected() {
         return this.$store.state.activity.socialActions;
      }
   },
   mounted() {
      /* Load others issues in multiselect
      */
      this.issueIsLoading = true;
      getSocialIssues().then(response => new Promise((resolve, reject) => {
         this.$store.commit('updateIssuesOther', response.results);
         
         /* Add in list the issues already associated (if not yet listed)
         */
         this.socialIssuesSelected.forEach(issue => {
            if (this.socialIssuesList.filter(i => i.id === issue.id).length !== 1) {
               this.$store.commit('addIssueInList', issue);
            }
         }, this);
         
         /* Remove from multiselect the issues that are not yet in checkbox list
         */
         this.socialIssuesList.forEach(issue => {
            this.$store.commit('removeIssueInOther', issue);
         }, this);
         
         /* Filter issues
         */
         this.$store.commit('filterList', 'issues');
         
         /* Add in list the actions already associated (if not yet listed)
         */
         this.socialActionsSelected.forEach(action => {
            this.$store.commit('addActionInList', action);
         }, this);
         
         /* Filter issues
         */
         this.$store.commit('filterList', 'actions');
         
         this.issueIsLoading = false;
         resolve();
      }));   
   },
   methods: {
   
      /* When choosing an issue in multiselect, add it in checkboxes (as selected), 
         remove it from multiselect, and add socialActions concerned
      */
      addIssueInList(value) {
         //console.log('addIssueInList', value);
         this.$store.commit('addIssueInList', value);
         this.$store.commit('removeIssueInOther', value);
         this.$store.dispatch('addIssueSelected', value);
         this.updateActionsList();
      },
      /* Update value for selected issues checkboxes
      */
      updateIssuesSelected(issues) {
         //console.log('updateIssuesSelected', issues);
         this.$store.dispatch('updateIssuesSelected', issues);
         this.updateActionsList();
      },
      /* Update value for selected actions checkboxes
      */
      updateActionsSelected(actions) {
         //console.log('updateActionsSelected', actions);
         this.$store.dispatch('updateActionsSelected', actions);
      },
      /* Add socialActions concerned: after reset, loop on each issue selected 
         to get social actions concerned
      */
      updateActionsList() {
         //console.log('updateActionsList');
         this.resetActionsList();
         this.socialIssuesSelected.forEach(item => {
            
            this.actionIsLoading = true;
            getSocialActionByIssue(item.id)
               .then(actions => new Promise((resolve, reject) => {
                  
                  actions.results.forEach(action => {
                     this.$store.commit('addActionInList', action);
                  }, this);
                  
                  this.$store.commit('filterList', 'actions');
                  
                  this.actionIsLoading = false;
                  resolve();
            }));
         }, this);
      },
      /* Reset socialActions List: flush list and restore selected actions 
      */
      resetActionsList() {
         this.$store.commit('resetActionsList');
         this.socialActionsSelected.forEach(item => {
            this.$store.commit('addActionInList', item);
         }, this);
      }
   }
}
</script>

<style src="vue-multiselect/dist/vue-multiselect.css"></style>
<style lang="scss">
   span.multiselect__single {
      display: none !important;
   }
</style>
