<template>

   <a v-if="isDisplayBadge" @click="openModal">
      <span class="chill-entity" :class="badgeType">
         {{ buttonText }}
      </span>
   </a>
   <a v-else class="btn btn-sm" target="_blank"
      :class="classAction"
      :title="$t(titleAction)"
      @click="openModal">
      {{ buttonText }}
   </a>

   <teleport to="body">
      <modal v-if="modal.showModal"
         :modalDialogClass="modal.modalDialogClass"
         @close="modal.showModal = false">

         <template v-slot:header>
            <h3 class="modal-title">{{ $t(titleModal) }}</h3>
         </template>

         <template v-slot:body v-if="type === 'person'">
            <on-the-fly-person
               :id="id"
               :type="type"
               :action="action"
               ref="castPerson">
            </on-the-fly-person>
            <div v-if="hasResourceComment">
                <h3>{{ $t('onthefly.resource_comment_title') }}</h3>
                <blockquote class="chill-user-quote">
                    {{ parent.comment }}
                </blockquote>
            </div>
         </template>

         <template v-slot:body v-else-if="type === 'thirdparty'">
            <on-the-fly-thirdparty
               :id="id"
               :type="type"
               :action="action"
               ref="castThirdparty">
            </on-the-fly-thirdparty>
            <div v-if="hasResourceComment">
                <h3>{{ $t('onthefly.resource_comment_title') }}</h3>
                <blockquote class="chill-user-quote">
                    {{ parent.comment }}
                </blockquote>
            </div>
         </template>

         <template v-slot:body v-else-if="action === 'addContact'">
            <on-the-fly-thirdparty
               :parent="parent"
               type="thirdparty"
               action="create"
               kind="child"
               ref="castThirdparty">
            </on-the-fly-thirdparty>
         </template>

         <template v-slot:body v-else>
            <on-the-fly-create
               :action="action"
               ref="castNew">
            </on-the-fly-create>
         </template>

         <template v-slot:footer>
            <a v-if="action === 'show'"
               :href="buildLocation(id, type)"
               :title="$t(titleMessage)"
               class="btn btn-show">{{ $t(buttonMessage) }}
            </a>
            <a v-else
               class="btn btn-save"
               @click="saveAction">
               {{ $t('action.save')}}
            </a>
         </template>

      </modal>
   </teleport>

</template>

<script>
import Modal from 'ChillMainAssets/vuejs/_components/Modal.vue';
import OnTheFlyCreate from './Create.vue';
import OnTheFlyPerson from 'ChillPersonAssets/vuejs/_components/OnTheFly/Person.vue';
import OnTheFlyThirdparty from 'ChillThirdPartyAssets/vuejs/_components/OnTheFly/ThirdParty.vue';

export default {
   name: 'OnTheFly',
   components: {
      Modal,
      OnTheFlyPerson,
      OnTheFlyThirdparty,
      OnTheFlyCreate
   },
   props: ['type', 'id', 'action', 'buttonText', 'displayBadge', 'parent'],
   emits: ['saveFormOnTheFly'],
   data() {
      return {
         modal: {
            showModal: false,
            modalDialogClass: "modal-dialog-scrollable modal-xl"
         }
      }
   },
   computed: {
      hasResourceComment() {
          //console.log('hasResourceComment', this.parent);
          return (typeof this.parent !== 'undefined' && this.parent !== null)
              && this.action === 'show'
              && this.parent.type === 'accompanying_period_resource'
              && (this.parent.comment !== null && this.parent.comment !== '')
              ;
      },
      classAction() {
         switch (this.action) {
            case 'show':
               return 'btn-show';
            case 'edit':
               return 'btn-update';
            case 'create':
               return 'btn-create';
            case 'addContact':
               return 'btn-create';
         }
      },
      titleAction() {
         switch (this.action) {
            case 'show':
               return 'action.show';
            case 'edit':
               return 'action.edit';
            case 'create':
               return 'action.create';
         }
      },
      titleModal() {
         switch (this.action) {
            case 'show':
               return 'onthefly.show.' + this.type;
            case 'edit':
               return 'onthefly.edit.' + this.type;
            case 'create':
               return 'onthefly.create.title';
         }
      },
      titleMessage() {
         switch (this.type){
            case 'person':
               return 'action.redirect.' + this.type;
            case 'thirdparty':
               return 'action.redirect.' + this.type;
         }
      },
      buttonMessage() {
         switch (this.type){
            case 'person':
               return 'onthefly.show.file_' + this.type;
            case 'thirdparty':
               return 'onthefly.show.file_' + this.type;
         }
      },
      isDisplayBadge() {
         return (this.displayBadge === true && this.buttonText !== null);
      },
      badgeType() {
         return 'entity-' + this.type + ' badge-' + this.type;
      }
   },
   methods: {
      openModal() {
         //console.log('## OPEN ON THE FLY MODAL');
         //console.log('## type:', this.type, ', action:', this.action);
         this.modal.showModal = true;
         this.$nextTick(function() {
            //this.$refs.search.focus();
         })
      },
      changeActionTo(action) {
         this.$data.action = action;
      },
      saveAction() {
         console.log('saveAction button: create/edit action with', this.type);
         let
            type = this.type,
            data = {} ;

         switch (type) {
            case 'person':
               data = this.$refs.castPerson.$data.person;
               break;

            case 'thirdparty':
               data = this.$refs.castThirdparty.$data.thirdparty;
               break;

            default:
               if (typeof this.type === 'undefined') { // action=create
                  type = this.$refs.castNew.radioType;
                  data = this.$refs.castNew.castDataByType();
               } else {
                  throw 'error with object type';
               }
         }

         // pass datas to parent
         this.$emit('saveFormOnTheFly', { type: type, data: data });

         this.modal.showModal = false;
      },
      buildLocation(id, type) {
         if (type === 'person') {
            // TODO i18n
            return `/fr/person/${id}/general`;
         } else if (type === 'thirdparty') {
            return `/fr/3party/3party/${id}/view`;
         }
      }
   }
}
</script>

<style lang="css" scoped>
a {
   cursor: pointer;
}
</style>
