<template>
   <div class="vue-component">
      <h2><a name="section-20"></a>
         {{ $t('courselocation.title') }}
      </h2>

      <!-- {# include vue_address component #} -->
      <div v-for="error in displayErrors" class="alert alert-danger my-2">
         {{ error }}
      </div>

      <div v-if="hasNoLocation">
         <label class="chill-no-data-statement">
            {{ $t('courselocation.no_address') }}
         </label>
      </div>

      <div v-if="isPersonLocation">
         <label class="col-form-label">
            {{ $t('courselocation.person_locator', [ accompanyingCourse.personLocation.text ]) }}
         </label>
      </div>

      <show-address
         v-if="accompanyingCourse.location"
         :address="accompanyingCourse.location">
      </show-address>

      <div v-if="isTemporaryAddress" class="alert alert-warning">
         <p>{{ $t('courselocation.temporary_address_must_be_changed') }}</p>
      </div>

      <div>
         <ul class="record_actions">
            <li>
               <add-address
                  v-if="!isPersonLocation"
                  :context="context"
                  :key="addAddress.type"
                  :options="addAddress.options"
                  :result="addAddress.result"
                  @submitAddress="submitTemporaryAddress"
                  ref="addAddress">
               </add-address>
            </li>
            <li v-if="isPersonLocation">
               <button
                  class="btn btn-remove"
                  @click="removeAddress"
                  :title="$t('courselocation.remove_button')">
               </button>
            </li>
         </ul>
      </div>

   </div>
</template>

<script>
import { mapState } from "vuex";
import AddAddress from 'ChillMainAssets/vuejs/Address/components/AddAddress.vue';
import ShowAddress from 'ChillMainAssets/vuejs/Address/components/ShowAddress.vue';

export default {
   name: "CourseLocation",
   components: {
      AddAddress,
      ShowAddress
   },
   data() {
      return {
         addAddress: {
            type: 'accompanying_course_location',
            options: {
               /// Options override default.
               /// null value take default component value
               button: {
                  text:  {
                     create: 'courselocation.add_temporary_address',
                     edit: 'courselocation.edit_temporary_address'
                  }
               },
               title: {
                  create: 'courselocation.add_temporary_address',
                  edit: 'courselocation.edit_temporary_address'
               },
               /// Display each step in page or Modal
               bindModal: {
                  //step1: false, step2: false
               },
               hideDateFrom: true
            }
         }
      }
   },
   computed: {
      ...mapState({
         accompanyingCourse: state => state.accompanyingCourse,
         context: state => state.addressContext
      }),
      isTemporaryAddress() {
         return this.accompanyingCourse.locationStatus === 'address';
      },
      isPersonLocation() {
         return this.accompanyingCourse.locationStatus === 'person';
      },
      hasNoLocation() {
         return this.accompanyingCourse.locationStatus === 'none';
      },
      isContextEdit() {
         return this.context.edit;
      }
   },
   methods: {
      initAddressContext() {
         let context = {
            entity: {
               type: this.accompanyingCourse.type,
               id: this.accompanyingCourse.id
            },
            edit: false,
            addressId: null
         }
         if (this.accompanyingCourse.location) {
            context['edit'] = true;
            context['addressId'] = this.accompanyingCourse.location.address_id
         }
         this.$store.commit('setAddressContext', context);
      },
      removeAddress() {
        //console.log('remove address');
         let payload = {
            entity: this.context.entity.type,
            entityId: this.context.entity.id,
            locationStatusTo: 'none'
         };
         this.$store.dispatch('updateLocation', payload);
      },
      displayErrors() {
         return this.$refs.addAddress.errorMsg;
      },
      submitTemporaryAddress() {
        //console.log('@@@ click on Submit Temporary Address Button');
         let payload = this.$refs.addAddress.submitNewAddress();
         payload['locationStatusTo'] = 'address'; // <== temporary, not none, not person
         this.$store.dispatch('updateLocation', payload);
         this.$store.commit('setEditContextTrue');
      }
   },
   mounted() {
      this.initAddressContext();

     //console.log('ac.locationStatus', this.accompanyingCourse.locationStatus);
     //console.log('ac.location (temporary location)', this.accompanyingCourse.location);
     //console.log('ac.personLocation', this.accompanyingCourse.personLocation);
   }
}
</script>
