<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) }}
   </div>

   <address-render-box :address="address"></address-render-box>

   <action-buttons :flag="this.flag" :options="this.options" :default="this.default">
      <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',
      'default',
      '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.default.button.displayText;
      },
      getClassButton() {
         let type = (this.context.edit) ? this.default.button.type.edit : this.default.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.default.button.text.edit : this.default.button.text.create;
      },
      getSuccessText() {
         switch (this.context.entity.name) {
            /*
            case 'household':
               return (this.context.edit) ? 'household_address_edit_success' : 'household_address_move_success';
            case 'person':
               return (this.context.edit) ? 'person_address_edit_success' : 'person_address_creation_success';
            */
            default:
               return (this.context.edit) ? 'address_edit_success' : 'address_new_success';
         }
      }
   }
};
</script>
