<template>

   <div class="loading">
      <i v-if="flag.loading" class="fa fa-circle-o-notch fa-spin fa-2x fa-fw"></i>
      <span class="sr-only">{{ $t('loading') }}</span>
   </div>
   <div v-if="errorMsg && errorMsg.length > 0" class="alert alert-danger">
      {{ errorMsg }}
   </div>
   <div v-if="flag.success" class="alert alert-success">
      {{ $t(getSuccessText) }}
      <span v-if="forceRedirect">{{ $t('wait_redirection') }}</span>
   </div>

   <div v-if="noAddressWithStickyActions" class="mt-5">
      <p class="chill-no-data-statement">
         {{ $t('not_yet_address') }}
      </p>
   </div>

   <address-render-box v-if="!hideAddress" :address="address"></address-render-box>

   <action-buttons
      :options="this.options"
      :defaultz="this.defaultz">
      <template v-slot:action>
         <li>
            <button @click.prevent="$emit('openEditPane')"
               class="btn" :class="getClassButton"
               type="button" name="button" :title="$t(getTextButton)">
               <span v-if="displayTextButton">{{ $t(getTextButton) }}</span>
            </button>
         </li>
      </template>
   </action-buttons>

</template>

<script>
import AddressRenderBox from 'ChillMainAssets/vuejs/_components/Entity/AddressRenderBox.vue';
import ActionButtons from './ActionButtons.vue';

export default {
   name: 'ShowPane',
   components: {
      AddressRenderBox,
      ActionButtons
   },
   props: [
      'context',
      'options',
      'defaultz',
      'flag',
      'entity',
      'errorMsg'
   ],
   emits: ['openEditPane'],
   computed: {
      address() {
         return this.entity.address;
      },
      displayTextButton() {
         return (typeof this.options.button !== 'undefined' && typeof this.options.button.displayText !== 'undefined') ?
            this.options.button.displayText : this.defaultz.button.displayText;
      },
      getClassButton() {
         let type = (this.context.edit) ? this.defaultz.button.type.edit : this.defaultz.button.type.create;
         let size = (typeof this.options.button !== 'undefined' && this.options.button.size !== null) ?
            `${this.options.button.size} ` : '';
         return `${size}${type}`;
      },
      getTextButton() {
         if ( typeof this.options.button.text !== 'undefined'
            && ( this.options.button.text.edit !== null
               || this.options.button.text.create !== null
            )) {
            return (this.context.edit) ? this.options.button.text.edit : this.options.button.text.create;
         }
         return (this.context.edit) ? this.defaultz.button.text.edit : this.defaultz.button.text.create;
      },
      getSuccessText() {
         return (this.context.edit) ? 'address_edit_success' : 'address_new_success';
      },
      hideAddress() {
         return (typeof this.options.hideAddress !== 'undefined') ?
            this.options.hideAddress : this.defaultz.hideAddress;
      },
      forceRedirect() {
         return this.context.backUrl !== null;
      },
      noAddressWithStickyActions() {
         return !this.context.edit && !this.address.id && this.options.stickyActions;
      }
   }
};
</script>
